Skip to main content

Rich editor

Under the hood this plugin uses Quill. Quill is a free, open source WYSIWYG editor built for the modern web.

This plugin allows you to use Quill editor in your AdminForth application.

Usage​

First, install the plugin:

npm i @adminforth/rich-editor --save

Import plugin:

./resources/apartments.ts
import RichEditorPlugin from '@adminforth/rich-editor';

Now instantiate the plugin and add it to the configuration:

./resources/apartments.ts

{
  ...
  resourceId: 'aparts',
  columns: [
    ...
    {
      name: 'description',
      type: AdminForthDataTypes.RICHTEXT, // like plain AdminForthDataTypes.TEXT but renders HTML in show/list views
      ...
    }
    ...
  ],
  ...
  plugins: [
    ...
    new RichEditorPlugin({
      htmlFieldName: 'description',
    }),
    ...
  ],
}

Now you can see Quill editor in the description field in the edit view:

alt text

Multiple editors in one resource

If you need multiple fields in one resource which happens rarely, just add multiple instances of the plugin:

{
  ...
  resourceId: 'promotion',
  columns: [
    ...
    {
      name: 'short_description',
      type: AdminForthDataTypes.RICHTEXT,
      ...
    },
    {
      name: 'full_description',
      type: AdminForthDataTypes.RICHTEXT,
      ...
    }
    ...
  ],
  ...
  plugins: [
    ...
    new QuillEditorPlugin({
      htmlField: 'short_description',
    }),
    new QuillEditorPlugin({
      htmlField: 'full_description',
    }),
    ...
  ],
}

Completion​

To get completion suggestions for the text in the editor, you can use the completion option. This option is an object with the following properties:

./index.ts
  new RichEditorPlugin({
      htmlFieldName: 'description',
      completion: {
        provider: 'openai-chat-gpt',
        params: {
          apiKey: process.env.OPENAI_API_KEY as string,
          // model: 'gpt-4o',  gpt-4o-model is a default (cheapest one)
        },
        expert: {
          debounceTime: 250,
        }
      }
    }),

alt text