Fluent Editor: A powerful out-of-the-box rich text editor based on Quill 2.0!

Hello, I'm Kagol, personal public:Front-end open source planet。

In April this year, when I heard the news of the official release of Quill 2.0, I was so excited that I immediately experienced it and wrote an article about it.

Back on the Iron Throne! Quill 2.0 is finally released after 5 years 🎉!

Since more and more users want to provide rich text components, we have wrapped a more comprehensive Fluent Editor rich text based on Quill 2.0.

Official website:/fluent-editor/
Source Code:/opentiny/fluent-editor/(Welcome Star ⭐)

Next I'll take you through the Fluent Editor, which is basically no different from Quill, and only needs to focus on the enhanced parts, such as forms, attachments, @reminders, emoticons, and other modules.

1 Quick start

Fluent Editor is packaged based on Quill 2.0, and extends a lot of useful module functions, and the way of using it is the same as that of Quill.

Install the dependencies:

npm i @opentiny/fluent-editor

Write HTML:

<div >
  <p><strong>Fluent Editor</strong> is a rich text editor based on <a class="ql-normal-link" href="/" target="_blank">Quill 2.0</a>. rich text editor that extends Quill with a rich set of modules and formats that are powerful and easy to use right out of the box. It is a powerful, out-of-the-box rich text editor that expands on Quill's rich set of modules and formats.
  <p> <br> </p>
  <p> Official website: <a class="ql-normal-link" href="/fluent-editor/" target="_blank">/fluent-editor/</a></p>
  <p> Source: <a class="ql-normal-link" href="/opentiny/fluent-editor/" target="_blank">/opentiny/fluent-editor/</a> (welcome Star) ⭐)</p>
</div>.

Introduce the style:

@import '@opentiny/fluent-editor/';

Initialize the Fluent Editor editor:

import FluentEditor from '@opentiny/fluent-editor'

const editor = new FluentEditor('#editor', {
  theme: 'snow'
})

2 Configuring the Toolbar

Configuring the toolbar is the most common requirement.

Fluent Editor supports 27 built-in toolbar buttons, which can of course be extended.

The following toolbars are supported in addition to the 22 toolbars built into Quill:

undo undo (computing)
redo redo
better-table tabular
file File uploads, which need to be enabledfile module (in software)
emoji To insert an emoticon, you need to enableemoji-toolbar module (in software)

Toolbars supported by Quill./docs/modules/toolbar

Toolbar buttons can be configured via the toolbar module:

import FluentEditor from '@opentiny/fluent-editor'

const toolbarOptions = [
  ['undo', 'redo'], // Fluent Editor added
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  ['blockquote', 'code-block'],
  ['link', 'image', 'video', 'formula'],

  [{ 'header': 1 }, { 'header': 2 }], // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
  [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
  [{ 'direction': 'rtl' }], // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean'], // remove formatting button
  ['better-table', 'file', 'emoji'] // Fluent Editor added
]

const editor = new FluentEditor('#editor', {
  theme: 'snow',
  modules: {
    toolbar: toolbarOptions,
    syntax: true, // Code Block Highlighting
    file: true, // File Upload
    'emoji-toolbar': true, // Insert an emoticon
  }
})

In addition to configuring the built-in toolbars, it also supports extending the toolbar buttons, you can refer to my previous article on how to do so:

Quill in Depth Series - Practice Part 2: Putting the whole Snake game into the editor!

Or refer to the official Quill documentation:/docs/modules/toolbar#handlers

3 Configuring the built-in modules

Fluent Editor supports 11 built-in modules:

clipboard Paste version
history Operation history
keyboard Keyboard events
syntax syntax highlighting
toolbar
uploader File upload
formula formula, depends on katex formula library
⭐better-table tables
⭐mention @reminders
⭐emoji-toolbar insert emoji
⭐file attachment upload, used with file format to insert attachments

Configure modules via modules. For example, to enable a module, you can set it to true.

const editor = new FluentEditor('#editor', {
  theme: 'snow',
  modules: {
    toolbar: toolbarOptions,
    syntax: true, // Enable Code Block Highlighting Module
    file: true, // Enabling the file upload module
    'emoji-toolbar': true, // Enable Insert Emoji Module
  }
})

It is also possible to pass in some configuration items to customize the functionality of the module, e.g., configure the form right-click action menu.

const editor = new FluentEditor('#editor', {
  theme: 'snow',
  modules: {
    toolbar: toolbarOptions,
    'better-table': {
      operationMenu: {
        color: {
          text: 'theme color',
          colors: [
            '#ffffff', '#f2f2f2', '#dddddd', '#a6a6a6', '#666666', '#000000',
            '#c00000', '#ff0000', '#ffc8d3', '#ffc000', '#ffff00', '#fff4cb',
            '#92d050', '#00b050', '#dff3d2', '#00b0f0', '#0070c0', '#d4f1f5',
            '#002060', '#7030a0', '#7b69ee', '#1476ff', '#ec66ab', '#42b883',
          ]
        }
      }
    }
  }
})

See the Fluent Editor and Quill documentation for more information on how to use it:

Fluent Editor：/fluent-editor/docs/custom-toolbar
Quill：/docs/modules

4 Configuring the Quill Ecology Module

Quill is a modular rich text with many external eco-modules. Fluent Editor is based on Quill and has the same modularity capabilities as Quill, we choose a module for Markdown shortcuts from the following list of Quill modules:quill-markdown-shortcuts, configured into our Fluent Editor rich text.

/quilljs/awesome-quill

First you need to install thequill-markdown-shortcuts。

npm i quill-markdown-shortcuts

Then register this module:

import FluentEditor from '@opentiny/fluent-editor'

// Introduction and registration
import MarkdownShortcuts from 'quill-markdown-shortcuts'

('modules/markdownShortcuts', MarkdownShortcuts)

Configure it in the modules:

new FluentEditor('#editor', {
  theme: 'snow',
  modules: {
    markdownShortcuts: {} // activate (a plan) Markdown Shortcut Module
  }
})

At this point we enter the shortcut for Markdown syntax in the rich text editor, for example:#, press the space bar and it will automatically change to the format of the first level heading.

The effect is as follows:

In addition to configuring existing modules, there is also support for extending new modules, as you can see in my previous article:

Principles of Quill Series 1: Modularization Mechanism of Quill, a Modern Rich Text Editor

5 Use in multiple front-end frameworks

Fluent Editor is a framework-independent rich text editor that can be used in any front-end framework .

Used in Vue, for example:

<script setup lang="ts">
import { onMounted } from 'vue'
import FluentEditor from '@opentiny/fluent-editor'

onMounted(() => {
  new FluentEditor('#editor', {
    theme: 'snow'
  })
})
</script>

<template>
  <div ></div>
</template>

Used in React:

import { useEffect } from 'react'
import FluentEditor from '@opentiny/fluent-editor'
import '@opentiny/fluent-editor/'

function App() {
  useEffect(() => {
    new FluentEditor('#editor', {
      theme: 'snow'
    })
  })

  return (
    <div ></div>
  )
}

export default App

6 Summary

In this article, we are going to share with you the following sections.

First, let's take a quick tour of Fluent Editor rich text.
It then introduces the most common configuration toolbars in development, with 27 useful toolbar buttons built-in
We will introduce the 11 built-in modules of the Fluent Editor, and focus on the configuration of the table module
Since Fluent Editor is compatible with the Quill eco-module with Markdown shortcuts:quill-markdown-shortcuts An example of how to configure the Quill eco-module
Finally, it describes how to use the Fluent Editor in the Vue / React framework.

For more usage, please refer to the Fluent Editor website:/fluent-editor/

Since the Fluent Editor is based on Quill for packaging, in fact, master Quill basically mastered the Fluent Editor, you are welcome to pay attention to my previous "deep and shallow Quill" series of articles:

/column/7325707131678769152

Contact Us

GitHub：/opentiny/tiny-vue(Welcome Star ⭐)

Official website:/tiny-vue

Station B:/15284299

Personal Blog:/blogs

Small assistant WeChat: opentiny-official

Public: OpenTiny