ckeditor+vue 傻瓜式操作教程

最新推荐文章于 2025-05-01 02:20:37 发布

抹不去你留下的唇印

最新推荐文章于 2025-05-01 02:20:37 发布

阅读量1k

点赞数 2

分类专栏： vue进阶之路前端工程师养成文章标签： vue.js ckeditor javascript

本文链接：https://blog.youkuaiyun.com/weixin_41839894/article/details/112464524

版权

昨天看过很多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",
            "i