ckeditor+vue 傻瓜式操作教程

昨天看过很多ckeditor 教程,总结了一下用插件最简单的步骤(公司项目用到的是数学公式)

步骤一:在线配置ckeditor,最后下载后复制到项目

步骤二: 新建一个ckeditor 组件,在组件里导入 /bulid/ckeditor 下的js文件,我放到public 目录下了

<template>
    <div>
        <textarea name="" id="editor" cols="30" rows="10"></textarea>
    </div>
</template>

import ClassicEditor from "../../public/ckeditor5/build/ckeditor.js";

 

步骤三:注意我选的是classic ,我只加了一个mathtype 插件

mounted() {
    this.createEditor();
  },
  methods: {
    createEditor() {
      ClassicEditor.create(document.querySelector("#editor"), {
        toolbar: {
          items: [
            "heading",
            "|",
            "bold",
            "italic",
            "link",
            "bulletedList",
            "numberedList",
            "|",
            "indent",
            "outdent",
            "|",
            "imageUpload",
            "blockQuote",
            "insertTable",
            "mediaEmbed",
            "undo",
            "redo",
            "MathType",
            "ChemType",
          ],
        },
        language: "zh",
        image: {
          toolbar: [
            "imageTextAlternative",
            "imageStyle:full",
            "imageStyle:side",
          ],
        },
        table: {
          contentToolbar: ["tableColumn", "tableRow", "mergeTableCells"],
        },
        licenseKey: "",
      })
        .then((editor) => {
          window.editor = editor;
        })
        .catch((error) => {
          console.error("Oops, something went wrong!");
          console.error(
            "Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:"
          );
          console.warn("Build id: 2pu9uzzfx0w7-4myfewwpqu4u");
          console.error(error);
        });
    },
  },

步骤四:在用到的页面导用子组件(editor)

 

加载速度比较慢,后期优化一下

新人写,水平有限,大佬勿喷