thesharpieone / quill-html-edit-button Goto Github PK

View Code? Open in Web Editor NEW

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

HTML 23.05% JavaScript 69.53% CSS 7.43%

quill-html-edit-button's Introduction

quill-html-edit-button

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

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
  }
}