vue cli4整合CKEditor5

最简单集成

---

npm install --save @ckeditor/ckeditor5-vue

  以下5选一即可不同样式的编辑器

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

             示例：https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html

• npm install --save @ckeditor/ckeditor5-build-inline

             示例：https://ckeditor.com/docs/ckeditor5/latest/examples/builds/inline-editor.html

• npm install --save @ckeditor/ckeditor5-build-balloon

             示例：https://ckeditor.com/docs/ckeditor5/latest/examples/builds/balloon-block-editor.html

• npm install --save @ckeditor/ckeditor5-build-balloon-block

             示例：https://ckeditor.com/docs/ckeditor5/latest/examples/builds/balloon-editor.html

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

             示例： https://ckeditor.com/docs/ckeditor5/latest/examples/builds/document-editor.html

注：大部分情况下ckeditor5-build-classic（精简版）和ckeditor5-build-decoupled-document（功能比较齐全）就可以满足需求

封装组件

---

1. 以经典文档编辑器为例子

<template>
  <div>
    <ckeditor :editor="editor" v-model="content" :config="editorConfig" />
  </div>
</template>

<script>
import CKEditor from "@ckeditor/ckeditor5-vue";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn' 
export default {
  name: "Editor",
  components: {
    ckeditor: CKEditor.component
  },
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "请输入内容"
    }
  },
  created() {
    this.content = this.value;
  },
  watch: {
    value(val) {
      if (val && val !== this.content) {
        this.content = this.value;
      }
    },
    content(val) {
      if (val && val !== this.value) {
        this.$emit("change", val);
      }
    }
  },
  data() {
    return {
      editor: ClassicEditor,
      content: "",
      editorConfig: {
        language: 'zh-cn',  // 中文
        placeholder: this.placeholder
      }
    };
  }
};
</script>
<style scoped>
// 穿透 css,sass 使用 >>> less使用 /deep/
>>> .ck-content {
  min-height: 450px;
}
</style>

注： ckeditor5-build-classic编辑器不能添加其它插件例如图片（居右，居中，居左），代码块，office粘贴，缩进等。只能添加自定义文件上传插件。

2. 以文档编辑器为例子

<template>
  <div>
    <ckeditor :editor="editor" @ready="onReady" v-model="content" :config="editorConfig" />
  </div>
</template>

<script>
import CKEditor from "@ckeditor/ckeditor5-vue";
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'; 
export default {
  name: "Editor",
  components: {
    ckeditor: CKEditor.component
  },
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "请输入内容"
    }
  },
  created() {
    this.content = this.value;
  },
  watch: {
    value(val) {
      if (val && val !== this.content) {
        this.content = this.value;
      }
    },
    content(val) {
      if (val && val !== this.value) {
        this.$emit("change", val);
      }
    }
  },
  data() {
    return {
      editor: DecoupledEditor ,
      content: "",
      editorConfig: {
        language: 'zh-cn',  // 中文
        placeholder: this.placeholder
      }
    };
  },
  methods: {
   onReady( editor )  {
      editor.ui.getEditableElement().parentElement.insertBefore(
       editor.ui.view.toolbar.element,
       editor.ui.getEditableElement()
      );
     }
   }
};
</script>
<style scoped>
// 穿透 css,sass 使用 >>> less使用 /deep/
>>> .ck-content {
  min-height: 450px;
}
</style>

   如果你还需添加其它功能（ckeditor5-build-decoupled-document默认带很多插件，但有些插件也没有例如控制图片大小）

   示例添加图片排版（居中，居右，居左）

   注：图片大小ckeditor5-build-decoupled-document不支持，参考后面的扩展插件编辑器

<template>
  <div>
    <ckeditor :editor="editor" @ready="onReady" v-model="content" :config="editorConfig" />
  </div>
</template>

<script>
import CKEditor from "@ckeditor/ckeditor5-vue";
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'; 
export default {
  name: "Editor",
  components: {
    ckeditor: CKEditor.component
  },
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "请输入内容"
    }
  },
  created() {
    this.content = this.value;
  },
  watch: {
    value(val) {
      if (val && val !== this.content) {
        this.content = this.value;
      }
    },
    content(val) {
      if (val && val !== this.value) {
        this.$emit("change", val);
      }
    }
  },
  data() {
    return {
      editor: DecoupledEditor ,
      content: "",
      editorConfig: {
        language: 'zh-cn',  // 中文
        placeholder: this.placeholder,
        image: {
          toolbar: [
            "imageTextAlternative",
            "|",
            "imageStyle:alignLeft",
            "imageStyle:full",
            "imageStyle:alignRight"
          ],
          styles: ["full", "alignLeft", "alignRight"]
        },
        toolbar: [
          "heading",
          "|",
          "alignment",
          "bold",
          "italic",
          "link",
          "imageUpload",
          "undo",
          "redo"
        ]
      }
      }
    };
  },
  methods: {
   onReady( editor )  {
      editor.ui.getEditableElement().parentElement.insertBefore(
       editor.ui.view.toolbar.element,
       editor.ui.getEditableElement()
      );
     }
   }
};
</script>
<style scoped>
// 穿透 css,sass 使用 >>> less使用 /deep/
>>> .ck-content {
  min-height: 450px;
}
</style>

   还可以添加字体，大小等功能，其它功能参考官方示例https://ckeditor.com/docs/ckeditor5/latest/features/index.html

  注意：ckeditor5-build-decoupled-document是不需要额外任何npm下载插件，无法使用就是不支持此功能（例如图片大小），      大部分支功能持。如果想使用参考后面的扩展插件编辑器，ckeditor5-build-decoupled-document是无法使用的。

 例如再添加一个水平线功能 https://ckeditor.com/docs/ckeditor5/latest/features/horizontal-line.html

 horizontalLine 功能添加到toolbar即可

export default {
  data() {
    return {
      editor: DecoupledEditor ,
      content: "",
      editorConfig: {
        language: 'zh-cn',  // 中文
        placeholder: this.placeholder,
        image: {
          toolbar: [
            "imageTextAlternative",
            "|",
            "imageStyle:alignLeft",
            "imageStyle:full",
            "imageStyle:alignRight"
          ],
          styles: ["full", "alignLeft", "alignRight"]
        },
        toolbar: [
          "heading",
          "|",
          "alignment",
          "bold",
          "italic",
          "link",
          "imageUpload",
          "undo",
          "redo",
          "horizontalLine"
        ]
      }
      }
    };
  }
};

使用 

---

<template>
  <div>
  <Editor  v-model="richText"></Editor>
  </div>
</template>
<script>
//导入封装的组件
import Editor from "./Editor";
export default {
  components: {
    Editor
  },
  data() {
    return {
      richText: ""
    };
  }
}
</script>

文件上传

---

  1.新建js文件CustomUpload.js

   注：如果有header或token添加到axios中

import axios from "axios";
export default class CustomUploadAdapter {
  constructor(loader) {
    this.loader = loader;
  }
  upload() {
    return this.loader.file.then(file => {
      const formData = new FormData();
      formData.append("file", file);
      return axios.post("/upload", formData).then(response => {
        if (response.status === 200) {
          const data = response.data;
           // data值为：{ default: 'http://example.com/images/image.png' }
          return Promise.resolve(data);
        }
      });
    });
  }
}

 后端返回 json 格式  { default: 'http://example.com/images/image.png' }

  2.新建CustomUploadPlugin.js

//导入上面js文件
import CustomUploadAdapter from "./CustomUpload";
const CustomUploadPlugin = editor => {
  editor.plugins.get("FileRepository").createUploadAdapter = loader => {
    return new CustomUploadAdapter(loader);
  };
};
export default CustomUploadPlugin;

3.添加插件

  注：CKEditor任何编辑器都支持此文件上传

  base64使用 参考 Base64 upload adapter - CKEditor 5 Documentation

import CustomUploadPlugin from "./CustomUploadPlugin";
export default {
  data() {
    return {
      editor: Editor,
      content: "",
      editorConfig: {
        language: 'zh-cn',  // 中文
        placeholder: this.placeholder,
        extraPlugins: [ CustomUploadPlugin ]
        }
      }
    };
  }
};

扩展插件编辑器（可自定义功能）

---

参考：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#configuring-vueconfigjs

按照官方配置即可（写了一个小时，肝不动了）

请注意包不同，使用的是@ckeditor/ckeditor5-editor-classic ，不是@ckeditor/ckeditor5-build-classic