Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

quill-html-edit-button

Package Overview
Dependencies
Maintainers
1
Versions
56
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

quill-html-edit-button

A Quill rich text editor Module which adds an html edit button to the quill editor

  • 2.2.6
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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!

Keywords

FAQs

Package last updated on 09 Aug 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc