10 lines
5 KiB
JavaScript
10 lines
5 KiB
JavaScript
import{_ as e,c as t,o as a,d as i}from"./app.87539bc2.js";const b='{"title":"Why Schlechtenburg?","description":"","frontmatter":{},"headers":[{"level":2,"title":"Block based","slug":"block-based"},{"level":2,"title":"Design system with standardized components","slug":"design-system-with-standardized-components"},{"level":2,"title":"SSR Compatible","slug":"ssr-compatible"},{"level":2,"title":"Accessible","slug":"accessible"},{"level":2,"title":"JSON only","slug":"json-only"},{"level":2,"title":"So why not Gutenberg?","slug":"so-why-not-gutenberg"}],"relativePath":"guide/why.md"}',r={},o=i(`<h1 id="why-schlechtenburg" tabindex="-1">Why Schlechtenburg? <a class="header-anchor" href="#why-schlechtenburg" aria-hidden="true">#</a></h1><p>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:</p><ul><li><a href="https://quilljs.com/" target="_blank" rel="noopener noreferrer">Quill</a></li><li><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener noreferrer">CKEditor</a></li><li><a href="https://wordpress.org/gutenberg/" target="_blank" rel="noopener noreferrer">Gutenberg</a></li></ul><h2 id="block-based" tabindex="-1">Block based <a class="header-anchor" href="#block-based" aria-hidden="true">#</a></h2><p>Though all three are meant for text editing, Quill and CKEditor are a bit more explicit about this in their architecture:</p><ul><li>They input and output a string</li><li>They have one global toolbar</li></ul><p>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.</p><ul><li>Paragraph</li><li>Heading</li><li>List</li><li>Image</li><li>Column-based layout</li><li>External media embeds like YouTube videos</li></ul><p>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.</p><p>Schlechtenburg takes a block based approach, just like its namesake Gutenberg. This has a couple of advantages:</p><ul><li>You can take strong control over the final rendered HTML of a block that you create</li><li>Blocks are easily published as reusable JS modules</li><li>You very rarely need blocks inside text, but the reverse has abundant usecases</li><li>The mental model is closer to how actual HTML works</li><li>Very complex pages can be handled by the editor</li><li>If you know React or Vue, you understand a lot about how to write blocks for the editor</li></ul><h2 id="design-system-with-standardized-components" tabindex="-1">Design system with standardized components <a class="header-anchor" href="#design-system-with-standardized-components" aria-hidden="true">#</a></h2><p>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 <strong>SBUI</strong>. 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.</p><h2 id="ssr-compatible" tabindex="-1">SSR Compatible <a class="header-anchor" href="#ssr-compatible" aria-hidden="true">#</a></h2><p>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.</p><h2 id="accessible" tabindex="-1">Accessible <a class="header-anchor" href="#accessible" aria-hidden="true">#</a></h2><p>Toolbars and editing elements are in the correct tab order, <strong>SBUI</strong> elements are all fully accessible.</p><h2 id="json-only" tabindex="-1">JSON only <a class="header-anchor" href="#json-only" aria-hidden="true">#</a></h2><p>Input and Output is one standardized, typed, JSON-stringifyable object. For example, a paragraph looks like this:</p><div class="language-"><pre><code>{
|
|
id: '1590592116800',
|
|
name: 'sb-paragraph',
|
|
data: {
|
|
value: 'This is the second paragraph<br>',
|
|
align: 'left'
|
|
}
|
|
},
|
|
</code></pre></div><h2 id="so-why-not-gutenberg" tabindex="-1">So why not Gutenberg? <a class="header-anchor" href="#so-why-not-gutenberg" aria-hidden="true">#</a></h2><p>Gutenberg is tied heavily into the Wordpress ecosystem, making its inclusion in other sites harder than necessary.</p>`,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};
|