实现插入公式的富文本框(tinymce+kityformula-editor)

官网:http://tinymce.ax-z.cn/

安装tinymce

https://www.jianshu.com/p/aa01ba44ce99

vue安装tinymce参考链接

在vue2.0+,vuecli3.0+中使用tinymce及实现多图上传,文件上传,公式编辑等功能 - huihuihero - 博客园

tinymce安装后遇见的问题

1、报错failed to fetch dynamically imported module

最后没有按照安装官网步骤在main文件注册,而是直接在使用的地方引用就不会报错

2、报错failed to resolve import 'tinymce/plugins/fullpage' from 'src\components\TEditor.vue'

发现如下插件都会报错

简单粗暴的将这些都注释了

3、报错/models/dom/model.js nre::ERR_ABORTED 404 (NOT FOUND) tinymce.js:4947

解决办法:

在TEditor.vue文件添加如下代码:

import 'tinymce/models/dom/model.js'

4、报错failed to load plugin:template from url plugins/template/plugin.js

因为上面已经注释了相关import文件引入,但是下面plugins没有删除掉

解决办法:将文件中这两个里面,相关注释掉的都删除

5、报错/skins/content/default/content.css 404

修改TEditor.vue如下代码:

引入kityformula-editor实现公式

安装步骤,参考链接:kityformula-editor 数学公式 | TinyMCE中文文档中文手册

下载好压缩包

在node_modules目录中将timymce下plugins文件夹复制粘贴到public->tinymce下

将解压后的 kityformula-editor 包放到里面

TEditor.vue文件调整代码

引入kityformula-editor后出现的问题

1、没有显示公式两字

在index.html中加入如下代码

2、点击公式,打开弹窗报错/plugins/kityformula-editor/kityformula.html 404

修改kityformula-editor文件下的plugin.js和plugin.min.js文件的这行代码

插入的公式会被识别成图片

在kityformula-editor的包里面有个plugin.js、plugin.min.js,他的代码第10行对base64图片双击时进行了字符串格式判断,他判断的是整个字符串是一个img标签,然而我们最终得到的是p标签包裹的img以及其他的元素,所以我们直接把这个if判断去掉就可以了。

复制进去的latex公式无法在编辑框中正确回显为公式

我们

公式创建完成以后保存下来的字符串,回显时无法正确回显(研究发现是data-latex中的\被误认为是转义字符了)

我们在拿到最终生成的字符串值以后,需要对这个字符串处理一下,将字符串中的\都替换为\\以后再上传给服务器。以下两种方案都可以的:

假设最终拿到的公式字符串存为content,

content.split('\\').join('\\\\')

content.replace(/\\/g,'\\\\')

图片不上传,直接使用base64会提示图片上传失败

将init中加入automatic_uploads: false,禁止图片自动上传我们只使用base64记录图片,我们也尝试过万一其他图片需要上传怎么办,后来发现这个base64图片的配置确实会影响到其他正常上传的图片。也就是说要么都用base64,要么都上传到服务器,不过我们肯定是不希望数学公式上传到服务器的,因为我并不需要记录他。

相关推荐
Bs_MoneyMagnet12 小时前
基于springboot+vue的生态果园采摘预约系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·毕业设计·计算机毕业设计
the局外人16 小时前
掌控自己的 K 线数据:TradingView 本地部署与数据源接入
前端·vue.js·websocket
梦诺17 小时前
vue3 keepAlive+记录滚动条
前端·javascript·vue.js
Bs_MoneyMagnet18 小时前
基于springboot+vue的会议室预约管理系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring·毕业设计·计算机毕业设计
Bs_MoneyMagnet18 小时前
基于springboot+vue的茶铺管理系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring·毕业设计·计算机毕业设计
志尊宝19 小时前
Vue3 零基础每日笔记(018):按键与鼠标修饰符——回车搜索、Ctrl+S 保存这样写
javascript·vue.js·笔记
志尊宝21 小时前
Vue3 零基础每日笔记(021):class 与 style 动态绑定——对象、数组、三元表达式写法汇总
前端·vue.js·笔记·前端框架·html5
夏幻灵21 小时前
Vue / React 列表渲染中的 key:为什么没有 key,Checkbox 可能“对号跑错”?
前端·javascript·vue.js
Bs_MoneyMagnet21 小时前
基于springboot+vue的旅游行程分享与推荐小程序的设计与实现 源码+文档
java·vue.js·spring boot·后端·微信小程序·毕业设计·计算机毕业设计
岁岁种桃花儿21 小时前
Vue组件第六篇:Vue单文件组件
开发语言·前端·javascript·vue.js