Search code examples
dojorich-text-editorquil

Quill editor integration with dojo


I am trying to use Quill editor with dojo framework, but its not working. The editor is not shown over there. Any help in this regard will be highly appreciated.

<html>
<head>
    <link rel="stylesheet" href="http://cdn.quilljs.com/0.16.0/quill.snow.css" />
    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/dojo/1.7.0/dojo/dojo.js"
        data-dojo-config="async: true, packages: [
            { name: 'quill', location: 'http://cdn.quilljs.com/0.16.0/', main: 'quill' }
         ]" />
</head>
<body>
    <div id="editor">
        Editor in chief!
    </div>
    <script type="text/javascript">
        define.amd.quill = true;
        require(["quill"], function(quill){
            var editor = new Quill("#editor");
        });
    </script>
</body>


Solution

  • I'm not familiar with Dojo 1.7, so opted for 1.10.4.

    I also had XSS errors (something about an iframe) with Quill version 0.16, so went with the latest 1.2.6 version.

    The below seems to work fine.

    require(["dojo/ready", "Quill"], function(ready, Quill){
      ready(function(){
        var editor = new Quill("#editor", { theme: 'snow' })
      })
    })
    <script>
      var dojoConfig = {
        async: true,
        packages: [{ name: 'Quill', location: '//cdn.quilljs.com/1.2.6', main: 'quill' }]
      }
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <link href="//cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet" />
    <div id="editor">Editor in chief!</div>