vue + ueditor+ kityformula使用

最近项目中要求富文本能插入方差的数学公式，例如平面度 ▱、平行度 // ，为满足客户要求，在网上一顿查找资料，发现ueditor结合kityformula满足要求

准备工作

1. ueditor下载，并放在public/ueditor目录下，注意我是VUE3

2. kityformula下载放在public/ueditor/
   

3. vue-ueditor-wrap 安装

npm i vue-ueditor-wrap

4. 在页面引入 vue-ueditor-wrap，并注册组件
   
   

5. 页面使用，并在data中添加配置

editorConfig:{
        // 你的UEditor资源存放的路径,相对于打包后的index.html
        UEDITOR_HOME_URL: "/UEditor/",
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: "80%",
        // 关闭自动保存
        enableAutoSave: false,
        // 解决弹框中使用富文本被遮盖的问题
         zIndex: 99999,
        // 自定义工具栏，需要额外选项可以参考ueditor.config.js
        toolbars: [
          [
            "fullscreen",
            "source",
            "|",
            "bold",
            "italic",
            "underline",
            "|",
            "fontsize",
            "fontfamily",
            "|",
            "kityformula",
            "preview",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "|"
          ]
        ]
      }

6. 在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>
  <script src="./ueditor/kityformula-plugin/addKityFormulaDialog.js"></script>
  <script src="./ueditor/kityformula-plugin/getKfContent.js"></script>
  <script src="./ueditor/kityformula-plugin/defaultFilterFix.js"></script>

至此，可以正常运行

如需扩展字符，请继续向下看

1. 打开kity-formula-render.all.js文件，找到 如下代码，在map中加入flatness: “▱”,

   /*!
 1. 字体主文件
 */
    _p[29] = {
        value: function() {
            return {
                meta: {
                    fontFamily: 'KF AMS MAIN',
                    src: 'KF_AMS_MAIN.woff'
                },
                map: {

2. 修改 assets/images/toolbar/char.png 文件，将自己需要的图标加上去，这里需要一点点的ps功力
3. 在kityformula-editor.all.min.js文件， 找到b[30],将如下代码填进去，z、y表示坐标，需要自己计算

 '\\flatness': {
                    x: 1041,
                    y: 407
                },

3.搜索’blacksquare‘ 并在后面加上’flatness‘

现在我们的字符▱ 就被加上去了。

阶段性结束，准备休息了

结果项目经理又说太丑了，公式生成的图片太大了，我一看确实是丑，接着改吧
修改文件：kityformula-plugin/kityformula/js/kityformula-editor.all.min.js
查找 padding:[20,50],改为pading:[2,5]
这样一看，嗯舒服多了