【前端】Vue中使用CKeditor作为富文本编辑器

官网https://ckeditor.com/

此处记录一下我在使用的时候具体初始化的代码。

  

    
  


export default {
  name: 'CkEditor',
  data: function () {
    return {
      id: parseInt(Math.random() * 10000).toString(),
      ckeditor: null,
    };
  },
  // 初始化
  mounted: function () {
    const self = this;
    let CKEDITOR = window.CKEDITOR;
    let ckeditor = window.CKEDITOR.replace(self.id, {
      height: 500,
      language: 'en',
      allowedContent: true,
      pasteFilter: null,
      toolbar: [
        {
          name: 'code',
          items: ['Source'],
        },
        {
          name: 'basicstyles',
          items: [
            'Styles',
            '-',
            'Bold',
            'Italic',
            'Strike',
            'Underline',
            'TextColor',
            'BGColor',
            'Font',
            'FontSize',
          ],
        },
        {
          name: 'styles',
          items: ['RemoveFormat'],
        },
        {
          name: 'insert',
          items: ['Table', 'SpecialChar', 'HorizontalRule'],
        },
        '/',
        {
          name: 'paragraph',
          items: [
            'Format',
            'NumberedList',
            'BulletedList',
            '-',
            'Indent',
            'Outdent',
            '-',
            'JustifyLeft',
            'JustifyCenter',
            'JustifyRight',
            'lineheight',
          ],
        },
        {
          name: 'links',
          items: [
            'Link',
            'Unlink',
            '-',
            'Subscribe',
            'Unsubscribe',
            'HtmlTemplate',
          ],
        },
        {
          name: 'document',
          items: ['Undo', 'Redo'],
        },
      ],
    });
    // 处理图片copy、paste
    ckeditor.on('paste', async (evt) => {
      if (evt.data.dataTransfer.getFilesCount() > 0) {
        evt.data.dataValue = '';
        if (evt.data.dataTransfer.getFilesCount()) {
          let file = evt.data.dataTransfer.getFile(0);
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            self.ckeditor.insertHtml(`