quill-html-edit-button

quill-html-edit-button

Quill.js Module which allows you to quickly view/edit the HTML in the editor

• Live Demo
• Live Demo (using script tags)
• Live Demo With Tables! (quill-2.x)

Install

yarn add quill-html-edit-button

Quickstart

import { htmlEditButton } from "./quill.htmlEditButton.js";

Quill.register("modules/htmlEditButton", htmlEditButton);

const quill = new Quill(editor, {
  // ...
  modules: {
    // ...
    htmlEditButton: {}
  }
});

Quickstart (script tag)

    <script src="/dist/quill.htmlEditButton.min.js"></script>
    <script>
      Quill.register("modules/htmlEditButton", htmlEditButton);
      const quill = new Quill(editor, {
        // ...
        modules: {
          // ...
          htmlEditButton: {}
        }
      });
    </script>

Options

modules: {
  // ...
  htmlEditButton: {
    debug: true, // logging, default:false
    msg: "Edit the content in HTML format", //Custom message to display in the editor, default: Edit HTML here, when you click "OK" the quill editor's contents will be replaced
    okText: "Ok", // Text to display in the OK button, default: Ok,
    cancelText: "Cancel", // Text to display in the cancel button, default: Cancel
    buttonHTML: "&lt;&gt;", // Text to display in the toolbar button, default: <>
    buttonTitle: "Show HTML source", // Text to display as the tooltip for the toolbar button, default: Show HTML source
    syntax: false, // Show the HTML with syntax highlighting. Requires highlightjs on window.hljs (similar to Quill itself), default: false
    prependSelector: 'div#myelement', // a string used to select where you want to insert the overlayContainer, default: null (appends to body)
  }
}

Syntax Highlighting

By default syntax highlighting is off, if you want to enable it use syntax: true in the options (as shown above) and make sure you add the following script tags:

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/github.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
<script
  charset="UTF-8"
  src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/languages/xml.min.js"
></script>

Alternatively, include these scripts in your package bundler, as long as highlightjs is available in the global space at window.hljs.

Thanks

This project is based on quill-image-uploader, thanks mate!