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:

./resources/apartments.ts
{
  ...
  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​

First, install the completion adapter:

npm i @adminforth/completion-adapter-open-ai-chat-gpt --save

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:

./resources/apartments.ts
  import CompletionAdapterOpenAIChatGPT from "@adminforth/completion-adapter-open-ai-chat-gpt";

  new RichEditorPlugin({
      htmlFieldName: 'description',
      completion: {
        adapter: new CompletionAdapterOpenAIChatGPT({
          openAiApiKey: process.env.OPENAI_API_KEY as string,
          model: 'gpt-4o', //gpt-4o-mini is a default (cheapest one)
          expert: {
            temperature: 0.7 //Model temperature, default 0.7
          }
        }),
        expert: {
          debounceTime: 250,
        }
      }
    }),

alt text