Does quill only use block tags

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

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

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);

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

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.

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>

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>

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

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

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>"

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);
    });

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.

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());

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;<');
  };

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 -
 
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;
}