0864833f.81b49c35.js

"use strict";(self.webpackChunkadminforth=self.webpackChunkadminforth||[]).push([[2389],{4503:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>o,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"tutorial/Plugins/RichEditor","title":"Rich editor","description":"Under the hood this plugin uses Quill. Quill is a free, open source WYSIWYG editor built for the modern web.","source":"@site/docs/tutorial/05-Plugins/04-RichEditor.md","sourceDirName":"tutorial/05-Plugins","slug":"/tutorial/Plugins/RichEditor","permalink":"/docs/tutorial/Plugins/RichEditor","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":4,"frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"ForeignInlineList","permalink":"/docs/tutorial/Plugins/ForeignInlineList"},"next":{"title":"Upload","permalink":"/docs/tutorial/Plugins/upload"}}');var s=i(4848),r=i(8453);const o={},d="Rich editor",a={},l=[{value:"Usage",id:"usage",level:2},{value:"Completion",id:"completion",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"rich-editor",children:"Rich editor"})}),"\n",(0,s.jsxs)(n.p,{children:["Under the hood this plugin uses ",(0,s.jsx)(n.a,{href:"https://quilljs.com/",children:"Quill"}),". Quill is a free, open source WYSIWYG editor built for the modern web."]}),"\n",(0,s.jsx)(n.p,{children:"This plugin allows you to use Quill editor in your AdminForth application."}),"\n",(0,s.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(n.p,{children:"First, install the plugin:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm i @adminforth/rich-editor --save\n"})}),"\n",(0,s.jsx)(n.p,{children:"Import plugin:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="./resources/apartments.ts"',children:'import RichEditorPlugin from "@adminforth/rich-editor";\n'})}),"\n",(0,s.jsx)(n.p,{children:"Now instantiate the plugin and add it to the configuration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="./resources/apartments.ts"',children:"\n{\n  ...\n  resourceId: 'aparts',\n  columns: [\n    ...\n    {\n      name: 'description',\n//diff-add\n      type: AdminForthDataTypes.RICHTEXT, // like plain AdminForthDataTypes.TEXT but renders HTML in show/list views\n      ...\n    }\n    ...\n  ],\n  ...\n  plugins: [\n    ...\n//diff-add\n    new RichEditorPlugin({\n//diff-add\n      htmlFieldName: 'description',\n//diff-add\n    }),\n    ...\n  ],\n}\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Now you can see Quill editor in the ",(0,s.jsx)(n.code,{children:"description"})," field in the edit view:"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"alt text",src:i(6805).A+"",width:"3670",height:"2064"})}),"\n",(0,s.jsx)(n.h1,{id:"multiple-editors-in-one-resource",children:"Multiple editors in one resource"}),"\n",(0,s.jsx)(n.p,{children:"If you need multiple fields in one resource which happens rarely, just add multiple instances of the plugin:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="./resources/apartments.ts"',children:"{\n  ...\n  resourceId: 'promotion',\n  columns: [\n    ...\n    {\n      name: 'short_description',\n      type: AdminForthDataTypes.RICHTEXT,\n      ...\n    },\n    {\n      name: 'full_description',\n      type: AdminForthDataTypes.RICHTEXT,\n      ...\n    }\n    ...\n  ],\n  ...\n  plugins: [\n    ...\n    new QuillEditorPlugin({\n      htmlField: 'short_description',\n    }),\n    new QuillEditorPlugin({\n      htmlField: 'full_description',\n    }),\n    ...\n  ],\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"completion",children:"Completion"}),"\n",(0,s.jsx)(n.p,{children:"First, install the completion adapter:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm i @adminforth/completion-adapter-open-ai-chat-gpt --save\n"})}),"\n",(0,s.jsxs)(n.p,{children:["To get completion suggestions for the text in the editor, you can use the ",(0,s.jsx)(n.code,{children:"completion"})," option. This option is an object with the following properties:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="./resources/apartments.ts"',children:"//diff-add\n  import CompletionAdapterOpenAIChatGPT from \"@adminforth/completion-adapter-open-ai-chat-gpt\";\n\n  new RichEditorPlugin({\n      htmlFieldName: 'description',\n//diff-add\n      completion: {\n//diff-add\n        adapter: new CompletionAdapterOpenAIChatGPT({\n//diff-add\n          openAiApiKey: process.env.OPENAI_API_KEY as string,\n//diff-add\n          model: 'gpt-4o', //gpt-4o-mini is a default (cheapest one)\n          expert: {\n//diff-add\n            temperature: 0.7 //Model temperature, default 0.7\n//diff-add\n          }\n//diff-add\n        }),\n//diff-add\n        expert: {\n//diff-add\n          debounceTime: 250,\n//diff-add\n        }\n//diff-add\n      }\n    }),\n"})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"alt text",src:i(7998).A+"",width:"1400",height:"1050"})})]})}function p(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},7998:(e,n,i)=>{i.d(n,{A:()=>t});const t=i.p+"assets/images/gptDemo-7f2508ca0024430341592a6d40cf76c8.gif"},6805:(e,n,i)=>{i.d(n,{A:()=>t});const t=i.p+"assets/images/image-2-f1e856fbaa6202d9e8fde0165763c5eb.png"},8453:(e,n,i)=>{i.d(n,{R:()=>o,x:()=>d});var t=i(6540);const s={},r=t.createContext(s);function o(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);