Is there option to insert raw html code to quill?
quill.insertText();
quill.clipboard.dangerouslyPasteHTML()
both are parsed by matcher but I need to paste exactly formatted html code for an email footer.
If the footer content is meant to be static and un-editable, you can do this by extending the BlockEmbed blot then adding a button for your new format in the toolbar. There are 2 different ways to handle what HTML get's entered into the new format.
1. Let the user enter the HTML to embed:
// Import the BlockEmbed blot.
var BlockEmbed = Quill.import('blots/block/embed');
// Create a new format based off the BlockEmbed.
class Footer extends BlockEmbed {
// Handle the creation of the new Footer format.
// The value will be the HTML that is embedded.
// By default, the toolbar will show a prompt window to get the value.
static create(value) {
// Create the node using the BlockEmbed's create method.
var node = super.create(value);
// Set the srcdoc attribute to equal the value which will be your html.
node.setAttribute('srcdoc', value);
// Add a few other iframe fixes.
node.setAttribute('frameborder', '0');
node.setAttribute('allowfullscreen', true);
node.setAttribute('width', '100%');
return node;
}
// return the srcdoc attribute to represent the Footer's value in quill.
static value(node) {
return node.getAttribute('srcdoc');
}
}
// Give our new Footer format a name to use in the toolbar.
Footer.blotName = 'footer';
// Give it a class name to edit the css.
Footer.className = 'ql-footer';
// Give it a tagName of iframe to tell quill what kind of element to create.
Footer.tagName = 'iframe';
// Lastly, register the new Footer format so we can use it in our editor.
Quill.register(Footer, true);
var quill = new Quill('#editor-container', {
modules: {
toolbar: {
container: ['footer'] // Toolbar with just our footer tool (of course you can add all you want).
}
},
theme: 'snow'
});
.ql-toolbar .ql-footer:before {
content: 'footer';
}
.ql-editor .ql-footer {
background: #f7f7f7;
}
<link href="//cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"/>
<div id="editor-container">
<h1>Test Content</h1>
<p>Enter a footer</p>
</div>
<script src="//cdn.quilljs.com/1.3.4/quill.min.js"></script>
2. Use specific HTML
// Import the BlockEmbed blot.
var BlockEmbed = Quill.import('blots/block/embed');
// Create a new format based off the BlockEmbed.
class Footer extends BlockEmbed {
// Handle the creation of the new Footer format.
// The value will be the HTML that is embedded.
// This time the value is passed from our custom handler.
static create(value) {
// Create the node using the BlockEmbed's create method.
var node = super.create(value);
// Set the srcdoc attribute to equal the value which will be your html.
node.setAttribute('srcdoc', value);
// Add a few other iframe fixes.
node.setAttribute('frameborder', '0');
node.setAttribute('allowfullscreen', true);
node.setAttribute('width', '100%');
return node;
}
// return the srcdoc attribute to represent the Footer's value in quill.
static value(node) {
return node.getAttribute('srcdoc');
}
}
// Give our new Footer format a name to use in the toolbar.
Footer.blotName = 'footer';
// Give it a class name to edit the css.
Footer.className = 'ql-footer';
// Give it a tagName of iframe to tell quill what kind of element to create.
Footer.tagName = 'iframe';
// Register the new Footer format so we can use it in our editor.
Quill.register(Footer, true);
// Specify the HTML that will be embedded.
var footerHTML = '<h1>Footer</h1>'
+ '<p>This is our new footer</p>';
// Create the footer handler.
var footerHandler = function() {
// Get the cursor location to know where footer will be added.
var index = this.quill.getSelection(true).index;
// Insert the footer with the footerHTML.
this.quill.insertEmbed(index, 'footer', footerHTML);
};
// Import the Toolbar module so we can add a custom handler to our footer button.
var Toolbar = Quill.import('modules/toolbar');
// Add our custom footer handler to the footer button.
Toolbar.DEFAULTS.handlers['footer'] = footerHandler;
var quill = new Quill('#editor-container', {
modules: {
toolbar: {
container: ['footer'] // Toolbar with just our footer tool (of course you can add all you want).
}
},
theme: 'snow'
});
.ql-toolbar .ql-footer:before {
content: 'footer';
}
.ql-editor .ql-footer {
background: #f7f7f7;
}
<link href="//cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"/>
<div id="editor-container">
<h1>Test Content</h1>
<p>Enter a footer</p>
</div>
<script src="//cdn.quilljs.com/1.3.4/quill.min.js"></script>
Related
I made a method « numberMatch » that push a gif, that is stored in a variable, in a tab on click. The method works well, but when i call the tab in the template instead of the gif it’s the path of the gif that shows as a string value.
Can someone tell me how to make the gif appear properly on the page instead?
The div that show the image in the tab in the template is this one:
<div>{{this.gifTab}}</div>
<script>
export default {
name:'Body',
data() {
return {
luckyNumber:'',
randomNumber:'',
number: 0,
gifCharles:require("../assets/jpg/isolation-charles.png"),
gifTab:[],
scoresTab:[],
total:0,
}
},
methods: {
RandomNumbGenerator(){
this.randomNumber = Math.floor(Math.random()*11);
return this.randomNumber
},
InputValue(){
this.luckyNumber = document.getElementById("input_lucky_numb").value;
},
NumberMatch(){
if(this.randomNumber == this.luckyNumber){
var tabGif = this.gifTab.push(this.gifCharles)
return tabGif
}
}
},
};
</script>
You need to add an image element.
Replace
{{this.gifTab}}
with
<img :src="gifTab"/>
Does NetSuite SuiteCommerce not support anchor tags? I want to include some links at the top of my page that let the viewer jump down to that category (on the same page). I know I have my code set up properly, but all that happens is that it tries to open a new page with no content on it:
https://www.prospectfastener.com/product-interchange
Using Anchor Tags with NetSuite SuiteCommerce
Bundled together a few answers from other Backbone related questions. This can be used in custom extensions or it can be placed in to SMT CMS HTML Content as an inline script.
Tested with SC 2022.1
// This breaks the function out of the try/catch for use on page
var scrollToAnchorFn = null;
// SB env keeps doubling loading inline scripts for testing
// This tests/sets its own property on the window to test against for that
if (typeof window.anchorSet === 'undefined') {
try {
window.anchorSet = true;
// Call scrollToAnchor with anchor ID whenever you want to jump between points on a page
const scrollToAnchor = (anchorId) => {
try {
var aTag = $(anchorId);
$('html,body').animate({
scrollTop: aTag.offset().top
},
'slow',
);
} catch (err) {
console.error(err);
}
};
const initAnchorScroll = () => {
// Test if jQuery is loaded yet, if not set timeout and repeat fn
if (window.jQuery) {
// Check if document is already loaded and ready, run code now if dom is ready
if (document.readyState === 'complete')
return scrollToAnchor(PageHash);
// Before images or styling is finished loading, move to part of dom requested which is ready
return $(document).ready(() => {
scrollToAnchor(PageHash);
});
}
setTimeout(function() {
initAnchorScroll();
}, 50);
};
// Get our page hash
// const PageHash = window.location.hash;
// Snippet demo hash
const PageHash = '#testAnchor';
// Initialize on page load if hash detected in url
// Since hashes return the #,
// we want a length greater than 1 to ensure there is an id
if (PageHash.length > 1) initAnchorScroll();
scrollToAnchorFn = scrollToAnchor;
} catch (err) {
console.error(err);
}
}
.fillerDiv {
height: 100vh;
width: 1000vw;
background-color: #fedd00;
}
#testAnchor {
background-color: #4285f4;
color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container">
<div class="fillerDiv"></div>
<div id="testAnchor">this is test content down the page with anchor ID.
Go to Next Anchor</div>
<div class="fillerDiv "></div>
<div id="testAnchor2">Second anchor tag</div>
<div class="fillerDiv "></div>
</div>
Old Answer
I'm going to assume not, but I'd be happy to be wrong.
Note: Anchor Tags are not supported by Content Delivery.
NetSuite Applications Suite -- Understanding Content Delivery
I have recently started exploring quill to implement a rich text editor. I want to render following html content in quill editor:
Second span
However when rendered, span tag is removed and its content is wrapped inside P tag and rendered. I learnt that as part of optimization quill removed span tags. But I really want span tag to render so I added a SPAN blot extending BlockEmbed. However after adding SPAN blot, nothing rendered in the editor. I don't understand what I am doing wrong; Here is the SPAN Blot:
let quill = require("quill");
let BlockEmbed = quill.import("blots/block/embed");
class SpanBlot extends BlockEmbed {
public static create(value: any): any {
let node = super.create(value);
node.setAttribute("data-embed-id", value);
return node;
}
public static value(node: any): any {
return node;
}
public static formats(node: any): any {
let format: any = {};
if (node.hasAttribute("data-embed-id")) {
format.height = node.getAttribute("data-embed-id");
}
return format;
}
public formats(): any {
let formats = super.formats();
formats["span"] = SpanBlot.formats(this.domNode);
return formats;
}
}
SpanBlot.blotName = "Span";
SpanBlot.tagName = "SPAN";
SpanBlot.class = "social";
export { BlockEmbed, SpanBlot };
Let's say I need to add an element to the navbar when the user have scrolled past the header of the site. How can I do something like this in React without using jQuery?
You can do some thing like this: (this function was copied from my own react-sticky-dynamic-header that I created before: https://github.com/thinhvo0108/react-sticky-dynamic-header )
componentDidMount() {
var h1 = parseInt(this.refs.header.offsetHeight);
window.addEventListener('scroll', this._calcScroll.bind(this, h1));
}
componentWillUnmount() {
window.removeEventListener('scroll', this._calcScroll)
}
_calcScroll(h1) {
var _window = window;
var heightDiff = parseInt(h1);
var scrollPos = _window.scrollY;
if (scrollPos > heightDiff) {
// here this means user has scrolled past your header,
// you may rerender by setting State or do whatever
this.setState({
//stateKey: stateValue,
});
} else {
// here the user has scrolled back to header's territory,
// it's optional here for you to remove the element on navbar as stated in the question or not
this.setState({
//stateKey: stateValue,
});
}
}
render() {
return (
<div ref="header">YOUR HEADER HERE</div>
);
}
For a smooth animation when your element added or removed from the navbar, you can just add this into the element's CSS style:
#your-element{
transition: opacity 0.3s ease-in;
}
You can try to install my library to see if it can extend your needs:
https://www.npmjs.com/package/react-sticky-dynamic-header
Feel free to post here some errors if any, thanks
I want to add a couple of pre-built labels like
<div class="label"> Label Text <span>x</span><div>
to the html content in the quill editor. Add such a tag should not be a problem in itself. However I don't want the user to be able to edit the text inside the label. The cursor should not even be allowed to be placed inside the label. On delete the whole div should be deleted. The whole label should act like an image in some sense.
Is it possible ?
You should be able to achieve this by writing your own Blot:
class Label extends Parchment.Embed {
static create(value) {
const node = super.create(value);
node.innerText = value;
// Remember to set this so users can't edit
// the label's content
node.contentEditable = 'false';
this._addRemovalButton(node);
return node;
}
static value(node) {
// Only return the text of the first child
// node (ie the text node), otherwise the
// value includes the contents of the button
return node.childNodes[0].textContent;
}
static _addRemovalButton(node) {
const button = document.createElement('button');
button.innerText = 'x';
button.onclick = () => node.remove();
button.contentEditable = 'false';
node.appendChild(button);
// Extra span forces the cursor to the end of
// the label, otherwise it appears inside the
// removal button
const span = document.createElement('span');
span.innerText = ' ';
node.appendChild(span);
}
}
Label.blotName = 'label';
Label.tagName = 'SPAN';
Label.className = 'ql-label';
You register it with Quill:
Quill.register(Label);
And finally, you can use it in a similar way to an image or other embeds:
quill.updateContents(
new Delta().insert({ label: 'foo' })
);
NB: Any styling you need can be applied with the .ql-label class:
.ql-label {
background-color: lightgrey;
padding: 0.3em;
margin: 0 0.2em;
}
.ql-label button {
margin-left: 0.3em;
}
Finally finally: a working example.