CKEditor5 editor component for Svelte 3
This component is a thin wrapper around ckeditor5 document editor.
Below are the set of instructions to create svelte project, install component and a basic setup with CKEditor DocumentEditor build.
How to install package
$ npm i ckeditor5-svelte
Getting started
Create a new svelte project and install dependencies
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
Install ckeditor5-svelte package
npm i ckeditor5-svelte
Install DocumentEditor build of ckeditor
npm i @ckeditor/ckeditor5-build-decoupled-document
Update App.svelte in your project with the following
<script>
import CKEditor from "ckeditor5-svelte";
import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor";
let editor = DecoupledEditor;
let editorInstance = null;
let editorData = "Hello World";
let editorConfig = {
toolbar: {
items: [
"heading",
"|",
"fontFamily",
"fontSize",
"bold",
"italic",
"underline"
]
}
};
function onReady({ detail: editor }) {
editorInstance = editor;
editor.ui
.getEditableElement()
.parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
}
</script>
<style>
</style>
<main>
<div>
<CKEditor
bind:editor
on:ready={onReady}
bind:config={editorConfig}
bind:value={editorData} />
</div>
</main>
Run your project
npm run dev