How to integrate ckeditor in the fomeo #340

Activity

1. kevinchappell commented on Sep 25, 2026

   

   kevinchappell

   on Sep 25, 2026

   Collaborator

   More actions

   You can add it as a custom control, the same way the built-in TinyMCE control works (src/lib/js/components/controls/html/tinymce.js):

   const ckeditor = {
     tag: 'textarea',
     config: { label: 'Rich text' },
     meta: { group: 'html', id: 'ckeditor', icon: 'rich-text' },
     dependencies: { js: 'YOUR_CKEDITOR_BUILD_URL' },
     action: { onRender: elem => window.ClassicEditor.create(elem) },
   }
   
   new FormeoEditor({ editorContainer: '#editor', controls: { elements: [ckeditor] } })
   new FormeoRenderer({
     renderContainer: '#form',
     elements: { ckeditor: { action: ckeditor.action, dependencies: ckeditor.dependencies } },
   })

   Take the build URL from CKEditor's own install docs, since newer CDN builds need a license key. CKEditor keeps its content outside the textarea until the form submits, so call editor.updateSourceElement() before reading renderer.userData.
2. kevinchappell

   closed this as completedon Sep 28, 2026
3. kevinchappell commented on Sep 30, 2026

   

   kevinchappell

   on Sep 30, 2026

   Collaborator

   More actions

   For anyone landing here: 5.13.2 added a rich text editor recipe that wires CKEditor 5 into a Formeo custom control.