2022-03-17 17:59:51 +00:00
<!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" >
2022-03-17 18:09:14 +00:00
< link rel = "stylesheet" href = "/schlechtenburg/assets/style.a7ab32f9.css" >
2022-03-22 20:56:45 +00:00
< link rel = "modulepreload" href = "/schlechtenburg/assets/app.d1307649.js" >
< link rel = "modulepreload" href = "/schlechtenburg/assets/guide_installation.md.491f5af1.lean.js" >
2022-03-17 17:59:51 +00:00
< meta name = "twitter:title" content = "Installation | Schlechtenburg" >
< meta property = "og:title" content = "Installation | Schlechtenburg" >
< / head >
< body >
2022-03-22 20:56:45 +00:00
< 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-56bf3
< 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 \
2022-03-17 17:59:51 +00:00
@schlechtenburg/layout \
@schlechtenburg/heading \
@schlechtenburg/paragraph
2022-03-22 20:56:45 +00:00
< / 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 >
2022-03-17 17:59:51 +00:00
< / body >
< / html >
