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

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