脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue2 wangeditor

vue2使用wangeditor实现数学公式和富文本编辑器

 更新时间：2023年12月12日 09:57:06   作者：请叫我欧皇i  
这篇文章主要为大家详细介绍了vue2如何使用wangeditor实现数学公式和富文本编辑器功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下

需求：

做一个带有数学公式的富文本编辑器，在网上看了很多，这个最合适，借鉴了wangEditor富文本编辑器

这里面写的是v3的整合富文本编辑器，我照着上面改成了v2的，本文章主要是实现步骤和错误解决，源码我放在最后了~

1.效果

2. 需要插件

npm install @wangeditor/editor @wangeditor/editor-for-vue @wangeditor/plugin-formula -S

jquery看自己项目里有没有，没有就下一个

npm install jquery

3.实现

wangEditor官网：用于 Vue React | wangEditor

下载完插件后在所需页面添加如下代码即可实现（不包含数学公式）

<template>
  <div>
    <div>
      <button @click="printEditorHtml">print html</button>
      <button @click="getEditorText">print text</button>
    </div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
      />
      <!-- 编辑器 -->
      <Editor
        style="height: 400px; overflow-y: hidden"
        :defaultConfig="editorConfig"
        v-model="html"
        @onChange="onChange"
        @onCreated="onCreated"
      />
    </div>
    <div style="margin-top: 10px">
      <textarea
        v-model="html"
        readonly
        style="width: 100%; height: 200px; outline: none"
      ></textarea>
    </div>
  </div>
</template>
 
<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 
export default {
  name: "MyEditor",
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "<p>hello world</p>",
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        // autoFocus: false,
 
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {},
      },
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
    },
    getEditorText() {
      const editor = this.editor;
      if (editor == null) return;
 
      console.log(editor.getText()); // 执行 editor API
    },
    printEditorHtml() {
      const editor = this.editor;
      if (editor == null) return;
 
      console.log(editor.getHtml()); // 执行 editor API
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = "<p>Ajax 异步设置内容 HTML</p>";
    }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },
};
</script>
 
<style src="@wangeditor/editor/dist/css/style.css"></style>

3.1加入数学公式

在components文件下添加kityformula.js，内容如下：

注意！！图标地址别写错了，不然图标显示不出来 

constructor里面就是一些基本的配置

import $ from "jquery";
import { formulaIcon } from "../assets/icons/svg-icon.ts";
 
class MyKityFormulaMenu {
  constructor() {
    this.title = "编辑公式";
    this.iconSvg = formulaIcon;
    this.tag = "button";
    this.showModal = true;
    this.modalWidth = 900;
    this.modalHeight = 400;
  }
 
  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    return false;
  }
 
  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    return "";
  }
 
  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    return false;
  }
  // 点击菜单时触发的函数
  exec(editor, value) {
    // Modal menu ，这个函数不用写，空着即可
  }
 
  // 弹出框 modal 的定位：1. 返回某一个 SlateNode； 2. 返回 null （根据当前选区自动定位）
  getModalPositionNode(editor) {
    return null; // modal 依据选区定位
  }
 
  // 定义 modal 内部的 DOM Element
  getModalContentElem(editor) {
    // panel 中需要用到的id
    const inputIFrameId = "kityformula_" + Math.ceil(Math.random() * 10);
    const btnOkId = "kityformula-btn" + Math.ceil(Math.random() * 10);
 
    const $content = $(`
    <div>
      <iframe id="${inputIFrameId}" class="iframe" height="400px" width="100%" frameborder="0" scrolling="no" src="/kityformula/index.html"></iframe>
    </div>`);
    const $button = $(
      `<button id="${btnOkId}" class="right" style='margin: 5px 0'>
        确认插入
      </button>`
    );
    $content.append($button);
 
    $button.on("click", () => {
      // 执行插入公式
      const node = document.getElementById(inputIFrameId);
      const kfe = node.contentWindow.kfe;
 
      kfe.execCommand("get.image.data", function (data) {
        // 获取base64
        // console.log(data.img);
      });
 
      let latex = kfe.execCommand("get.source");
      latex = latex.replace(/\s/g, ""); // 去掉空格
 
      const formulaNode = {
        type: "paragraph",
        children: [
          {
            type: "formula",
            value: latex,
            children: [
              {
                text: "",
              },
            ],
          },
        ],
      };
      console.log(editor, '编辑器');
      editor.insertNode(formulaNode);
      editor.hidePanelOrModal();
    });
 
    return $content[0]; // 返回 DOM Element 类型
 
    // PS：也可以把 $content 缓存下来，这样不用每次重复创建、重复绑定事件，优化性能
  }
}
const menuConf = {
  key: "kityFormula", // menu key ，唯一。注册之后，需通过 toolbarKeys 配置到工具栏
  factory() {
    return new MyKityFormulaMenu();
  },
};
 
export default menuConf;

代码讲解：content就是数学公式弹窗，点击确认插入之后会添加节点在编辑器内

   const $content = $(`
    <div>
      <iframe id="${inputIFrameId}" class="iframe" height="400px" width="100%" frameborder="0" scrolling="no" src="/kityformula/index.html"></iframe>
    </div>`);
    const $button = $(
      `<button id="${btnOkId}" class="right" style='margin: 5px 0'>
        确认插入
      </button>`
    );

3.2在pulic文件下添加数学公式相关代码

3.3主要页面代码讲解

这个代码意思就是插入注册，添加到编辑器当中

import kityformula from "@/components/kityformula";
import { Boot } from "@wangeditor/editor";
 
   toolbarConfig: {
        // 插入编辑公式菜单
        insertKeys: {
          index: 0,
          keys: [
            "kityFormula", // “编辑公式”菜单
          ],
        },
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
  created() {
    Boot.registerMenu(kityformula);
  },

3.4解决编辑完成数学公式后内容没插入编辑器bug

意思就是写完了数学公式后没反应，内容没添加进编辑器当中

解决如下：

import formulaModule from "@wangeditor/plugin-formula";
import { Boot } from "@wangeditor/editor";
  created() {
    Boot.registerModule(formulaModule);
  },

此时再次运行会报错：

Module not found: Error: Can't resolve 'katex' in xxx

解决：

下载这个，默认下载最新版5.1.0，下载完成后就不会报错

npm install myscript-math-web

3.5完整页面代码

<template>
  <div class="content-box">
    <div class="container" style="width: 1000px; margin: 0 auto">
      <div>
        <button @click="printEditorHtml">获取编辑器html</button>
        <button @click="getEditorText">获取编辑器文本</button>
      </div>
      <div style="border: 1px solid #ccc; margin-top: 10px; text-align: left">
        <!-- 工具栏 -->
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
        />
        <!-- 编辑器 -->
        <Editor
          style="height: 500px; overflow-y: hidden"
          :defaultConfig="editorConfig"
          v-model="html"
          @onChange="onChange"
          @onCreated="onCreated"
          @onFocus="handleFocus"
        />
      </div>
      <div style="margin-top: 10px">
        <textarea
          v-model="html"
          readonly
          style="width: 100%; height: 200px; outline: none"
        ></textarea>
      </div>
    </div>
  </div>
</template>
 
<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import kityformula from "@/components/kityformula";
import { Boot } from "@wangeditor/editor";
import formulaModule from "@wangeditor/plugin-formula";
export default {
  name: "MyEditor",
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "<p>hello&nbsp;world</p>",
      toolbarConfig: {
        // 插入编辑公式菜单
        insertKeys: {
          index: 0,
          keys: [
            "kityFormula", // “编辑公式”菜单
          ],
        },
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        // autoFocus: false,
 
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {},
      },
    };
  },
  methods: {
    onCreated(editor) {
      console.log("created", editor);
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
    },
    handleFocus(editor) {
      console.log("focus", editor);
    },
    getEditorText() {
      const editor = this.editor;
      if (editor == null) return;
 
      console.log(editor.getText()); // 执行 editor API
    },
    printEditorHtml() {
      const editor = this.editor;
      if (editor == null) return;
 
      console.log(editor.getHtml()); // 执行 editor API
    },
  },
  created() {
    Boot.registerMenu(kityformula);
    Boot.registerModule(formulaModule);
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = "<p>Ajax 异步设置内容 HTML</p>";
    }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },
};
</script>
 
<style src="@wangeditor/editor/dist/css/style.css"></style>

以上就是vue2使用wangeditor实现数学公式和富文本编辑器的详细内容，更多关于vue2 wangeditor的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue进行post和get请求实例讲解

    vue进行post和get请求实例讲解

    这篇文章主要介绍了vue进行post和get请求实例讲解，违章围绕post和get请求的相关资料展开详细内容，具有一的的参考价值，需要的小伙伴可以参考一下
    2022-03-03
  • Vue el-menu 左侧菜单导航功能的实现

    Vue el-menu 左侧菜单导航功能的实现

    这篇文章主要介绍了Vue el-menu 左侧菜单导航功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 使用vue.js在页面内组件监听scroll事件的方法

    使用vue.js在页面内组件监听scroll事件的方法

    今天小编就为大家分享一篇使用vue.js在页面内组件监听scroll事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue 设置路由的登录权限的方法

    vue 设置路由的登录权限的方法

    这篇文章主要介绍了vue 设置路由的登录权限的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • vue中echarts关系图动态增删节点以及连线方式

    vue中echarts关系图动态增删节点以及连线方式

    这篇文章主要介绍了vue中echarts关系图动态增删节点以及连线方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • Vue路由参数的传递与获取方式详细介绍

    Vue路由参数的传递与获取方式详细介绍

    顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析
    2022-09-09
  • vue路由的配置和页面切换详解

    vue路由的配置和页面切换详解

    这篇文章主要给大家介绍了关于vue路由的配置和页面切换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Vue.js实现表格渲染的方法

    Vue.js实现表格渲染的方法

    今天小编就为大家分享一篇对Vue.js实现表格渲染的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Nuxt不同环境如何区分的方法

    Nuxt不同环境如何区分的方法

    在一般情况下，我们的项目肯定需要区分不同环境，那么Nuxt提供给我们这样的基本能力了么，下面我们就一起来了解一下
    2021-05-05
  • vue项目中的.env文件加载方式

    vue项目中的.env文件加载方式

    在Vue项目中,通过.env文件配置环境变量,支持不同环境下加载不同配置,Vite通过import.meta.env向应用暴露环境变量,支持基本URL、开发环境和生产环境识别等,.env文件可设置环境优先级,修改后需重启生效,TypeScript可通过增加文件获取智能提示
    2024-10-10

最新评论