Components
JuiceEditor components are the core building blocks used to embed the editor in your pages. Here are all available components:
TaskList Component
The TaskList component is used to display a task list on the page.
Toc Component
The Toc (Table of Contents) component is used to display a table of contents on the page.
Banner Component
The Banner component is used to display a banner on the page, typically used for important information.
You can see an example here: https://www.kuaiyizhi.cn/ideas/F9134AAC-64CE-407F-88C7-602AF21756B3
Blockquote Component
The BlockQuote component is used to display a quote block on the page, typically used for quoting others.
You can see an example here: https://www.kuaiyizhi.cn/ideas/3F8954F2-153A-499A-A516-5EFD9A74F12A
BulletList Component
The BulletList component is used to display an unordered list on the page.
You can see an example here: https://www.kuaiyizhi.cn/ideas/F9134AAC-64CE-407F-88C7-602AF21756B3
Code Component
Based on Monaco Editor, supporting syntax highlighting, code suggestions, and more.
Heading Component
The Heading component is used to display a heading on the page, typically used for important information.
You can see an example here: https://www.kuaiyizhi.cn/ideas/3D37B214-9946-41F3-87F7-DC4736D026A3
Image Component
The Image component is used to display an image on the page.
You can see an example here: https://www.kuaiyizhi.cn/ideas/32C93F12-DD0C-487C-83FC-967CD07CBE2A
Drawing
With additional configuration, you can enable drawing functionality on the page.
Install Extension Package
npm i @coffic/juice-editor-drawCopy Static Files
cp -r node_modules/@coffic/juice-editor-draw/dist ./public/drawConfiguration
You need to tell JuiceEditor how to access the static files you just copied.
editor.setDrawLink('http://localhost:8080/draw/index.html?');Keyboard Component
The Keyboard component is used to display a keyboard on the page.
Link Component
The Link component is used to display a hyperlink on the page.
You can see an example here: https://www.kuaiyizhi.cn/ideas/F9134AAC-64CE-407F-88C7-602AF21756B3
Paragraph Component
The Paragraph component is used to display a block of text on the page.
You can see an example here: https://www.kuaiyizhi.cn/ideas/F9134AAC-64CE-407F-88C7-602AF21756B3
Table Component
The Table component is used to display data in a tabular format on the page.
You can see an example here: https://www.kuaiyizhi.cn/ideas/32C93F12-DD0C-487C-83FC-967CD07CBE2A