Third-party plugins

WYSIWYG Editor

Utilize the WYSIWYG text editor to create and modify content, adjusting paragraphs, headings, images, and styling options.

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate Editor JS into your project. This is official <a href="https://editorjs.io/" target="_blank" class="link link-primary">EditorJS</a> site.

<script src="../path/to/editor.js"></script>

JavaScript

import EditorJS from '@editorjs/editorjs';

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

Basic example

Default

This is a basic example of a text editor using <a href="https://editorjs.io/" target="_blank" class="link link-primary">EditorJS</a>. 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 <a href="https://github.com/codex-team/editor.js" rel="nofollow noindex" target="_blank" class="link link-primary">EditorJS repository</a> and check out the <a href="https://github.com/editor-js/awesome-editorjs" target="_blank" class="link link-primary">Awesome Editor.js</a> list for more tools.

The editor JSON output will appear here as you type.

Modal

Example showcasing a text editor in a modal.