ckeditor5-custom-build-v5-full v0.0.9

CKEditor 5 editor generated with the online builder

Now we can create a full-featured CKEditor with this npm package and I am the one who provided it below is the package's documentation that can be used to create CKEditor for your VueJS and ReactJS applications

Configuring build

export const CKEConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'imageInsert',
            '|',
            'outdent',
            'indent',
            '|',
            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo',
            'redo',
            'style',
            'superscript',
            'subscript',
            'underline',
            'textPartLanguage',
            'todoList',
            'horizontalLine',
            'pageBreak',
            'removeFormat',
            'selectAll',
            'showBlocks',
            'alignment',
            'sourceEditing',
            'restrictedEditingException',
            'strikethrough',
            'specialCharacters',
            'htmlEmbed',
            'codeBlock',
            'code',
            'findAndReplace',
            'imageInsert',
            'fontFamily',
            'fontBackgroundColor',
            'highlight',
            'fontSize',
            'fontColor'
        ]
    },
    language: 'vi',
    image: {
        toolbar: [
            'imageTextAlternative',
            'toggleImageCaption',
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            'linkImage'
        ]
    },
}

Installation

In order to rebuild the application you need to install all dependencies first. To do it, open the terminal in the project directory and type: Install more libary

For VueJS

npm install @ckeditor/ckeditor5-vue

For ReactJS

npm install @ckeditor/ckeditor5-react

Make sure that you have the node and npm installed first. If not, then follow the instructions on the Node.js documentation page.

In VueJS 3

main.js

import CKEditor from '@ckeditor/ckeditor5-vue';
app.use(CKEditor)

Some Components

<script>
import { CKEConfig } from '../../utils/ckeditorConfig';
import Editor from "ckeditor5-custom-build-v5-full"
export default {
    data(){
        return {
            editorConfig: CKEConfig,
            editor: Editor,
            editorData: '',
        }
    }
}
</script>

<ckeditor :editor="editor" :config="editorConfig" v-model="editorData"></ckeditor>

In ReactJS

import Editor from 'ckeditor5-custom-build-v5-full'
import { CKEditor } from '@ckeditor/ckeditor5-react';
import { CKEConfig } from '../../utils/CkeditorConfig';

const handleChange = (event,editor) => {
    const newContent = editor.getData()
    setSomeStateHere(newContent);
};

<CKEditor onChange={handleChange} data={someStateHere} editor={Editor} config={CKEConfig} />