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

How to change a background that is declared in .css not html

USING JAVASCRIPT, NO JQUERY
Hi all,
I know this is a basic one but I am hitting a dead end.
I want to change a background image that is in the .css, not the html so I cant give it an id. I managed to remove the image using:
var headerImg = document.getElementById('header').background = 'none';
And tried :
var headerImg = document.getElementById('header').background = 'images/new-header.jpg;
But that did'nt work.
I have no idea how to change the Image, and in the dev tools the url does not even change when I try to run my code Any help would be great, Thanks.

You're close. You're just off on the syntax slightly...
document.getElementById("header").style.backgroundImage = "url(images/new-header.jpg)";
It's a style attribute you're changing, so you need .style and then you use the CSS attribute name, but remove hyphens and camelCase the attribute name, so .backgroundImage.

Can you try this
var element = document.getElementById('content');
element.style.backgroundImage = "url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzOpUTzDIq2yutn75PQTLcHhJ06MTZPsV_V-0M918xKUhAqMxE')";
<div>
<p>this is unchanged</p>
<p id="content">backgroud wiil be cange</p>
<div>

.split() breaks code

In the code below, the line that is commented out: var displayPieces = displayWhole.split(" "); Breaks what happens in .subMenuContent area. If I comment out just that line, it works just fine. Any ideas?
$(".subMenuHeader").each(function() {
var displayWhole = $(this).attr('display');
//var displayPieces = displayWhole.split(" ");
});
$(".subMenuContent").each(function() {
$(this).prepend('<div class="subMenuShineLeft"></div>' +
'<div class="subMenuShineRight"></div>');
});

Your problem is due to displayWhole being undefined.
If you want to fetch an element's display from its style to check whether it's block or none, don't use attr, use css. Like this:
var displayWhole = $(this).css('display');
The .attr() function will fetch you the attributes for an HTML element, alright. But display is not a HTML attribute. It is always part of the style attribute. Had you used:
var displayWhole = $(this).attr('style');
Then you'd have the whole style as a string, for you to work on.
The .css() jQuery function, on the other hand, exists so that you can get the parts of the style attribute more easily ;)

Replace All innerhtml text with Javascript

I've been trying for hours and I've looked a lot of samples on StackOverflow, but I can't fix my simple script.
I grabbed DOM with jQuery
var color = $('#bscontainer').html();
and now the content of color is:
<img src="resources/P/Blue_BG_2Col.png" id="bg">
<img src="resources/P/Blue_Content_2Col.png" id="content">
<img src="resources/P/Blue_Title_ExchangeRate.png" id="title">
<img src="resources/P/Blue_SubTitle_2Col.png" id="subtitle">
<img src="resources/P/Blue_Disclaimer_Disclaimer.png" id="disclaimer">
My idea is to change all the Blue to Green, and I already try this:
curColor="Blue";
newColor="Green";
t=color.replace(curColor,newColor);
It simply doesn't works. Any ideas?

To answer your question directly, replace in javascript when it takes a string parameter as the needle, only replaces the first instance. To replace all instances within a string, use a global regular expression:
str.replace(/Blue/g, 'Green');
You really ought to just modify the src attributes of the img tags though. That is the more proper way to attack this. Changing the html like you are trying to will lose any events or data bound to the DOM elements.

So basically you want to find each image in your color element and replace Blue with Green in the src attribute -- This is one way you can do it:
var color = $('#bscontainer');
color.find('img').each(function(){
curColor="Blue";
newColor="Green";
this.src = this.src.replace(curColor,newColor);
});
No need for the .html() part of your code...

Use a callback function to actually update the HTML, and use a regular expression (object) to replace all instances at once:
$('#bscontainer').html(function (i, str) {
curColor = new RegExp("Blue","g"); // global replace
newColor = "Green";
return str.replace(curColor, newColor);
});

Changing src value through jQuery

I have a jQuery variable merImg like this
var merImg = '<img src="http://om.com/pion/thumbnail/11x65/aa/img.jpg" border="0" align="left" height="11" width="65">';
I want to replace thumbnail/11x65 in the src with image/40x using jQuery. Is there a regex to do this easier? Or any logic at all to change it?
Also I want to remove the height and width attribute to the img tag. How do i go about it?

You could use the standard replace() method of javascript:
merImg = merImg.replace('thumbnail/11x65', 'image/40x');
as the first argument you can also pass a regExp like this
merImg = merImg.replace(/your regexp/, 'image/40x');
To remove height and width in this case you could replace them with an empty string:
merImg = merImg.replace('width="65"', '');
merImg = merImg.replace('height="11"', '');
I'm no experto of regular experssions but you can write a general regular expression to strip away width and height attributes from a string.
Also a llot of people suggest (correctly) that you should use an HTML parser to parse HTMl. Try to google it if you need more info about it
But in this particulare what i've written should work