How do you insert HTML into a QuillJS? - javascript

Is it possible to insert raw HTML into a Quill? I've been searching the documentation but couldn't find anything.
If it's not possible, can I at least convert HTML into a Quill Delta?
The reason I need this is because I am grabbing the raw HTML of the text taken from Quill, so I can view it later in HTML style. Have I been doing everything wrong, and need to keep a Delta version of it as well?

On version 1.3.6,
You can use Quill.setContents(value) method.
And insert your new HTML like this:
const value = `<h1>New content here</h1>`
const delta = quill.clipboard.convert(value)
quill.setContents(delta, 'silent')
Quill documentation: https://quilljs.com/docs/api/#setcontents

I have found a way, looking extremely closely at the documentation. Method quill.clipboard.dangerouslyPasteHTML('raw html'); does the trick. https://quilljs.com/docs/modules/clipboard/#dangerouslypastehtml

Another way to insert HTML into Quill is by using vanilla JavaScript.
You can set your html to a variable, such as htmlToInsert.
Then target the contenteditable div created by Quill, by getting it by its class, ql-editor.
Finally, set the innerHTML of that div to the HTML you want to insert.
For example:
var htmlToInsert = "<p>here is some <strong>awesome</strong> text</p>"
var editor = document.getElementsByClassName('ql-editor')
editor[0].innerHTML = htmlToInsert

There is better way to do this:
const htmlMurkup = '<p>Good</p>'
let quill = new Quill()
quill.container.firstChild.innerHTML = htmlMurkup

I believe the most straight forward way is this:
quill.root.innerHTML = '<p>HTML Goes Here</p>'
You can also obtain the HTML from this property as well.

If you aren't getting the desired output. It could be because your html content is encoded.
Use this to convert it.
let realHTML = $('<textarea />').html("<p><strong>Hello</strong></p><p><br></p>").text();
console.log(realHTML);
This code will output
<p><strong>Hello</strong></p>
After this you can use this command to set the html content in quill editor
quill.root.innerHTML = realHTML;
or even this:
let initialContent = quill.clipboard.convert(realHTML);
quill.setContents(initialContent, 'silent');
Its proper your html is in the real html format before setting the value on quill. Else the html tags would be displayed verbally.

Just to add to #user1993629's answer, using quill.clipboard.dangerouslyPasteHtml(0, "raw html") will place the cursor at the end of the pasted content

Related

How to get HTML element node value in TinyMCE editor using Javascript or jQuery

How to get the node name value using javascript or jquery in TinyMCE editor.
I could get only the nodeName. Here is my code below I tried,
var ed = tinyMCE.activeEditor;
var errorNode = ed.selection.getNode().nodeName;
alert(errorNode);
I have tried with jquery text() and value() but cannot fetch the node name value in HTML tags.
I just want to retrieve the value from HTML tags.
For example i have span tags <span color="error">That's great</span>
Could anyone please give me suggestion or help on this topic
Thanks in advance.
As Thomas Altmann suggested in the comment, you can get the DOM Node value by using textContent, or innerHTML and innerText. So you can do it like this:
var ed = tinyMCE.activeEditor;
var text = ed.selection.getNode().textContent; // or innerHTML and innerText
alert(text); // That's great
And if you want to get all the editor content without HTML tags, you can use getContent method:
window.tinyMCE.activeEditor.getContent({ format: 'text' })
Hope this help!

Can't use Medium Editor addElements(elements)

I would like to add some html to my page using Medium Editor addElements() function. I don't really know how to use it. For now it just adds an editable blank line...
My code:
var editor = new MediumEditor('.changeable');
elements = "<section id='"+new_id+"' class='changeable'><h1 class='title_section'>"+newTitle+"</h1><p>This is a new paragraph.</p></section>";
editor.addElements(".container_content",elements);
My selector is the element with a "container_content" class. I would like to add the html of the var "elements" in it.
Thanks.
Ok, I found the problem.
You have to create your element you want to add first. Then you call .addElements(yourElement)

How to copy HTML tags to clipboard without changes?

I am using this SO answer to copy page content using pure JavaScript on user click. However my content contains HTML tags:
<script>http://localhost:3000/widget/174b6b69bcf352803a00</script>
When pasted from the clipboard it turns into this:
<script>http://localhost:3000/widget/174b6b69bcf352803a00</script>
How can I revert it back?
Use innerText instead of innerHTML to get the plain text version without HTML tags in it.
Here is a way to parse HTML entities :
function parseHTMLEntities(htmlString) {
var e = document.createElement("div");
e.innerHTML = htmlString;
return e.innerText;
}
// use like this :
var text = parseHTMLEntities("<script>http://localhost:3000/widget/174b6b69bcf352803a00</script>");
alert(text);
I mistook URI ecoding with HTML entities...
That was a stupid mistake...
see this question:
How to convert characters to HTML entities using plain JavaScript

Need Solution on NicEdit Insert HTML text into Instance

i am using this function to insert text into NicEdit,
function insertAtCursor(editor, value){
var editor = nicEditors.findEditor(editor);
var range = editor.getRng();
var editorField = editor.selElm();
editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) +
value +
editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);}
This code works fine for simple text but when i pass HTML content into it, it does not render the HTML output in div instead it dumps the HTML code as it is into the Instance Div.
Example:
<div class="one">Some text here</div>
This must show in the Instance as "Some text here"
and remaining code hidden in source code.
Can any one give me a solution to fix this problem?
After working whole night and trying different solutions I had finally got it working! :)
In case any one wants to know solution for this, I had to add a Replace function
replace()
for the content and made it support HTML.
See my answer HERE. It's a plugin I created to insert html at the cursor position.

Converting html page represented as text to dom object

I have a text that represents some page. I need to convert this text to dom object, extract body element and append it to my dom.
I have used following code to convert text and extract body element:
$('body', $(text)).length
and:
$(text).filter('body').length
In both cases it returns 0...
To test: http://jsfiddle.net/wEyvr/1/
jQuery is parsing whole HTML in a non-standard way, so $(html) doesn't work as expected.
You can extract the content of the body tag using regexp and work from there:
// get the content of the body tags
var body = $(text.match(/<body[\s\S]*?>([\s\S]*?)<\/body>/i)[1]);
// append the content to our DOM
body.appendTo('body');
// bonus - to be able to fully use find -> we need to add single parent
var findBody = $("<body />").html(body.clone());
// now we are able to use selectors and have fun
findBody.find("div.cls").appendTo('body');
HERE is the working code.
EDIT: Changed the code to show both direct append and also using selectors.
Something like this:
var ifr = $("<iframe>"),
doc = ifr.appendTo("body")[0].contentWindow.document,
bodyLength;
doc.open();
doc.write(text);
doc.close();
bodyLength = ifr.contents().find("body").length;
ifr.remove();
alert(bodyLength);
http://jsfiddle.net/wEyvr/2/

Categories