Does quill only use block tags

Rohit Bajaj
Rohit Bajaj used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2013
Awarded 2012
Commented:
Hi,

as far as I can see from the source code, Quill will always create DIVs for each line besides ordered or unordered lists.

But sorry, it would be impossible to explain a 10k LoC JS file if you have not built it.

HTH
Rainer

Author

Commented:
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
OK, , not really sure about what you hope to learn, or find out about using the  Quill JS  , or the operations that it does to produce "what you see is what you get" as HTML code.

there is a lot of script lines in the Quill JS, , you might should first look at the sort of "default" lists as object key-value pairs in
     dom = _.extend(dom, {
on line  8310  , , as to your question about
     "see if there are any other type of tags which quill directly creates as child notes ."

please notice the  key-value pairs for the dom attributes object for the "TAG" defaults -
    DEFAULT_BLOCK_TAG: 'DIV',
    DEFAULT_BREAK_TAG: 'BR',
    DEFAULT_INLINE_TAG: 'SPAN',

which are used in the "Format" section to do the document.createElement( ) as on line 6479
      line = _this.doc.appendLine(document.createElement(dom.DEFAULT_BLOCK_TAG));

on line 6684 -
     inline = document.createElement(dom.DEFAULT_INLINE_TAG);

You might look at the setup for the "Format" object at line 6557
     Format = (function() {

see the Format.FORMATS at line 6563
  Format.FORMATS = {
    bold: {
      tag: 'B',
      prepare: 'bold'
    },

where it defines the TAG type for the text format buttons at the Quill top, like the Bold button.

it defines a LINK as use the A tag to create an element for the HTML-
      link: {
           tag: 'A',

here are some more tag definitons
image: {
      type: Format.types.EMBED,
      tag: 'IMG',
      attribute: 'src'
    },
    align: {
      type: Format.types.LINE,
      style: 'textAlign',
      "default": 'left'
    },
    bullet: {
      type: Format.types.LINE,
      exclude: 'list',
      parentTag: 'UL',
      tag: 'LI'
    },
    list: {
      type: Format.types.LINE,
      exclude: 'bullet',
      parentTag: 'OL',
      tag: 'LI'
    }

Open in new window


but this Quill does a ton of analysis to determine Where to insert tags, what tag to insert, what "Attributes" to add to the tag (src, style), what text to place inside of the tag, and if a DOM parent needs to be considered, and other things, to get the HTML result close to being correct.

As I said, I do not see your purpose for this code view and understanding you request? If your experience in javascript is not enough to go through all of this code, then why ask this question? Just my curiosity.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
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...
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? ? ?
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   &lt;     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.

Author

Commented:
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

Author

Commented:
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 :
quill.pngAnd 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 &nbsp;  
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
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.
So Sorry, I was typing my reply, when you re commented in    ID: 41409008   about the space problem.
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.

Author

Commented:
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>&nbsp;<s>bajaj</s></span></div>"
notice how quill replaced the extra spaces with a &nbsp; 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..
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 -
    &nbsp;
to fill in user multi space character typing, , but it seemed to be a "Bad HTML Practice" to use multiple nbsp, like -
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
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  &nbsp;   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?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial