ckeditor副文本编辑器基础使用

1-安装依赖，个人习惯用一个版本

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

然后下面的直接复制去用就可以

<template>
  <div>
    <!-- 工具栏容器 -->
    <div :id="`${editorId}-toolbar-container`"></div>
    <!-- 编辑器容器 -->
    <div :id="editorId">
    </div>
  </div>
</template>

<script>

  import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document';
  import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn';
  import UploadImageAdapter from './UploadImageAdapter';
  import { setTimeout } from 'timers';

  export default {
    name: 'ckeditor',
    props: {
      value: {
        type: String,
        default: ''
      },
      editorId: {
        type: String,
        default: 'editor'
      }
    },
    data() {
      return {
        editor: null,
        content: ''
      }
    },
    created() {
    },
    mounted(){
      this.initCKEditor()
    },
    computed:{},
    watch: {},
    methods:{
      initCKEditor() {
        CKEditor.create(document.querySelector(`#${this.editorId}`), {
          // plugins: [ ImageResize ],
          toolbar: [
            'heading',
            '|',
            'bold',
            'italic',
            'Underline',
            'fontSize',
            'numberedList',
            'bulletedList',
            'blockQuote',
            '|',
            'alignment:left',
            'alignment:right',
            'alignment:center',
            'alignment:justify',
            '|',
            'imageUpload',
            'Link',
            '|',
            'undo', //撤销
            'redo',//重做
          ],
          heading: {
            options: [
              { model: 'paragraph', title: '段落', class: 'ck-heading_paragraph' },
              { model: 'heading6', view: 'h6', title: '标题6', class: 'ck-heading_heading6' },
              { model: 'heading5', view: 'h5', title: '标题5', class: 'ck-heading_heading5' },
              { model: 'heading4', view: 'h4', title: '标题4', class: 'ck-heading_heading4' },
              { model: 'heading3', view: 'h3', title: '标题3', class: 'ck-heading_heading3' },
              { model: 'heading2', view: 'h2', title: '标题2', class: 'ck-heading_heading2' },
              { model: 'heading1', view: 'h1', title: '标题1', class: 'ck-heading_heading1' }
            ]
          },
          language: 'zh-cn',
          // ckfinder: {
          //   uploadUrl: 'https://upload-z2.qiniup.com'
          //   //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
          // },
          fontSize: {
            options: ['default',14, 16, 18, 20, 22, 24]
          }
        }).then(editor => {
          const toolbarContainer = document.querySelector(`#${`${this.editorId}-toolbar-container`}`);
          toolbarContainer.appendChild(editor.ui.view.toolbar.element);
          this.editor = editor //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
          editor.plugins.get('FileRepository').createUploadAdapter = ( loader ) => {
            //上传图片调用方法
            return new UploadImageAdapter(loader)

          };
          editor.model.document.on('change:data', () => {
            this.content = editor.getData();
          });
          // editor.setData(this.value);
        }).catch(error => {
          console.error(error);
        });
      },
      getContent() {
        return this.content
      },
      setContent(val) {
        this.editor.setData(val || {})
      }
    }
  }
</script>

<style scoped>

  #editor {
    min-height: 380px;
    border: 1px solid #c4c4c4;
  }
  /deep/.ck-content {
    min-height: 380px;
  }
</style>

注意的是，这个上传图片方法需要换你自己公司项目的，定义一个，替换我这个，就可以了，然后是页面引用

 

直接用v-model，参数是响应式的，就是组件里的value，