VUE中使用ckeditor-5 一个富文本插件

首先需要安装ckeditor-5

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

然后，在main.js中：

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

再次，进行组件化，新建一个ckeditor.vue文件:

<template>
  <div class="hello">
      <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
export default {
  name: 'HelloWorld',
  data () {
     return {
      editor: ClassicEditor,
      editorData: '<p>Content of the editor.</p>',
      editorConfig: {
        removePlugins: ['MediaEmbed'], //除去视频按钮
        language: 'zh-cn',//中文包
        ckfinder: {
          'uploaded': 1,
          'url': '/'
          // 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
       },
        toolbar: [ 
          'heading',//段落
          '|',//分隔
          'bold',//加粗
          'italic',//倾斜
          'link', //超链接
          'bulletedList', //项目列表
          'numberedList', //编号列表
          'blockQuote',//块引用
          'undo', //撤销
          'redo',//重做
          'imageStyle:full', //图片通栏显示
          'imageStyle:side', //图片侧边显示
          'imageTextAlternative',//更换图片替换文本
          'imageUpload',//插入图像
        ],//工具栏显示
          }
        }
      }
    }
</script>

<style scoped>

</style>

经典效果如下：

image.png

下面是document模式

    <template>
    <div>
        <ckeditor style="min-height: 200px; max-height: 620px; border: 1px solid #ccc;" :editor="editor"
                  @ready="onReady" :value="contentData" @input="$emit('input',$event)"
                  :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
    import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'
    import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';

    export default {
        name: "V5",
        model: {
            prop: "content",
            event: "input"
        },
        props: {
            // content: {
            //     required: true,
            //     type: String,
            //     default() {
            //         return ''
            //     }
            // },
            uploadImgHook: {
                type: Function,
                default() {
                    return () => {
                        console.error("undefined uploadImg Hook")
                    }
                }
            }
        },
        computed: {
            contentData() {
                return this.content
            }
        },
        data() {
            return {
                editor: DecoupledEditor,
                //contentData:this.content,
                editorConfig: {
                    language: "zh-cn",
                    fontSize: {
                        options: [8, 10, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 32, 48]
                    },
                    fontFamily: {
                        options: ["宋体", "仿宋", "微软雅黑", "黑体", "仿宋_GB2312", "楷体", "隶书", "幼圆"]
                    }
                }

            }
        },
        methods: {
            onReady(editor) {
                // Insert the toolbar before the editable area.
                editor.ui.getEditableElement().parentElement.insertBefore(
                    editor.ui.view.toolbar.element,
                    editor.ui.getEditableElement()
                );
                editor.plugins.get('FileRepository').createUploadAdapter = loader => {
                    //let val = editor.getData();
                    return {
                        upload: async () => {
                            return await loader.file.then(f => {
                                const F = new FileReader();
                                F.readAsArrayBuffer(f);
                                console.log(f)
                                return new Promise(resolve => {
                                    F.onload = function () {
                                        resolve({bufAsArray: F.result, file: f})
                                    };
                                })
                            }).then(v => {
                                //执行上传上传
                                return this.uploadImgHook(v)
                                //返回标准格式
                                /*return {
                                    default: 'http://mmcl.maoming.gov.cn/ys/css/img/BG.png'
                                }*/
                            });

                        }
                    }
                };
            }
        }
    }
</script>

<style scoped>

</style>

效果如下：

image.png

最后，推荐一个小编平时看小说的公众号，喜欢看小说的朋友可以关注一下~~

富蓝春.jpg