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:

./index.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