ckeditor5,vue使用

项目需求要字体颜色所以直接下载了
npm install --save @ckeditor/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";  //仅在这个页面使用使用不在main是全局引入了
import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";
export default {
  name: "HelloWorld",
    components: {
    ckeditor: CKEditor.component,     
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      editor: DecoupledEditor,
      content: "sssss",
      editorConfig: {
        // language: "zh-cn", // 中文
        placeholder: this.placeholder,
        toolbar: ["bold", "fontColor", "numberedList"],  //l留下加粗,字体颜色,排序
      },
    };
  },
  methods: {
    onReady(editor) {
      editor.ui
        .getEditableElement()
        .parentElement.insertBefore(
          editor.ui.view.toolbar.element,
          editor.ui.getEditableElement()
        );
    },
  },
};

最终效果
在这里插入图片描述


版权声明:本文为weixin_45654209原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。