Installing a WYSIWYG editor in your application or on your website is often the easy part. The hard part comes afterwards: extending and customizing the editor to fit your specific needs. There are currently a couple of very good editors, but after reading this text I think you'll agree there's still room for improvement. We'll be looking at the following alternative WYSIWYG editors:
Though all three are meant for text editing, Quill and CKEditor are a bit more explicit about this in their architecture:
Gutenberg is a bit more involved, literally using building "blocks" to create it's editor. Instead of seeing the content as a long string it takes a more component-esque approach. For example, the following things are all their own blocks in the gutenberg editor, which a specific react component that handles the editing mode, and one that handles the display mode.
When editing, you are editing, adding or removing one specific block at a time. Blocks can contain other blocks in a tree structure, and they all have their own (but uniform) editing UI.
Schlechtenburg takes a block based approach, just like its namesake Gutenberg. This has a couple of advantages:
Making sure the final rendered data looks correct is always easier than making sure the editing experience is great. Schlechtenburg aims to offer a vast library of reusable components, patterns, variables, and rules for the editing UI. We call this SBUI. Complex blocks require complex editing forms and UIs so most of the work goes into creating this UI. A good Design System should help ease the pain.
Does as it says; drop Schlechtenburg into Nuxt.js, and not just the display mode but also the editor itself will render on the server.
Toolbars and editing elements are in the correct tab order, SBUI elements are all fully accessible.
Input and Output is one standardized, typed, JSON-stringifyable object. For example, a paragraph looks like this:
{
id: '1590592116800',
name: 'sb-paragraph',
data: {
value: 'This is the second paragraph<br>',
align: 'left'
}
},
Gutenberg is tied heavily into the Wordpress ecosystem, making its inclusion in other sites harder than necessary.
`,22),n=[o];function s(l,d,h,c,u,g){return a(),t("div",null,n)}var m=e(r,[["render",s]]);export{b as __pageData,m as default};