Quill RTE

Example of the Quill open source rich text editor forked from another user

by Paul Leech

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css">
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.1/quill.bubble.css">
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.1/quill.snow.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
<script src="//cdn.quilljs.com/1.3.1/quill.js"></script>
<div id="editor-container">
  <blockquote>
    O Captain! My Captain! our fearful trip is done;
    <br> The ship has weather'd every rack, the prize we sought is won;
    <br> The port is near, the bells I hear, the people all exulting,
    <br> While follow eyes the steady keel, the vessel grim and daring:
    <br>
    <br> But O heart! heart! heart!
    <br> O the bleeding drops of red,
    <br> Where on the deck my Captain lies,
    <br> Fallen cold and dead.
    <br>
  </blockquote>
  <em>Walt Whitman</em>
</div>

CSS

body {
  padding: 0;
  margin: 0;
  background: #fff;
}
#editor-container {
  height: 300px;
}

JavaScript

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{
        header: [1, 2, false]
      }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});