Vue + 富文本编辑器 编辑数学公式

在 Vue webpack 项目中,在富文本编辑器中嵌入可编辑的数学公式

0 创建Vue webpack 项目

## cli2.0
vue init formula-editor

或者

## cli3.0+
vue create formula-editor

(由于我的是cli4.x, 所以我用了vue create 来创建项目)

该实验项目结构如下：

微信截图_20200620004556.png

1 搜索一些相关

1. 网上比较流行的 UEditor

2. UEditor 公式插件

3. vue-ueditor-wrap 百度富文本编辑器组件

2 准备搞起

有了前面的准备, 接下来就是把东西整合起来。

1. 下载 UEditor (下载jsp版本即可)
   
   微信截图_20200620004213.png

然后将其解压放在 public/UEditor/目录下，如下截图：

微信截图_20200620005606.png

2. 下载 UEditor 公式插件
   
   微信截图_20200620004314.png
   
   解压放在 public/UEditor/ 内，如下截图：
   
   微信截图_20200620005945.png
3. 安装 vue-ueditor-wrap

npm i vue-ueditor-wrap

# 或者 

yarn add vue-ueditor-wrap

3 编写代码

1. 在我们需要编写代码的页面 导入 vue-ueditor-wrap

我们在提供的 view/About.vue 下来编写代码。

修改前:

修改后：

2. 在public/index.html 加载静态资源

   
   
   微信截图_20200620012514.png

4 运行测试

1. npm install

2. npm run serve

3. 浏览器查看

微信截图_20200620013329.png

微信截图_20200620013701.png

微信截图_20200620013758.png

5 更多操作

本次只是粗浅学习使用,更多复杂操作,请查看相关文档 https://www.npmjs.com/package/vue-ueditor-wrap

Reference

1. http://ueditor.baidu.com/website/download.html
2. http://ueditor.baidu.com/website/kityformula.html
3. https://www.npmjs.com/package/vue-ueditor-wrap