quill-html-edit-button

    2.2.5 • Public • Published

    quill-html-edit-button

    NPM Version License Downloads/week Github Issues

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

    Demo

    Install

    yarn add quill-html-edit-button

    Quickstart (Javascript)

    import Quill from 'quill/core';
    import Toolbar from 'quill/modules/toolbar';
    import Snow from 'quill/themes/snow';
    
    import htmlEditButton from "quill-html-edit-button";
    
    Quill.register({
      'modules/toolbar': Toolbar,
      'themes/snow': Snow,
      "modules/htmlEditButton": htmlEditButton
    })
    
    const quill = new Quill(editor, {
      // ...
      modules: {
        // ...
        htmlEditButton: {}
      }
    });

    Quickstart (typescript)

    Due to Quill's implementation, typescript integration is not trivial:

    • Follow the demo example here src/demos/typescript/demo.ts
    • The file setup.js is to use the library without types (as they aren't implemented with quill modules).
    • Your tsconfig.json needs the following properties, to prevent errors:
      "compilerOptions": {
        "allowJs": true,
        "checkJs": false
      }

    Quickstart (script tag)

    <script src="https://unpkg.com/quill@1.3.7/dist/quill.js"></script>
    <script src="https://unpkg.com/quill-html-edit-button@2.1.0/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),
        editorModules: {} // The default mod
      }
    }

    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.

    Customising The HTML Editor

    The editor itself is actually a Quill Editor instance too! So you can pass in custom modules like this:

      // options
      htmlEditButton: {
        // Flags
        debug?: boolean;              // default:  false 
        syntax?: boolean;             // default:  false  
        // Overlay
        closeOnClickOverlay: boolean; // default:  true                       
        prependSelector: string;      // default:  null                       
        // Labels
        buttonHTML?: string;          // default:  "&lt;&gt;"
        buttonTitle?: string;         // default:  "Show HTML source"
        msg: string;                  // default:  'Edit HTML here, when you click "OK" the quill editor\'s contents will be replaced'     
        okText: string;               // default:  "Ok"
        cancelText: string;           // default:  "Cancel"            
        // Quill Modules (for the HTML editor)
        editorModules?: {             // default:  null
          // Any modules here will be declared in HTML quill editor instance
          keyboard: {
            bindings: {
              custom: {
                key: 'a',
                handler: function(range, context) {
                  console.log('A KEY PRESSED!');
                }
              },
            },
          },
        },
      },

    Thanks

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

    Install

    npm i quill-html-edit-button

    DownloadsWeekly Downloads

    2,836

    Version

    2.2.5

    License

    MIT

    Unpacked Size

    4.66 MB

    Total Files

    32

    Last publish

    Collaborators

    • avatar