Help needed: how to use your ckeditor component separately?

[intothephone]

Describe feature

First, great work, the notes app is fantastic!!!

Actually I had another idea: your ckeditor is also wonderful, I want to use it in my own project. I had built ckeditor5 using this link: https://github.com/TriliumNext/Notes/tree/develop/packages/ckeditor5, and successfully generated the dist folder, the structure is at the end of this feature request. My question is: could this be used in my own project? If the answer is yes, could you guide me to write a simple html that just has a ckeditor area(need to show the toolbars too, including image/table/math/alignment etc.). If the answer is not, could you tell me how to package it as a separate lib? Thanks in advance!

The generated dist folder structure:

├── augmentation.d.ts
├── augmentation.d.ts.map
├── content.css
├── index.css
├── index.d.ts
├── index.d.ts.map
├── index.js
├── plugins
│   ├── code_block_language_dropdown.d.ts
│   ├── code_block_language_dropdown.d.ts.map
│   ├── code_block_toolbar.d.ts
│   ├── code_block_toolbar.d.ts.map
│   ├── copy_to_clipboard_button.d.ts
│   ├── copy_to_clipboard_button.d.ts.map
│   ├── cuttonote.d.ts
│   ├── cuttonote.d.ts.map
│   ├── file_upload
│   │   ├── fileuploadcommand.d.ts
│   │   ├── fileuploadcommand.d.ts.map
│   │   ├── fileuploadediting.d.ts
│   │   ├── fileuploadediting.d.ts.map
│   │   ├── progressbarview.d.ts
│   │   ├── progressbarview.d.ts.map
│   │   ├── uploadfileplugin.d.ts
│   │   └── uploadfileplugin.d.ts.map
│   ├── includenote.d.ts
│   ├── includenote.d.ts.map
│   ├── indent_block_shortcut.d.ts
│   ├── indent_block_shortcut.d.ts.map
│   ├── internallink.d.ts
│   ├── internallink.d.ts.map
│   ├── italic_as_em.d.ts
│   ├── italic_as_em.d.ts.map
│   ├── markdownimport.d.ts
│   ├── markdownimport.d.ts.map
│   ├── mention_customization.d.ts
│   ├── mention_customization.d.ts.map
│   ├── move_block_updown.d.ts
│   ├── move_block_updown.d.ts.map
│   ├── referencelink.d.ts
│   ├── referencelink.d.ts.map
│   ├── remove_format_links.d.ts
│   ├── remove_format_links.d.ts.map
│   ├── strikethrough_as_del.d.ts
│   ├── strikethrough_as_del.d.ts.map
│   ├── syntax_highlighting
│   │   ├── augmentation.d.ts
│   │   ├── augmentation.d.ts.map
│   │   ├── index.d.ts
│   │   └── index.d.ts.map
│   ├── uploadimage.d.ts
│   └── uploadimage.d.ts.map
├── plugins.d.ts
└── plugins.d.ts.map

Additional Information

No response

[eliandoran]

Hi, @intothephone .

The @triliumnext/ckeditor5 project simply bundles the CKEditor and our builtin set of plugins. While you could theoretically use it on your own, I think it's best to copy the source code and create something similar. The reason is that there are some plugins that are specific to Trilium (such as reference links) that are not going to work outside Trilium.

What you need to get started is a bundler such as Webpack, Vite (like we are using) or perhaps even Parcel (which requires little to no configuration).

To instantiate the editor, look at the official CKEditor documentation and also at editable_text.ts, where we do the initialization on our own.

For the toolbar configuration, you'd also have to look at apps/client/src/widgets/type_widgets/ckeditor/config.ts.

[intothephone]

Yes, that needs some efforts to port. Anyway, thank you for the point of the files that I need pay attention to.