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

标签: vue.js

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

首先展示一下代码实现后的效果:
在这里插入图片描述

现在我们开始写代码

第一步:我们需要去下载Ueditor官方的包:Ueditor官网
在这里插入图片描述
这里我使用的是 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。 谢谢大家的捧场,这是我第一次发布博客,希望以后能够有越来越多的刁钻的问题研究出来后和大家分享!

版权声明:本文为weixin_44337466原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44337466/article/details/104014967