Quill Editor script to read from database

James_Hibbard · April 11, 2019, 6:40am

If you click one of the table buttons, then look in your browser’s console , you see the error message:

ReferenceError: table is not defined

This is because you have commented it out in your code:

modules: {
  //table: true,

Uncomment that. Then, to add the table module we need to update to Quill version 2.x

<script src="https://cdn.quilljs.com/2.0.0-dev.2/quill.js"></script>

Now you need to define the variable:

const table = quill.getModule('table');

and you’ll be able to insert tables into the editor.

Please note that you’ll need to add some CSS so that you can see the table elements. They’re in the DOM, but need some styling.

javascript7 · April 11, 2019, 7:00am

Yes, forgot to mention that - that was commented out before because when I use that, the editor doesn’t display the rs(“myHtml”)

If I use:

… do I replace it with and take this out?

<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

Is there a particular place where that is defined?

Thank you!

James_Hibbard · April 11, 2019, 7:26am

Yup. The newer version replaces the older version.

Like so:

var quill = new Quill(editor, {
  modules: {
    table: true,
    syntax: true,
    toolbar: '#toolbar-container'
  },
  placeholder: 'Compose an epic...',
    theme: 'snow'
});

var table = quill.getModule('table');

javascript7 · April 11, 2019, 7:49am

I am doing this:

 var quill = new Quill(editor, {
            modules: {
                table: true,
                syntax: true,
                toolbar: '#toolbar-container'
            },
            placeholder: 'Compose an epic...',
            theme: 'snow'
        });

        var table = quill.getModule('table');

        document.querySelector('#insert-table').addEventListener('click', function () {
            table.insertTable(2, 2);
        });
        document.querySelector('#insert-row-above').addEventListener('click', function () {
            table.insertRowAbove();
        });
        document.querySelector('#insert-row-below').addEventListener('click', function () {
            table.insertRowBelow();
        });
        document.querySelector('#insert-column-left').addEventListener('click', function () {
            table.insertColumnLeft();
        });
        document.querySelector('#insert-column-right').addEventListener('click', function () {
            table.insertColumnRight();
        });
        document.querySelector('#delete-row').addEventListener('click', function () {
            table.deleteRow();
        });
        document.querySelector('#delete-column').addEventListener('click', function () {
            table.deleteColumn();
        });
        document.querySelector('#delete-table').addEventListener('click', function () {
            table.deleteTable();
        });

        editor.firstChild.innerHTML = editorContent;

        etc...

The rs(“myHtml”) is working. Put tables don’t work.

Using this for css and that table buttons move many breaks down the page.

<style>
body {
  padding: 25px;
}
#bubble-container, #snow-container {
  height: 300px;
  margin-bottom: 10px;
}
.container {
  display: flex;
}
.panel {
  flex: 1;
  margin-left: 25px;
  margin-right: 25px;
}
</style>

James_Hibbard · April 11, 2019, 7:51am

Can you post enough code that I can run on my PC and reproduce your problem, please.

javascript7 · April 11, 2019, 8:10am

Would like to that the css is 1.3.6 if that makes any difference.

<html lang="en">
  <head>
    <title>Full Editor - Quill Rich Text Editor</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" />
    <link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css" />

    <style>
      body > #standalone-container {
        margin: 50px auto;
        max-width: 720px;
      }
      #editor-container {
        height: 350px;
      }
    </style>

    <style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 0px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
	font-family: consolas,monospace;
    position: absolute;
    bottom: 25px;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

<style>
    img{
    max-height:250px;
    max-width:250px;
    height:auto;
    width:auto;
}</style>

<style>
button[name="snow-container"] {
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid transparent;
    width: 200px;
    height: 25px;
    font-size: 18px;
    background-color: #4c659b;
    border-radius: 10px;
    color: white;

}
</style>

<style>
body {
  padding: 25px;
}
#bubble-container, #snow-container {
  height: 300px;
  margin-bottom: 10px;
}
.container {
  display: flex;
}
.panel {
  flex: 1;
  margin-left: 25px;
  margin-right: 25px;
}
</style>

  </head>
  <body>
           <div id="standalone-container">
       <div id="Div1">
        <div id="Div2">
        <div id="toolbar-container">

        <span class="ql-formats">
            <select class="ql-size"></select>
        <span class="ql-formats">

        <div class="tooltip">
          <span class="tooltiptext">Bold</span>
        <button class="ql-bold"></button>
        </div>

        <div class="tooltip">
            <span class="tooltiptext">Italic</span>
        <button class="ql-italic"></button>
        </div>

        <div class="tooltip">
            <span class="tooltiptext">Underline</span>
        <button class="ql-underline"></button>
        </div>
        </span>

        <span class="ql-formats">

        <div class="tooltip">
        <span class="tooltiptext">Text color</span>
            <select class="ql-color"></select>
        </div>

        <div class="tooltip">
            <span class="tooltiptext">Text color background</span>
        <select class="ql-background"></select>
        </div>

        </span>
      
        <span class="ql-formats">

        <div class="tooltip">
            <span class="tooltiptext">Intent Order by Number</span>
        <button class="ql-list" value="ordered"></button>
        </div>

        <div class="tooltip">
            <span class="tooltiptext">Intent Order by Bullets</span>
        <button class="ql-list" value="bullet"></button>
        </div>

        </span>

        <span class="ql-formats">

        <div class="tooltip">
          <span class="tooltiptext">Alignment Left, Center, Right</span>
        <select class="ql-align">
        <option value=""></option>
        <option value="center"></option>
        <option value="right"></option>
        </select>
        </div>

        </span>

        <span class="ql-formats">

        <div class="tooltip">
            <span class="tooltiptext">Hyperlink</span>
        <button class="ql-link"></button>
        </div>

        <div class="tooltip">
            <span class="tooltiptext">Image Upload</span>
        <button class="ql-image"></button>
        </div>


        <div class="tooltip">
            <span class="tooltiptext">Youtube Link</span>
        <button class="ql-video"></button>
        </div>
        </span>

      </div>
      <div id="editor-container"></div>
      <br />

      <div class="container">
  <div class="panel">
    <div id="snow-container"></div>
    <div>
      <button id="insert-table">Insert Table</button>
      <button id="insert-row-above">Insert Row Above</button>
      <button id="insert-row-below">Insert Row Below</button>
      <button id="insert-column-left">Insert Column Left</button>
      <button id="insert-column-right">Insert Column Right</button>
      <button id="delete-row">Delete Row</button>
      <button id="delete-column">Delete Column</button>
      <button id="delete-table">Delete Table</button>
    </div>
  </div>
 
  <div class="panel">
    <div id="output-container"></div>
  </div>
</div>

    <center>
    <form method="POST" action="post.asp" name="mainform">
      <input type="hidden" id="myHtml" name= "myHtml">
      <input type="hidden" value="47" name= "id">
      <input type="submit" value="Submit">
    </form>
    </center>
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
   
    <script src="https://cdn.quilljs.com/2.0.0-dev.2/quill.js"></script>

    <script>
        // Fetch content from database here
        var editorContent = '<%=rs("myHtml")%>';
        var editor = document.getElementById('editor-container');
        var hiddenInput = document.getElementById('myHtml');
        var form = document.forms.mainform;

        var quill = new Quill(editor, {
            modules: {
                table: true,
                syntax: true,
                toolbar: '#toolbar-container'
            },
            placeholder: 'Compose an epic...',
            theme: 'snow'
        });

        var table = quill.getModule('table');

        document.querySelector('#insert-table').addEventListener('click', function () {
            table.insertTable(2, 2);
        });
        document.querySelector('#insert-row-above').addEventListener('click', function () {
            table.insertRowAbove();
        });
        document.querySelector('#insert-row-below').addEventListener('click', function () {
            table.insertRowBelow();
        });
        document.querySelector('#insert-column-left').addEventListener('click', function () {
            table.insertColumnLeft();
        });
        document.querySelector('#insert-column-right').addEventListener('click', function () {
            table.insertColumnRight();
        });
        document.querySelector('#delete-row').addEventListener('click', function () {
            table.deleteRow();
        });
        document.querySelector('#delete-column').addEventListener('click', function () {
            table.deleteColumn();
        });
        document.querySelector('#delete-table').addEventListener('click', function () {
            table.deleteTable();
        });

        editor.firstChild.innerHTML = editorContent;

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            hiddenInput.value = editor.firstChild.innerHTML;
            this.submit();
        });

        function selectLocalImage() {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.click(); // Listen upload local image and save to server

            input.onchange = function () {
                var file = input.files[0]; // file type is only image.

                if (/^image\//.test(file.type)) {
                    saveToServer(file);
                } else {
                    console.warn('You could only upload images.');
                }
            };
        }

        function saveToServer(file) {
            var fd = new FormData();
            fd.append('image', file);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://local.com', true);

            xhr.onload = function () {
                if (xhr.status === 200) {
                    var url = xhr.responseText;
                    insertToEditor(url);
                }
            };

            xhr.send(fd);
        }

        function insertToEditor(url) {
            // push image url to rich editor.
            var range = quill.getSelection();
            quill.insertEmbed(range.index, 'image', "https://yourwebsite.com".concat(url));
        }

        quill.getModule('toolbar').addHandler('image', function () {
            selectLocalImage();
        });


    </script>

 
  </body>
</html>

James_Hibbard · April 11, 2019, 8:54am

Lol, yeah, that’s right. Good catch. Swap this:

<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css" />

for this:

<link rel="stylesheet" href="https://cdn.quilljs.com/2.0.0-dev.2/quill.snow.css" />

And your example will work.

javascript7 · April 11, 2019, 9:13am

Yes, you are right!
And the nice thing is that on the output the table has no border!
When we began this thread tonight, the table icon buttons lined up nicely underneath the editor, not they look at this:

You can see how far under the table and partial photo that I am showing. Do you see in the css where I can bring them to align better to the bottom of the editor?

Thanks

James_Hibbard · April 11, 2019, 9:26am

You can use your browser’s dev tools for this.

The culprit is this line:

<div id="snow-container"></div>

Simply deleting it removes the space.

javascript7 · April 11, 2019, 9:34am

Yes it does!

And to space 4 across with 2 row? Or 6 across with the last 2 being Delete Column and Delete Table on the second row?

javascript7 · April 11, 2019, 9:47am

Ok - solve that issue with a table
[code

<div>
  <table><tr><td><button name=submit id="insert-table">Insert Table</button></td>
  <td><button name=submit id="insert-row-above">Insert Row Above</button></td>
  <td><button name=submit id="insert-row-below">Insert Row Below</button></td>
  <td><button name=submit id="insert-column-left">Insert Column Left</button></td>
  <tr><td><button name=submit id="insert-column-right">Insert Column Right</button></td>
  <td><button name=submit id="delete-row">Delete Row</button></td>
  <td><button name=submit id="delete-column">Delete Column</button></td>
  <td><button name=submit id="delete-table">Delete Table</button></td></table>
</div>

[/code]

Used this css for nice buttons:

<style>
button[name="submit"] {
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid transparent;
    width: 160px;
    height: 25px;
    font-size: 14px;
    font-weight: 600;
    background-color: #4c659b;
    border-radius: 30px;
    color: white;
    cursor:pointer;

}
</style>

James_Hibbard · April 11, 2019, 11:03am

Glad to hear you solved the issue, but you shouldn’t really use tables for layout purposes (only for tabular data).

In this case I would advise you to look at Flexbox, which is also supported by IE 11. You can essentially declare a series of columns (for the buttons) and arrange them however you see fit. This should get you going:

If you get stuck with that then it’s probably a good idea to ask a new question in the CSS forum.

javascript7 · April 11, 2019, 5:00pm

Thank you for the link - I will try to follow and use. Very appreciated.

javascript7 · May 9, 2019, 7:33am

Regarding the code in #59 which works in all browsers except for IE11, do you see any simple fix that would make it work? Perhaps it’s as simple as a line of code. This is all you get in IE11:

sp1

Thanks, appreciated very much.

James_Hibbard · May 9, 2019, 7:45am

Howdy! I’m afraid I forgot where we were at with this. Can you pls post the current state of your code.

javascript7 · May 9, 2019, 8:06am

Howdy back at you!

Like I mentioned, if easy tweak than fine - otherwise, not losing any sleep over it!

<html lang="en">
  <head>
    <title>Full Editor - Quill Rich Text Editor</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" />
  <link rel="stylesheet" href="https://cdn.quilljs.com/2.0.0-dev.2/quill.snow.css" />

    <style>
      body > #standalone-container {
        margin: 50px auto;
        max-width: 720px;
      }
      #editor-container {
        height: 350px;
      }
    </style>

    <style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 0px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
	font-family: consolas,monospace;
    position: absolute;
    bottom: 25px;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

<style>
button[name="snow-container"] {
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid transparent;
    width: 200px;
    height: 25px;
    font-size: 18px;
    background-color: #4c659b;
    border-radius: 10px;
    color: white;

}
</style>

<style>
body {
  padding: 25px;
}
#bubble-container, #snow-container {
  height: 300px;
  margin-bottom: 10px;
}
.container {
  display: flex;
}
.panel {
  flex: 1;
  margin-left: 25px;
  margin-right: 25px;
}
</style>

  </head>
  <body>
           <div id="standalone-container">
       <div id="Div1">
        <div id="Div2">
        <div id="toolbar-container">

        <span class="ql-formats">
            <select class="ql-size"></select>
        <span class="ql-formats">

        <div class="tooltip">
          <span class="tooltiptext">Bold</span>
        <button class="ql-bold"></button>
        </div>

        <div class="tooltip">
            <span class="tooltiptext">Italic</span>
        <button class="ql-italic"></button>
        </div>

        <div class="tooltip">
            <span class="tooltiptext">Underline</span>
        <button class="ql-underline"></button>
        </div>
        </span>

        <span class="ql-formats">

        <div class="tooltip">
        <span class="tooltiptext">Text color</span>
            <select class="ql-color"></select>
        </div>

        <div class="tooltip">
            <span class="tooltiptext">Text color background</span>
        <select class="ql-background"></select>
        </div>

        </span>
      
        <span class="ql-formats">

        <div class="tooltip">
            <span class="tooltiptext">Intent Order by Number</span>
        <button class="ql-list" value="ordered"></button>
        </div>

        <div class="tooltip">
            <span class="tooltiptext">Intent Order by Bullets</span>
        <button class="ql-list" value="bullet"></button>
        </div>

        </span>

        <span class="ql-formats">

        <div class="tooltip">
          <span class="tooltiptext">Alignment Left, Center, Right</span>
        <select class="ql-align">
        <option value=""></option>
        <option value="center"></option>
        <option value="right"></option>
        </select>
        </div>

        </span>

        <span class="ql-formats">

        <div class="tooltip">
            <span class="tooltiptext">Hyperlink</span>
        <button class="ql-link"></button>
        </div>

        <div class="tooltip">
            <span class="tooltiptext">Image Upload</span>
        <button class="ql-image"></button>
        </div>


        <div class="tooltip">
            <span class="tooltiptext">Youtube Link</span>
        <button class="ql-video"></button>
        </div>
        </span>

      </div>
      <div id="editor-container"></div>
      <br />

      <div class="container">
  <div class="panel">
    <div id="snow-container"></div>
    <div>
      <button id="insert-table">Insert Table</button>
      <button id="insert-row-above">Insert Row Above</button>
      <button id="insert-row-below">Insert Row Below</button>
      <button id="insert-column-left">Insert Column Left</button>
      <button id="insert-column-right">Insert Column Right</button>
      <button id="delete-row">Delete Row</button>
      <button id="delete-column">Delete Column</button>
      <button id="delete-table">Delete Table</button>
    </div>
  </div>
 
  <div class="panel">
    <div id="output-container"></div>
  </div>
</div>

    <center>
    <form method="POST" action="post.asp" name="mainform">
      <input type="hidden" id="myHtml" name= "myHtml">
      <input type="hidden" value="47" name= "id">
      <input type="submit" value="Submit">
    </form>
    </center>
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
   
    <script src="https://cdn.quilljs.com/2.0.0-dev.2/quill.js"></script>

    <script>
        // Fetch content from database here
        var editorContent = '<%=rs("myHtml")%>';
        var editor = document.getElementById('editor-container');
        var hiddenInput = document.getElementById('myHtml');
        var form = document.forms.mainform;

        var quill = new Quill(editor, {
            modules: {
                table: true,
                syntax: true,
                toolbar: '#toolbar-container'
            },
            placeholder: 'Compose an epic...',
            theme: 'snow'
        });

        var table = quill.getModule('table');

        document.querySelector('#insert-table').addEventListener('click', function () {
            table.insertTable(2, 2);
        });
        document.querySelector('#insert-row-above').addEventListener('click', function () {
            table.insertRowAbove();
        });
        document.querySelector('#insert-row-below').addEventListener('click', function () {
            table.insertRowBelow();
        });
        document.querySelector('#insert-column-left').addEventListener('click', function () {
            table.insertColumnLeft();
        });
        document.querySelector('#insert-column-right').addEventListener('click', function () {
            table.insertColumnRight();
        });
        document.querySelector('#delete-row').addEventListener('click', function () {
            table.deleteRow();
        });
        document.querySelector('#delete-column').addEventListener('click', function () {
            table.deleteColumn();
        });
        document.querySelector('#delete-table').addEventListener('click', function () {
            table.deleteTable();
        });

        editor.firstChild.innerHTML = editorContent;

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            hiddenInput.value = editor.firstChild.innerHTML;
            this.submit();
        });

        function selectLocalImage() {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.click(); // Listen upload local image and save to server

            input.onchange = function () {
                var file = input.files[0]; // file type is only image.

                if (/^image\//.test(file.type)) {
                    saveToServer(file);
                } else {
                    console.warn('You could only upload images.');
                }
            };
        }

        function saveToServer(file) {
            var fd = new FormData();
            fd.append('image', file);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://local.com', true);

            xhr.onload = function () {
                if (xhr.status === 200) {
                    var url = xhr.responseText;
                    insertToEditor(url);
                }
            };

            xhr.send(fd);
        }

        function insertToEditor(url) {
            // push image url to rich editor.
            var range = quill.getSelection();
            quill.insertEmbed(range.index, 'image', "https://yourwebsite.com".concat(url));
        }

        quill.getModule('toolbar').addHandler('image', function () {
            selectLocalImage();
        });


    </script>

 
  </body>
</html>

James_Hibbard · May 9, 2019, 9:11am

Hmm, there’s nothing there that jumps out as being a compatibility problem.

Are you seeing any errors in the console when using IE? You should be able to access the dev tools by pressing F12

javascript7 · May 9, 2019, 9:21am

Actually, no errors in console.

There was one problem in FF in that when you type in table cell the words run together without any spacing at all. Not a problem in Edge or Chrome. I figured that it would be internal to Quill’s code and unfixable - probably just a FF issue, as some browser react different to code. Problem doesn’t exist if you type outside the table.

Example: “This is a test” becomes, “Thisisatest” When you space bar after “this” and type the next word it slides to the last word making it a run on sentence. Again, only in cell property. Just a little odd!

James_Hibbard · May 9, 2019, 5:19pm

I don’t have a copy of IE to test on, I’m afraid, so I can’t help you much here. If this is something you’d like to get help with, the best thing is to make a new thread and describe your problem with some example code.

Yeah, that is weird. Can you DM me a link ,so I can see the problem in action.

javascript7 · May 9, 2019, 6:48pm

Thank you for your response because it prompted me to test it in my original code and I didn’t have that issue. So I came to the conclusion that when I moved the code to my project I must have some conflicting code. I did! In a security out of session code I didn’t have on top of page; hence the problem. Now fixed! Interesting though that it was only a FF issue.

Thank you again!