We Keep Coding

How do you insert HTML into a QuillJS?

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

Select onChange preview svg

I have little html experience and no java experience and am trying to display an SVG image once the option is selected. Currently the code is at this, which displays a gif image:
<SELECT NAME=SIGN_NFPA onchange=\"
this.form.SIGN_PIC1.selectedIndex = 0;
var id = this.options[this.selectedIndex].value
var lnk = (id) ? 'SignNFPA/'+id+'.gif' : 'images/blank.gif';
window.document.SIGN_PIC1.src = lnk;
return true;
\">
Now we are generating files and want to replace that with this line of code
<SELECT NAME=SIGN_NFPA onchange='$("img[name=SIGN_PIC1]").prop('src',"SignNFPA?nfpa="+this.value);'>
but I keep getting a syntax error, what am I doing wrong? I know it should be a function in onchange but my coworker says you can input code directly instead. Thanks.

Your immediate problem is nested single-quotes around "src". This is causing it to see onchange='$("img[name=SIGN_PIC1]").prop(' as a complete attribute, followed by garbage.
Change those to be a compatible set of quotes:
<SELECT NAME=SIGN_NFPA onchange='$("img[name=SIGN_PIC1]").prop("src","SignNFPA?nfpa="+this.value);'>
but this would read as more "standard" like this:
<SELECT NAME="SIGN_NFPA" onchange="$('img[name=SIGN_PIC1]').prop('src','SignNFPA?nfpa='+this.value);">
But as your are using jQuery, I would strongly suggest moving to using a jQuery event handler, and appropriate data- attributes and not use a inline handler.
e.g. something like the following (not checked for errors - just a guide)
HTML:
<SELECT NAME="SIGN_NFPA" \>
jQuery
$(function(){
$('[name="SIGN_NFPA"]').change(function(e){
var $signpic1 = $('[name="SIGN_PIC1"]')
$signpic1.val(0);
var id = $(this).val();
var lnk = (id) ? 'SignNFPA/'+id+'.gif' : 'images/blank.gif';
$signpic1.attr("src", lnk);
});
});

Use quotes when adding attributes in HTML. Specially in value
<select name="SIGN_NFPA">
<!--options-->
</select>
Using event Handler in jquery
$(document).ready(function() {
$("select[name='SIGN_NFPA']").change(function() {
$('img[name=SIGN_PIC1]').prop('src', 'SignNFPA?nfpa=' + this.value);
})
});

Turned out it was because I was in quote hell, probably should've mentioned that but I'm relatively new to programming. I'm in a perl file using html thats using jquery and the $ sign was being interpreted as a scalar, causing a syntax error. Also simultaneously in quote hell

Title attribute in Firefox

The title attribute on a particular HTML element is not displayed in my application if viewed in Firefox. There are multiple topics explaining this problem. I was unable to find a sollution that would fit my needs. So I ask if you can please help.
I have a number of divs lined up. On mouseover each of the div's should display a different value(title). The title attribute works fine in Chrome but I need something simillar for Firefox.
The title attribute is set dynamically from Javascript!
My Javascript:
dojo.connect(div, 'mousemove',rasterTimeDisplay);
function rasterTimeDisplay() {
dojo.attr(evt.target, 'title', "some new title");
}

Why not to store the data to be displayed in another attribute ? Because you use javascript to feed your data-storage attribute, you can whatever you want.
For example, with jQuery :
//I feed my data-storage attribute
$("#my_div").attr('my-data', '<h1>my content to be displayed</h1>');
//And then i bind the hover event to toggle displaying of this data
$("#my_div").hover(
function(){
$(this).html($(this).attr('my-data'));
},
function(){
$(this).html('');
}
);
Or with standard JavaScript :
document.getElementById('my_div').my_data = '<h1>my content to be displayed</h1>';
document.getElementById('my_div').onmouseover = function(){
this.innerHTML = this.my_data;
};
document.getElementById('my_div').onmouseoout = function(){
this.innerHTML = '';
};

Sorry if i missunderstood you. However, you are trying to trigger the title attribute on hover? But the title attribute is already triggered by hover on default:
So if you just add the attribute to your desired element, you will get the extra information on hover.
var titles = document.getElementsByClassName('title');
for(var i = 0; i < titles.length; i++)
{
titles[i].title = 'Hover information ' + i;
}
jsFiddle
I you're interesting in the jQuery way to do this:
$('.title').attr('title', 'Hover information');
Still doesn't work?
Step-1: First try to run your firefox client in safe-mode. Your problem might be solved now. If this is the case proceed to step-2. Else... Well i would suggest you to update your grapical driver or install a newer version.
Step-2: Disable your Hardware Acceleration(AH).
Check another answer about this here: https://support.mozilla.org/nl/questions/860902
Now if you just want a work around, to even let the oldest Firefox browsers support this. You can find one here: Tooltips (title="...") won't show in Firefox
I hope this solved your problem.

last appended option in select tag always becomes the value of it

I am building an select element in js with the help of jquery. I first build the select tag and then append the options tag to it. While doing so I set the selected attribute to one of the options tag while building it. Even then irrespective of which option tag has the selected attribute the last appended option seems to taken as the value for the select field. This is the case only in Firefox , chrome and IE works fine.
Is it something I am missing to understand or a known problem?
Html
<select id="test">
</select>
JS
var $ =jQuery.noConflict();
$("#test").append("<option value='one' selected='selected'>one</option>");
$("#test").append("<option value='two' >two</option>");
$("#test").prepend("<option value='zero' >zero</option>");
var a = $("#test").children().get();
$("#test").children().remove();
$("#test").append(a);
fiddle link http://jsfiddle.net/AfT3Z/

What is this code supposed to do?
var a = $("#test").children().get();
$("#test").children().remove();
$("#test").append(a);
Removing it it works as expected http://jsfiddle.net/AfT3Z/1/
EDIT:
If you need the code I removed you can modify it this way:
var a = $("#test").html();
$("#test").children().remove();
$("#test").html(a);
Fiddle here: http://jsfiddle.net/AfT3Z/2/
This way you don't loose on the way the selected attribute.
EDIT #2:
You can even clone the children to obtain an exact copy of them:
var $ =jQuery.noConflict();
$("#test").append("<option value='one' selected='selected'>one</option>");
$("#test").append("<option value='two' >two</option>");
$("#test").prepend("<option value='zero' >zero</option>");
var a = $("#test").children().clone();
$("#test").children().remove();
$("#test").append(a);

modifying select with DOM

I've found some results for this on google but nothing satisfying so I was hoping someone here might know.
It seems as though populating a select element using innerHTML does not work in IE
I have set up a file that does nothing but that and it works with everything but IE, here's the code in case anyone cares:
<html>
<head></head>
<body onload="populate();">
<script type="text/javascript">
function populate()
{
document.getElementById("test").innerHTML = '<option id="a">works</option>';
}
</script>
<select id="test"></select>
</body>
</html>
Anyone know a solution to this? I don't want to remove everything and then manually use appendChild as I am returned html from a different function, and it seems ridiculous that this doesn't work.
Any ideas would be appreciated.

EDIT: This answer was written before the OP said he didn't want to use appendChild(). I will keep this answer up for reference.
This post will use POJSF. (Plain Old JavaScript Framework, the framework every other framework is based on!)
For those who don't get it, that's a poor attempt a humor...
Instead of using innerHTML, you can create your <option> using document.createElement()
var newOption = document.createElement('option');
newOption.label = 'works';
newOption.appendChild(document.createTextNode(newOption.label));
newOption.id = 'a';
document.getElementById('mySelect').appendChild(newOption);
If you want to remove all <option> in a <select>:
var selectEl = document.getElementById('mySelect');
for(var i = selectEl.children.length - 1; i >= 0; i--) {
selectEl.removeChild(selectEl.children[i]);
}

Check out: BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object