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

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

This package is still active as of now.

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 { CkeditorPlugin } from '@ckeditor/ckeditor5-vue';
app.use(CkeditorPlugin)

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} />