vue中使用ckeditor5.0

1、安装

npm install --save @ckeditor/ckeditor5-build-decoupled-document

2、使用

// ck富文本编辑器
import CKEditor from '@ckeditor/ckeditor5-vue';
Vue.use(CKEditor);

3、在需要使用富文本的地方

1、头部引入
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn.js';
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
2、data中
// 富文本相关配置------start------
      editorData: '', // 富文本绑定值
      editor: DecoupledEditor,
      editorConfig: {
        removePlugins: ['MediaEmbed', 'FontFamily', 'Strikethrough', 'Highlight', 'List', 'Link', 'Table', 'BlockQuote'],
        toolbar: [
          'heading',
          '|',
          'bold',
          'italic',
          'Underline',
          'fontSize',
          '|',
          'alignment:left',
          'alignment:right',
          'alignment:center',
          'alignment:justify',
          '|',
          'imageUpload',
          'imageStyle:full',
          'imageStyle:alignLeft',
          'imageStyle:alignRight',
          '|',
          'undo', //撤销
          'redo',//重做
        ],
        heading: {
          options: [
            { model: 'paragraph', title: '12px', class: 'ck-heading_paragraph' },
            { model: 'heading6', view: 'h6', title: '14px', class: 'ck-heading_heading6' },
            { model: 'heading5', view: 'h5', title: '16px', class: 'ck-heading_heading5' },
            { model: 'heading4', view: 'h4', title: '18px', class: 'ck-heading_heading4' },
            { model: 'heading3', view: 'h3', title: '20px', class: 'ck-heading_heading3' },
            { model: 'heading2', view: 'h2', title: '22px', class: 'ck-heading_heading2' },
            { model: 'heading1', view: 'h1', title: '24px', class: 'ck-heading_heading1' }
          ]
        },
        language: "zh-cn",
        fontSize: {
          options: ['default',14, 16, 18, 20, 22, 24]
        },
        ckfinder: {
          uploadUrl: 'Url/cloud/article/oss/file/uplodafile',
        }
      },
      // 富文本相关配置------end------
3、html中
<ckeditor style="height:300px; border: 1px solid #ccc;"
                :editor="editor" @ready="onReady"
                :config="editorConfig"
                :value="editorData"
                v-model="editorData"></ckeditor>
4、methods中
// 富文本配置初始化
    onReady(editor) {
      // Insert the toolbar before the editable area.
      editor.ui.getEditableElement().parentElement.insertBefore(
      editor.ui.view.toolbar.element,
      editor.ui.getEditableElement()
      );
    },

 

4、采坑，做的时候，项目样式初始化将i、strong标签样式改了，导致，富文本中无效果，去掉初始化的样式即可