Tailwind CSS WYSIWYG Editor

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate Editor JS into your project. This is official EditorJS site.

1
Installation
Install EditorJS using npm:
npm install @editorjs/editorjs --save
2
Include EditorJS JavaScript
Add the following <script> tag near the end of your </body> section to include EditorJS:
<script src="../path/to/editor.js"></script>
Note: A CDN link will not work here because customization of the default Vendor CSS is required to fit FlyonUI's design.
3
Update Tailwind Configuration
Add the path to the EditorJS JavaScript files in the content section of your Tailwind configuration file. Also, set vendors: true in the FlyonUI config to ensure that vendor-specific CSS is generated:
module.exports = { content: [ '../path/to/editorjs/**/*.js', ], flyonui: { vendors: true // Enable vendor-specific CSS generation } }

Basic Usage

This is a basic example of how to create an EditorJS instance:

import EditorJS from '@editorjs/editorjs';

const editor = new EditorJS({
holder: 'editorjs', // Replace 'editorjs' with your container's id
});

This is a basic example of a text editor using EditorJS. With EditorJS, we can create a Notion-like text editor. The text editor below includes basic tools such as heading, nested list, table, inline code, and more. For additional tools, you can refer to the EditorJS repository and check out the Awesome Editor.js list for more tools.

For images, we use the Simple Image plugin, which allows you to drag and drop images or paste the image URL directly, but no UI option will be visible in the toolbar.

<script>
  const editor = new EditorJS({
    holder: 'basic', // id of the element
    // placeholder
    placeholder: 'Type text or paste a link',

    // Tools
    tools: {
      header: {
        class: Header,
        inlineToolbar: ['marker', 'link'],
        config: {
          placeholder: 'Header'
        },
        shortcut: 'CMD+SHIFT+H'
      },
      raw: RawTool,
      image: SimpleImage,
      checklist: {
        class: Checklist,
        inlineToolbar: true
      },
      list: {
        class: NestedList,
        inlineToolbar: true,
        shortcut: 'CMD+SHIFT+L'
      },
      embed: Embed,
      quote: {
        class: Quote,
        inlineToolbar: true,
        config: {
          quotePlaceholder: 'Enter a quote',
          captionPlaceholder: "Quote's author"
        },
        shortcut: 'CMD+SHIFT+O'
      },
      marker: {
        class: Marker,
        shortcut: 'CMD+SHIFT+M'
      },
      table: {
        class: Table,
        inlineToolbar: true,
        shortcut: 'CMD+ALT+T'
      },
      inlineCode: {
        class: InlineCode,
        shortcut: 'CMD+SHIFT+I'
      },
      warning: {
        class: Warning,
        inlineToolbar: true,
        shortcut: 'CMD+SHIFT+W',
        config: {
          titlePlaceholder: 'Title',
          messagePlaceholder: 'Message'
        }
      }
    },

    onChange: () => {
      editor
        .save()
        .then(outputData => {
          displayJSON(outputData)
        })
        .catch(error => {
          console.error('Saving failed: ', error)
        })
    }
  })

  // Function to display JSON data
  function displayJSON(data) {
    const outputElement = document.getElementById('output')
    outputElement.textContent = JSON.stringify(data, null, 2) // Pretty print JSON with indentation
  }
</script>

This block displays the data in JSON format.

Example showcasing a text editor in a modal.

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="text-editor-modal" data-overlay="#text-editor-modal">Daily tasks</button>

<div id="text-editor-modal" class="overlay modal overlay-open:opacity-100 hidden" role="dialog" tabindex="-1">
  <div class="modal-dialog overlay-open:opacity-100 modal-dialog-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Daily tasks</h3>
        <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#text-editor-modal">
          <span class="icon-[tabler--x] size-4"></span>
        </button>
      </div>
      <div class="modal-body">
        <div id="modal-editor" class="border border-base-content/25 rounded-box p-4"></div>
      </div>
    </div>
  </div>
</div>

<script>
  const modaleditor = new EditorJS({
    holder: 'modal-editor', // id of the element
    // placeholder
    placeholder: 'Type text or paste a link',

    // Tools
    tools: {
      header: {
        class: Header,
        inlineToolbar: ['marker', 'link'],
        config: {
          placeholder: 'Header'
        },
        shortcut: 'CMD+SHIFT+H'
      },
      raw: RawTool,
      image: SimpleImage,
      checklist: {
        class: Checklist,
        inlineToolbar: true
      },
      list: {
        class: NestedList,
        inlineToolbar: true,
        shortcut: 'CMD+SHIFT+L'
      },
      embed: Embed,
      quote: {
        class: Quote,
        inlineToolbar: true,
        config: {
          quotePlaceholder: 'Enter a quote',
          captionPlaceholder: "Quote's author"
        },
        shortcut: 'CMD+SHIFT+O'
      },
      marker: {
        class: Marker,
        shortcut: 'CMD+SHIFT+M'
      },
      table: {
        class: Table,
        inlineToolbar: true,
        shortcut: 'CMD+ALT+T'
      },
      inlineCode: {
        class: InlineCode,
        shortcut: 'CMD+SHIFT+I'
      },
      warning: {
        class: Warning,
        inlineToolbar: true,
        shortcut: 'CMD+SHIFT+W',
        config: {
          titlePlaceholder: 'Title',
          messagePlaceholder: 'Message'
        }
      }
    }
  })
</script>

FlyonUI

Tailwind CSS WYSIWYG Editor

Getting started

Setup

Basic example

Default

On this page

WYSIWYG Editor

Tailwind CSS WYSIWYG Editor

Getting started

Setup

Basic example

Default

Modal