Rohit Bajaj

asked on 1/7/2016

Does quill only use block tags

HI,
I am creating an editor using quilljs.
Here is the website : Quill JS
And javascript code : Quill Source

what i observed by typing in the example quill editors and checking HTML in firebug is that
quill creates a div tag for each line. Also some times when u put a bullet or point in front, it creates ul and ol tags.
But i am unable to experimentally see if there are any other type of tags which quill directly creates as child notes .

I am new to javascript, so i need help in understanding the above quill.js link of its source code.
If you can help in understanding the source code and help me discover if quill will always use block tags (div, ul, ol....)... or there are any other possibilities.

Thanks

HTMLJavaScriptjQueryWeb Development

Last Comment

Member_2_248744

8/22/2022 - Mon

SOLUTION

Rainer Jeschor

1/7/2016

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Rohit Bajaj

1/7/2016

ASKER

Hi,
Thanks for that.
Can u just point some lines in js file which help me understand this ...Just some pointers will be enough to get an idea why quill will only use div n list elements

ASKER CERTIFIED SOLUTION

Member_2_248744

1/8/2016

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Rohit Bajaj

1/10/2016

ASKER

The reason to ask this question was...
If user enters say 50 lines in the editor... I want to capture only that HTML part so that its height is only 100 pixels...
This requires me to loop inside main ql-editor tag which contains tag for each line that quill generates.
If quill generates block tags only that makes my work a lot easier as i have to just add up each tag height...
But if quill uses inline tags then this approach of simply adding will not work.

I am not sure but thats what quill does as far as i read the code...
the following lines :

Normalizer.prototype.normalizeLine = function(lineNode) {
    lineNode = Normalizer.wrapInline(lineNode);

Open in new window

i think if the tag is inline it wraps it into a block element...

Member_2_248744

1/10/2016

I do not have time now to experiment with this Quill text, as HTML output editor, , But I can tell that your assumption about everything in a block <div> element per line is not correct, as far as I can tell. That's because the entire purpose of the HTML language is to have the line-breaks be automatically formed by the display render (browser) according to the present "WIDTH" of the display area, which is different for each device according to it's physical-mechanical size and operating system processes. So for longer text the browser needs to be free to change where the next line will be shown.

You also say -
"I want to capture only that HTML part so that its height is only 100 pixels..."

You seem to think that just counting block elements as a "LINE" may accomplish this?
It is my opinion that the output display of any HTML code content, and it's Height as a pixel count, will Change, depending on several things, like the Width of the available area that the HTML content occupies, , , the size of the "Font" name used for display (browsers can be set to use different default font), , , , the Size of the "Font-Size" set for display (browsers can be set to use different default Size for fonts), and possibly some other factors.

But my point is that even if you have tight control of what the HTML page element that will display the shorten text, you may have real problems in have an AI code to determine the area (height) a certain amount of varying HTML code, especially if you have "bold text", Images and HTML style in that code.

I saw this as an example to get the text width and height by javascript -
http://daipratt.co.uk/calculate-text-width-and-height-with-javascript/

but that may not be useful for the operation you have here? ? ?

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

Member_2_248744

1/11/2016

I was curious about the functioning of the Quill editor, so I tried it out, and did this TEST page in HTML code. I did not like the quill editors way that it handled Typing in a "less than" < , as it Does NOT convert it to a < which can cause real problems sometimes. It does allow you to Insert all most any html and text by javascript so it can be a flexible editor, if you're good in JS.

I could not conceive of any method to limit the extracted HTML to a length that would correspond to a display height of 100 pixels. . So I did an operation that I have used to limit the display of an element to a certain height. Please look at the STYLE attributes for the -
<div id="tst100" >
in the second cell of the <table> . . . . I have set some style as -
height: 100px;
overflow: hidden;

so no matter what is added to the <div> inner HTML, it can only show the TOP 100 Pixels.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quill JS HTML Editor</title> 
<script src="quill.js"></script>

<style>
body {background: #fed;}
</style>

<script>
getEid = function(el){return document.getElementById(el);}

var delOutput = false, chCount=0;

function doTest() {
var h = quill0.getHTML();
getEid("tst100").innerHTML = h;
}

</script>
</head>

<body><h3>A test of the Quill Editor</h3>
<table style="border: 1px dashed #0b0;"><tr><td>
<div id="toolbar" style="border:1px solid #000; width: 16.25em; padding: 3px;">
<select class="ql-size">
  <option value="10px">Small</option>
  <option value="13px" selected>Normal</option>
  <option value="18px">Large</option>
  <option value="32px">Huge</option>
</select>
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor" style="border: 3px solid #44b; border-top: 0; width: 20em;">
  <div><span style="font-size: 10px; color: red;">line DIV one,</span> the Hello <span style="font-size: 18px;">World</span> Quill Editor!</div>
  <div><span style="font-size: 10px; color: red;">line DIV two,</span> Some initial <b>bold</b> text in this second <span style="font-size: 18px;">to see how</span> the display auto creates the <b><span style="font-size: 18px;">line-breaks</span></b></div>
  <div><span style="font-size: 10px; color: red;">line DIV three,</span> the third enforced line break area with some text that will display as three lines</div>
  <div><br></div>
</div>
</td>
<td>
<button onclick="doTest()">View HTML in 100 height div</button>
<div id="tst100" style="border: 3px solid #44b; width: 16em; height: 100px; overflow: hidden; margin: 4px; padding: 4px; font-face: serif;">
NO TEST YET</div>
</td></tr></table>
<hr>
<span style="background: #dfd; font-size: 115%;">Development Info Output</span> - <button onclick="doHtml()">See All Editor's HTML</button>
<div id="dod1" style="width: 800px; border:2px dotted #c00; padding: 3px;">No Output Yet</div>
<script>
delOutput = getEid("dod1");
var quill0 = new Quill('#editor');
quill0.addModule('toolbar', { container: '#toolbar' });

quill0.on('text-change', function(delta, source) {
    delOutput.innerHTML = chCount+' Editor contents have done "text-change" | <br>'+source;
	chCount++;
  });

  //quill0.insertText(11, ' Bilbo');
  //console.log(quill0.getText());
  
function doHtml( ) {
var h = quill0.getHTML();
h = h.replace(/</g, "&lt;");
delOutput.innerHTML = 'Editor Button to see ALL HTML -<br>'+h;
}
</script>
</body></html>

Open in new window

When you click the "View HTML in 100 height div" button, you should see the HTML extracted from the quill editor, placed in to the <div id="tst100" > and not be more than 100 px high.

I do not really know what your programming goal may be about for the "100 pixel height" thing. . . This is just a page i did on an idea.

Rohit Bajaj

1/12/2016

ASKER

HI,
Thanks for the help... As you have seen quill i wanna ask you one more thing...
I typed the following in quill dksjf sdfhkjsfhdls
And it generates the following div :

<div>dksjf   										sdfhkjsfhdls</div>

Open in new window

Now in my code i want to display just the above div node on a different HTML page....
This would be just a display not the editor...
So what i did is (this is a part of my html):

    <link rel="stylesheet" href="//cdn.quilljs.com/0.20.1/quill.snow.css" />
    <div class="ql-container ql-snow ql-editor">${preview}</div>

Open in new window

where ${preview} = <div>dksjf sdfhkjsfhdls</div>

Although this seems to appear fine it gets the styling n all...wondering if there is anything wrong in it.
If i right click on a div element and copy its css Path in firebug i got :

html body div#middle div.editbox div.editor-container div.editor.ql-container.ql-snow div#ql-editor-1.ql-editor div

Open in new window

So from here i got the idea that i can add ql-container ql-snow and ql-editor to get it working.

Is this a correct approach ?
Please suggest

Rohit Bajaj

1/12/2016

ASKER

One bug or dont know if i am doing something wrong i noticed in quill :
eg. on my local application :
I typed this on quill :

And when i did quill.getHtml it gave me :

"<div><span style="font-size: 32px;">robin</span>&nbsp;<b><i><u><s><span style="background-color: rgb(255, 235, 204);">suri</span></s></u></i></b></div><ul><li>robin		                                            robin</li></ul>"

Open in new window

This looks like a bug in Quill.... if you see there are no spaces between robin and suri... there is only one  
This looks like a corrupted html that quill is giving me ..

I am initialing my quill like : in my js file

 var quill = editor.createQuill();
    quill.on('text-change', function () {
        var isEmpty = quill.getHTML().length === 0;
        $('#submit').prop('disabled', isEmpty);
    });

Open in new window

and my jsp has :
<div class="editor-container">
<div class="editor"></div>
</div>
apart from the other toolbar options..

Is it something i am doing wrong or quill generating wrong spaces

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Member_2_248744

1/12/2016

Sorry, but I read your last comment, and could not understand what your page view programming GOAL would be? ? ?
You first say that for a New Line in Quill after you type "dksjf" it generates the
"<div>dksjf sdfhkjsfhdls</div>"
which I understand,

But I do Not Understand what you mean by -
where ${preview} = <div>dksjf sdfhkjsfhdls</div>

the "${preview}" looks like Jquery javascript object, but the HTML you show is not in a <script> so it must be server side code or template substitution ?

And the way you parse out the server side string in preview variable, from all of the html text in the quill editor you do not say? And The removal of just a certain <div> , , from many <div> in the editor, would (to me) be the programming challenge for this effort.
- - - - - - -

In your html, you use the quill.snow.css theme CSS to get the style (font-face, font-size, padding, etc.) for a default editor appearance in your DIV as -
<div class="ql-container ql-snow ql-editor">${preview}</div>
I see no reason to duplicate the style of the editor on another page, the editor has too much padding in it for most display uses, but if that's what you need for your style, then you can use the quill.snow.css file.

It's difficult for me to have a view about -
"Is this a correct approach ?"

since I have no idea what your display goal is for your code efforts, . . . .
You used to need something about a "LIMIT" to 100 pixel height, which I do not see in your code now.

You as about the CSS style and "if there is anything wrong in it."
It will work using the quill.snow.css file with the class names you have as you already know when you said - "seems to appear fine it gets the styling".

So I guess you are good to go.

Member_2_248744

1/12/2016

So Sorry, I was typing my reply, when you re commented in ID: 41409008 about the space problem.

Member_2_248744

1/12/2016

The display in the quill.png image is not correct for the LINE of Robin suri , , and is not correct for the list o <ul><li>robin</li> , , in my opinion, , BUT these display change can be done by adding certain CSS style components to the editor display.

BUT, I can tell you that in the quill editor I set up, it did NOT alter the display of the standard HTML spaces or other. Even when I set the font size to larger and had BOLD ITALIC section of text. But I did NOT USE the snow.css for style.
So you might try and remove any added style to the editor div , and see if that helps.

But I can not try and fix the quill.js and it's display, that's beyond any effort I can make.

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst

William Peck

Rohit Bajaj

1/14/2016

ASKER

Hi,
Just to give you an exact case what i was mentioning earlier....
On http://quilljs.com/examples/ page in the fullEditor (there are two one basic and one full)
just remove all the content and type two words in it with lots of space or tabs in between them
eg. rohit bajaj
Make the first word bold and strike the second word
Now try running fullEditor.getHTML() in console you will get :
"<div><span class="author-galadriel"><b>rohit</b> <s>bajaj</s></span></div>"
notice how quill replaced the extra spaces with a   tag

for this example try doing

fullEditor.setHTML(fullEditor.getHTML());

Open in new window

and notice how the space disappears

In source code i found the line (http://cdn.quilljs.com/0.20.1/quill.js) :

Document.prototype.getHTML = function() {
    return this.root.innerHTML.replace(/\>\s+\</g, '>&nbsp;<');
  };

Open in new window

looks like quill intentionally removes all white spaces as in the above code...
I am unable to think of any reason why quill is doing it..

Member_2_248744

1/14/2016

OK, , This is a HTML base characteristics property, , as In ALL browsers, any spaces and "white space", are always collapsed into just ONE space character for browser display. Most of the "what-you-see-is-what-you-get" text area EDITORS like QUILL, will use some sort of substitution, if the user types in multiple spaces, , , , , , at one time a popular substitute was to use the non-breaking-space -
 
to fill in user multi space character typing, , but it seemed to be a "Bad HTML Practice" to use multiple nbsp, like -
       
so some editors tried to use a span -
<span> </span> <span> </span> <span> </span> <span> </span>
which I do not think worked so well? ?
And some, I think, tried to use the proper modern CSS way by adding a margin-left to extend the spacing for user muti space typing?
I think I saw that there is even a newer method using the new "flex-box" to display the multi space separations, , but I know little about that and may be wrong about that.

Anyway, in some editors, I believe you can go into the settings or options, and change how that instance of the editor deals with muti-space input from user. . .

You say - "looks like quill intentionally removes all white spaces as in the above code..."
So I did a TEST in my quill page, I changed the function to -

function doHtml( ) {
var h = quill0.getHTML();

var ln = h.length; // added this to get the length of string

h = h.replace(/</g, "&lt;");
delOutput.innerHTML = ln+' Editor Button to see ALL HTML -<br>'+h;
}

Open in new window

And in fact, the -
var h = quill0.getHTML();
DID NOT remove multiple spaces, I I removes ALL quill text and just typed in -
ok ok
with 31 spaces, I get output as -
61 Editor Button to see ALL HTML -
<div>ok ok</div><div><br></div>

IF i type in-
ok ok
with one space, I get output as -
31 Editor Button to see ALL HTML -
<div>ok ok</div><div><br></div>

so the spaces are NOT removed. . . . the reason that you see the expanded spaces in the editor <div> is because the CSS display has been changed to -
display: textarea;

and textarea shows the spaces (all spaces), and tabs, and line breaks.

I do NOT get the   substitution, that you say you reported in your console output, but sometimes there are console substitutions?

I tried to find in the quill API for options, formats or modals, ANYTHING about space character alterations, and did not see anything about space subtitutions!

I am about to be worn out, , , about trying to explain these things to you, sorry, but as I said I will not try to modify anything about the quill js for you.

But I still do not know what your goal in this question is for using this Quill editor? Are you just wanting a Text area to HTML Editor, and learn how to use it?