https://github.com/techlab23/ckeditor5-svelte
ckeditor5 editor component for svelte
https://github.com/techlab23/ckeditor5-svelte
ckeditor5 svelte3 sveltejs
Last synced: 12 months ago
JSON representation
ckeditor5 editor component for svelte
- Host: GitHub
- URL: https://github.com/techlab23/ckeditor5-svelte
- Owner: techlab23
- Created: 2019-07-18T10:16:16.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-06-24T10:25:48.000Z (almost 2 years ago)
- Last Synced: 2025-05-08T21:29:06.436Z (about 1 year ago)
- Topics: ckeditor5, svelte3, sveltejs
- Language: Svelte
- Homepage: https://codesandbox.io/s/ckeditor5-svelte-demo-p2n4w
- Size: 995 KB
- Stars: 21
- Watchers: 1
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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
```bash
$ npm i ckeditor5-svelte
```
### Getting started
#### Create a new svelte project and install dependencies
```bash
npx degit sveltejs/template my-svelte-project
# or download and extract
cd my-svelte-project
# to use Typescript run:
# node scripts/setupTypeScript.js
npm install
```
#### Install ckeditor5-svelte package
```bash
npm i ckeditor5-svelte
```
#### Install DocumentEditor build of ckeditor
```bash
npm i @ckeditor/ckeditor5-build-decoupled-document
```
#### Update App.svelte in your project with the following
```js
import CKEditor from "ckeditor5-svelte";
import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor";
// Setting up editor prop to be sent to wrapper component
let editor = DecoupledEditor;
// Reference to initialised editor instance
let editorInstance = null;
// Setting up any initial data for the editor
let editorData = "Hello World";
// If needed, custom editor config can be passed through to the component
// Uncomment the custom editor config if you need to customise the editor.
// Note: If you don't pass toolbar object then Document editor will use default set of toolbar items.
let editorConfig = {
toolbar: {
items: [
"heading",
"|",
"fontFamily",
"fontSize",
"bold",
"italic",
"underline"
]
}
};
function onReady({ detail: editor }) {
// Insert the toolbar before the editable area.
editorInstance = editor;
editor.ui
.getEditableElement()
.parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
}
```
#### Run your project
```bash
npm run dev
```