# CKEditor

CKEditor 组件基于 CKEditor 5 封装,是一款 富文本编辑器;CKEditor 官网

# Props

名称 类型 默认值 说明
value String " " 编辑器的内容. 如果使用 v-model, 不要使用它.
options Object defaultOptions 编辑器 Config 配置.
toolbar Array,Object defaultOptions.toolbar 编辑器的工具栏内容.
language String, Object 'zh-cn' 语言,如果需要其他语言,除了英语,需要自己引入语言
const defaultOptions = {
    toolbar: [
        "heading",
        "|",
        "bold",
        "italic", 
        "link",
        "bulletedList",
        "numberedList",
        "|",
        "indent",
        "outdent",
        "|",
        /* "imageUpload", */
        "blockQuote", 
        "insertTable",
        "mediaEmbed",
        "undo",
        "redo"
    ],
    language: 'zh-cn'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Example

<template>
    <div  class="main-conent main-conent-minheight">        
        <el-card shadow="never" class="border-none">
            <CKEditor v-model="editorData"></CKEditor>
        </el-card>

        <el-card shadow="never" class="border-none"  style="margin-top:4px;">
            <div v-html="editorData"></div>
        </el-card>


    </div>
</template>
<script>
import CKEditor from '@/components/CKEditor';
export default {
    components: {
        CKEditor
    },
    data(){
        return {
            editorData: '<p>Content of the editor.</p>'
        };
    }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 扩展

因为此组件只是简单的基于 @ckeditor/ckeditor5-build-classic 创建,比如 @ckeditor/ckeditor5-build-decoupled-document 中的 字体大小字体颜色下划线 等等, @ckeditor/ckeditor5-build-classic 默认是没有的,有两种扩展方法:

1、卸载 @ckeditor/ckeditor5-build-classic 安装 @ckeditor/ckeditor5-build-decoupled-document

npm uninstall @ckeditor/ckeditor5-build-classic
npm install @ckeditor/ckeditor5-build-decoupled-document
1
2

然后修改组件 CKEditor @ckeditor/ckeditor5-build-classic 替换成 @ckeditor/ckeditor5-build-decoupled-document,就ok了。

2、安装对应的 字体大小字体颜色下划线 等插件;然后在组件 CKEditor修改集成插件即可,如:

npm install --save @ckeditor/ckeditor5-font
1

CKEditor 组件中引入:

import Font from '@ckeditor/ckeditor5-font/src/font';

// 再在 配置中进行配置
const defaultOptions = {
    toolbar: [
        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor',
    ],
    plugins: [ Font, ... ]
}
1
2
3
4
5
6
7
8
9

此样例 CKEditor 官方Demo

TIP

同理,你可以查看 CKEditor 官方文档,进行组件功能的扩展。

# 卸载

如果你不需要此组件,然后代码打包感觉不需要,可以卸载此组件。

1、CMD 运行

npm uninstall @ckeditor/ckeditor5-build-classic
npm uninstall @ckeditor/ckeditor5-vue
1
2

2、删除组件文件目录 CKEditor