CODEWITHSUNDEEP
htmlexpressejsquill
Mike-Mp
Mike-Mp

Reputation: 23

How to use Quill with express/node

I can't get the Quill editor to appear.

I have two ejs files, a layout and an add_new(which includes the layout).

layout.ejs





    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title><%= title %> </title>
      <link rel="stylesheet" href="/css/normalize.css">
      <link rel="stylesheet" href="/css/skeleton.css">
      <link rel="stylesheet" href="/css/styles.css">
      <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    </head>
    <body>
      
      <header class="interface-header">
        <h3 class="interface-title">
          <a href="/admin" id="interface-title">
            Διαχείρηση
          </a>
        </h3>
        <nav class="interface-nav">
          <ul class="interface-navbar-list">
            <li class="navbar-item">
              <a href="/admin/post/addNew" target="_blank" class="navbar-link button button-primary">
                Δημιουργία
              </a>
            </li>
            <li class="navbar-item">
              <a href="/" target="_blank" class="navbar-link button">
                Ιστοσελίδα
              </a>
            </li>
            <li class="navbar-item">
              <a href="/login/logout" class="navbar-link button-danger">
                Αποσύνδεση
              </a>
            </li>
          </ul>
        </nav>
      </header>
    </body>

    </html>

add_new.ejs

 




    
        <%- include("interface_layout.ejs") %> 
          <div class="container">
           <form action="/admin/posts" method="POST" enctype="multipart/form-data" class="admin-form">
            <label for="title">Τίτλος</label>
            <input type="text" name="title" id="title" class="u-full-width">
            <label for="content">Περιεχόμενο</label>
            <textarea name="content" id="content" rows="20" style="display: none;" class="u-full-width"></textarea>
            <div id="toolbar"></div>
            <div id="editor"><p>hello world</p></div>
            <% const choices = ["Συνεντεύξεις", "Θέατρο-Κριτική", "Εικαστικά", "test-ride"] %> 
            <label>Ετικέτες</label>
            <div class="choices">
              <% choices.forEach(choice => { %>
                <label for="<%= choice %>" class="choice"><%= choice %></label>
                <input type="checkbox" id="<%= choice %>" value="<%= choice %>" name="tags"     class="switch">
              <% }) %>
            </div>
            <label for="date">Ημερομηνία αρχικής δημοσίευσης</label>
            <input type="date" name="publishingDate" i="date">
            <label for="image">Εικόνα</label>
            <input type="file" name="image" id="image" accept="iamge/gif, image/png, image/jpeg">
            <button class="button-primary button" type="submit">Ανέβασμα</button>
          </form> 
          </div> 
    
       <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
        <!-- Initialize Quill editor -->
          <script>
            var options = {
              debug: "info",
              modules: {
                toolbar: "#toolbar"
              },
              placeholder: "Compose an epic...",
              readOnly: true,
              theme: "snow"
            }
            var container = document.getElementById("editor");
            var quill = new Quill(container, options);
          </script>

I'm trying to first use quill using the cdn. I import the css for the snow theme in my layout.ejs and in the end of add_new.ejs i import quill and then I initialize it with a script tag. I can't get it to appear.

My console gives me this:

Content Security Policy: The page’s settings blocked the loading of a resource at https://cdn.quilljs.com/1.3.6/quill.js (“script-src”).

I have also tried to "const Quill = require("quill")" in my routes.js and pass the editor as a variable to my view but I get.

var elem = document.createElement('div'); ^

ReferenceError: document is not defined at Object. (/node_modules/quill/dist/quill.js:7661:12)

I tried the quickstart method (on quill's website) on a plain index.html file and a basic express project with one ejs file and quill worked both times. I suspect there is something wrong with the includes/templates?

Upvotes: 1

Views: 994

Answers (2)

xetryDcoder
xetryDcoder

Reputation: 157

Below I have Displayed how exactly we can send data from quill/ejs to any backend.

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

<form action="/add-quill" method="post">
    <div id="editor">
    </div>
    <input name="about" type="hidden">
    <input type="submit" onclick="myFunction()">

</form>
<!-- Create the editor container -->


<!-- Include the Quill library -->
<script
    src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
    function myFunction() {
        <!-- Here the class ql-editor is defined by quill js, we can access the inner html from here -->
        var editor = document.getElementsByClassName('ql-editor')[0].innerHTML
        var about = document.querySelector('input[name=about]');
        about.value = editor
    };

    //Configuring quill
    var quill = new Quill('#editor', {
        theme: 'snow'
    });

</script>

Upvotes: -1

Nhut Truong Vo
Nhut Truong Vo

Reputation: 1

I get an error when viewing the browser console, what you need to do is put the highlight.min.js file in front of quill.js. Best to download locally

<link href="/css/quill_editor/quill.snow.css" rel="stylesheet">
<script src="/js/quill_editor/highlight.min.js"></script>
<script src="/js/quill_editor/quill.js"></script>

Upvotes: -1

Related Questions