UEditor +数学公式+ Vue+ Kityformula 富文本编辑器嵌入数学公式的实现

UEditor +数学公式+ Vue + Kityformula 富文本编辑器嵌入数学公式的实现

首先展示一下代码实现后的效果：

现在我们开始写代码

第一步：我们需要去下载Ueditor官方的包：Ueditor官网
官网好像不维护了，这边更新一下下载方式，请到我的github里下载一下https://github.com/Nice-C/UEditor.git

这里我使用的是 VUE 所以我选择这个jsp UTF-8的版本 下载下来之后解压，如果你是用的是vue-cli 2的话，将解压后的文件夹放在static目录下： static/UEditor/，如果是cli3 或者4 就将解压后的文件夹放在public目录下： public/UEditor/ 。但是在我的项目中我使用的实vue-cli 4 ，所以下面的演示，以我的项目例子为主 。

第二步：我们进行安装插件 vue-ueditor-wrap，使用命令行

npm install --save vue-ueditor-wrap

第三步：安装完成之后我们开始在页面使用

1. 引入

import VueUeditorWrap from 'vue-ueditor-wrap'

2.配置

  myConfig: {
          // 如果需要上传功能,找后端小伙伴要服务器接口地址
          serverUrl: 'http://35.201.165.105:8000/controller.php',
          // 你的UEditor资源存放的路径,相对于打包后的index.html
          UEDITOR_HOME_URL: '/UEditor/',
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 600,
          // 初始容器宽度
          initialFrameWidth: '85%',
          // 关闭自动保存
          enableAutoSave: false,
          // 自定义工具栏，需要额外选项可以参考ueditor.config.js
          toolbars: [
            [
              'fullscreen', 'source', '|',
              'bold', 'italic', 'underline', '|', 'fontsize', 'fontfamily', '|', 'kityformula', 'preview', '|',
              'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
            ]
          ]
        },

在public文件夹下的index.html里进行静态资源引入

 <script type="text/javascript" charset="utf-8" src="./UEditor/ueditor.config.js"></script>
 <script type="text/javascript" charset="utf-8" src="./UEditor/ueditor.all.min.js"></script>

3. 组件调用

    <vue-ueditor-wrap v-model="context" :config="myConfig"></vue-ueditor-wrap>

这里我们就已经完全的引入和使用了UEditor了，那接下来就是怎么引入公式编辑功能。
第一步：同样是要去官网下载插件包 kityformula公式插件
第二步：将下载下来的压缩包解压放到放在public目录下的UEditor目录下： public/UEditor/kityformula-plugin。

第三步：首先要在public文件夹下的index.html里进行静态资源引入（上面的截图其实已经有了），然后回到页面的Vue 文件夹，在配置里加上"kityformula" ,其实在上面的代码都已经有了。

 <script type="text/javascript" charset="utf-8" src="./UEditor/kityformula-plugin/addKityFormulaDialog.js">
  </script>
  <script type="text/javascript" charset="utf-8" src="./UEditor/kityformula-plugin/getKfContent.js"></script>
  <script type="text/javascript" charset="utf-8" src="./UEditor/kityformula-plugin/defaultFilterFix.js"></script>

然后我们就可以使用啦，这个UEditor + kityformula + Vue 我也是摸索了好久各种踩坑，各种借鉴，又由于我使用的是vue-cli 4 所以我找了很多个网站 还有找了github上的一个例子，还跟那个博主发了邮件，开了个issue。 谢谢大家的捧场，这是我第一次发布博客，希望以后能够有越来越多的刁钻的问题研究出来后和大家分享！