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:
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,
}
}
}),