97 lines
21 KiB
HTML
97 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Installation | Schlechtenburg</title>
|
|
<meta name="description" content="Experimental WYSIWYG block editor">
|
|
<link rel="stylesheet" href="/schlechtenburg/assets/style.a7ab32f9.css">
|
|
<link rel="modulepreload" href="/schlechtenburg/assets/app.d1307649.js">
|
|
<link rel="modulepreload" href="/schlechtenburg/assets/guide_installation.md.491f5af1.lean.js">
|
|
|
|
<meta name="twitter:title" content="Installation | Schlechtenburg">
|
|
<meta property="og:title" content="Installation | Schlechtenburg">
|
|
</head>
|
|
<body>
|
|
<div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756><div class="sidebar-button" data-v-675d8756><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/schlechtenburg/" aria-label="Schlechtenburg, back to home" data-v-675d8756 data-v-cc01ef16><!----> Schlechtenburg</a><div class="flex-grow" data-v-675d8756></div><div class="nav" data-v-675d8756><nav class="nav-links" data-v-675d8756 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/schlechtenburg/guide/why" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-dropdown-link" data-v-eab3edfe data-v-56bf3a3f><button class="button" data-v-56bf3a3f><span class="button-text" data-v-56bf3a3f>API</span><span class="right button-arrow" data-v-56bf3a3f></span></button><ul class="dialog" data-v-56bf3a3f><!--[--><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/schlechtenburg/api/@schlechtenburg/standalone" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>@schlechtenburg/standalone</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/schlechtenburg/api/@schlechtenburg/core" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>@schlechtenburg/core</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/schlechtenburg/api/@schlechtenburg/layout" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>@schlechtenburg/layout</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/schlechtenburg/api/@schlechtenburg/heading" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>@schlechtenburg/heading</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/schlechtenburg/api/@schlechtenburg/paragraph" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>@schlechtenburg/paragraph</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/schlechtenburg/api/@schlechtenburg/image" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>@schlechtenburg/image</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><!--]--></ul></div></div><!--]--><!----><!----></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-83e92a68><nav class="nav-links nav" data-v-83e92a68 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/schlechtenburg/guide/why" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-dropdown-link" data-v-eab3edfe data-v-56bf3a3f><button class="button" data-v-56bf3a3f><span class="button-text" data-v-56bf3a3f>API</span><span class="right button-arrow" data-v-56bf3a3f></span></button><ul class="dialog" data-v-56bf3a3f><!--[--><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/schlechtenburg/api/@schlechtenburg/standalone" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>@schlechtenburg/standalone</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/schlechtenburg/api/@schlechtenburg/core" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>@schlechtenburg/core</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/schlechtenburg/api/@schlechtenburg/layout" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>@schlechtenburg/layout</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/schlechtenburg/api/@schlechtenburg/heading" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>@schlechtenburg/heading</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/schlechtenburg/api/@schlechtenburg/paragraph" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>@schlechtenburg/paragraph</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/schlechtenburg/api/@schlechtenburg/image" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>@schlechtenburg/image</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><!--]--></ul></div></div><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68><!--[--><li class="sidebar-link"><p class="sidebar-link-item">Getting Started</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/schlechtenburg/guide/why">Why Schlechtenburg?</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/schlechtenburg/guide/installation">Installation</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#you-re-not-yet-using-vue">You're not yet using Vue</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#install-npm-packages">Install npm packages</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#initializing-the-editor">Initializing the editor</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#you-re-already-using-vue">You're already using Vue</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#install-npm-packages-1">Install npm packages</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#using-the-editor-component">Using the editor component</a><!----></li></ul></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/schlechtenburg/guide/examples">Examples</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4><div class="container" data-v-7eddb2c4><!--[--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4><div><h1 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-hidden="true">#</a></h1><p>Schlechtenburg is very modular; consisting of one core package and multiple blocks. All packages are versioned together, meaning that v2.0.3 of one package is guaranteed to work with v2.0.3 of another schlechtenburg package.</p><p>Schlechtenburg is basically one Vue component, so if you're already using Vue you can import and use it directly. Otherwise, there's the standalone version that comes prepackaged with Vue.</p><h2 id="you-re-not-yet-using-vue" tabindex="-1">You're not yet using Vue <a class="header-anchor" href="#you-re-not-yet-using-vue" aria-hidden="true">#</a></h2><h3 id="install-npm-packages" tabindex="-1">Install npm packages <a class="header-anchor" href="#install-npm-packages" aria-hidden="true">#</a></h3><p>Install the standalone editor and any blocks you want to use:</p><div class="language-ts"><pre><code>npm i <span class="token operator">--</span>save <span class="token decorator"><span class="token at operator">@</span><span class="token function">schlechtenburg</span></span><span class="token operator">/</span>standalone \
|
|
<span class="token decorator"><span class="token at operator">@</span><span class="token function">schlechtenburg</span></span><span class="token operator">/</span>layout \
|
|
<span class="token decorator"><span class="token at operator">@</span><span class="token function">schlechtenburg</span></span><span class="token operator">/</span>heading \
|
|
<span class="token decorator"><span class="token at operator">@</span><span class="token function">schlechtenburg</span></span><span class="token operator">/</span>paragraph
|
|
</code></pre></div><h3 id="initializing-the-editor" tabindex="-1">Initializing the editor <a class="header-anchor" href="#initializing-the-editor" aria-hidden="true">#</a></h3><div class="language-ts"><pre><code><span class="token comment">// Import the initialization function</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> startSchlechtenburg <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@schlechtenburg/standalone'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> SbMode <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@schlechtenburg/core'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// The following are some Schlechtenburg blocks that</span>
|
|
<span class="token comment">// will be available when editing or viewing</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
|
SbLayout<span class="token punctuation">,</span>
|
|
getDefaultData <span class="token keyword">as</span> getEmptyLayoutBlock<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@schlechtenburg/layout'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> SbHeading <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@schlechtenburg/heading'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> SbParagraph <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@schlechtenburg/paragraph'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> SbImage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@schlechtenburg/image'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// This will be our input state</span>
|
|
<span class="token keyword">const</span> emptyLayout <span class="token operator">=</span> <span class="token function">getEmptyLayoutBlock</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// This call initializes the Schlechtenburg editor and viewer.</span>
|
|
<span class="token function">useSchlechtenburg</span><span class="token punctuation">(</span>
|
|
<span class="token comment">// Selector of the element the editor should bind to.</span>
|
|
<span class="token comment">// Can also the an `HTMLElement` reference.</span>
|
|
<span class="token string">'#editor'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token comment">// The input block data</span>
|
|
block<span class="token operator">:</span> emptyLayout<span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Whether Schlechtenburg is in what-you-see (editing)</span>
|
|
<span class="token comment">// or in what-you-get (viewing)</span>
|
|
mode<span class="token operator">:</span> SbMode<span class="token punctuation">.</span>Edit<span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// The list of available blocks in this editor instance</span>
|
|
availableBlocks<span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
SbLayout<span class="token punctuation">,</span>
|
|
SbHeading<span class="token punctuation">,</span>
|
|
SbParagraph<span class="token punctuation">,</span>
|
|
SbImage<span class="token punctuation">,</span>
|
|
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// This callback will be alled any time the block data gets updated</span>
|
|
<span class="token function-variable function">onUpdate</span><span class="token operator">:</span> <span class="token punctuation">(</span>blockData<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Got new block data'</span><span class="token punctuation">,</span> blockData<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// </span>
|
|
<span class="token punctuation">)</span>
|
|
|
|
</code></pre></div><p><strong>Note:</strong> You need to provide both a root node</p><h2 id="you-re-already-using-vue" tabindex="-1">You're already using Vue <a class="header-anchor" href="#you-re-already-using-vue" aria-hidden="true">#</a></h2><h3 id="install-npm-packages-1" tabindex="-1">Install npm packages <a class="header-anchor" href="#install-npm-packages-1" aria-hidden="true">#</a></h3><p>Install the editor core and any blocks you want to use:</p><div class="language-"><pre><code>npm i --save @schlechtenburg/core \
|
|
@schlechtenburg/layout \
|
|
@schlechtenburg/heading \
|
|
@schlechtenburg/paragraph
|
|
</code></pre></div><h3 id="using-the-editor-component" tabindex="-1">Using the editor component <a class="header-anchor" href="#using-the-editor-component" aria-hidden="true">#</a></h3><p>The following example uses TSX, but <code>SbMain</code> is just a Vue component here and can be imported and used just like any other vue component.</p><p>You need to provide a root</p><div class="language-tsx"><pre><code><span class="token comment">// This is the main Schlechtenburg component</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> SbMain <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@schlechtenburg/core'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// The following are some Schlechtenburg blocks that will be available when editing or viewing</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> SbLayout <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@schlechtenburg/layout'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> SbHeading <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@schlechtenburg/heading'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> SbParagraph <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@schlechtenburg/paragraph'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> SbImage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@schlechtenburg/image'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// In your component</span>
|
|
<span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// ..</span>
|
|
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SbMain</span></span>
|
|
<span class="token attr-name">availableBlocks</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
|
SbLayout<span class="token punctuation">,</span>
|
|
SbHeading<span class="token punctuation">,</span>
|
|
SbParagraph<span class="token punctuation">,</span>
|
|
SbImage<span class="token punctuation">,</span>
|
|
<span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
|
<span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div></div></div><footer class="page-footer" data-v-7eddb2c4 data-v-07c132fc><div class="edit" data-v-07c132fc><div class="edit-link" data-v-07c132fc data-v-1ed99556><!----></div></div><div class="updated" data-v-07c132fc><!----></div></footer><div class="next-and-prev-link" data-v-7eddb2c4 data-v-38ede35f><div class="container" data-v-38ede35f><div class="prev" data-v-38ede35f><a class="link" href="/schlechtenburg/guide/why" data-v-38ede35f><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f>Why Schlechtenburg?</span></a></div><div class="next" data-v-38ede35f><a class="link" href="/schlechtenburg/guide/examples" data-v-38ede35f><span class="text" data-v-38ede35f>Examples</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
|
|
<script>__VP_HASH_MAP__ = JSON.parse("{\"api_@schlechtenburg_core.md\":\"4063a713\",\"api_@schlechtenburg_heading.md\":\"ed89ddd1\",\"api_@schlechtenburg_image.md\":\"8d0d9fd9\",\"api_@schlechtenburg_layout.md\":\"1da56817\",\"api_@schlechtenburg_paragraph.md\":\"8709c1d7\",\"api_@schlechtenburg_standalone.md\":\"230a9366\",\"guide_examples.md\":\"f568382d\",\"guide_installation.md\":\"491f5af1\",\"guide_why.md\":\"1cac0594\",\"index.md\":\"3edeae7e\"}")</script>
|
|
<script type="module" async src="/schlechtenburg/assets/app.d1307649.js"></script>
|
|
|
|
</body>
|
|
</html> |