ckeditor4 +Wiris MathType + Mathjax 渲染 + Tax 公式编辑
2024-04-29 12:34:16
文章目录
- vue使用ckeditor4
- 下载ckeditor
- 封装ckeditor组件
- ckeditor4保留空白标签及添加自定义样式
- ckeditor4中添加Wiris MathType插件
- 下载Wiris
- 配置Wiris插件
- Mathjax 渲染
- 引入 js 插件
- 封装mathjax
- 应用mathjax
- Tax 公式编辑
vue使用ckeditor4
- 官网：https://ckeditor.com/ckeditor-4/
-为什么选择4，看了官方文档后发现图片处理的方式还是4更贴近我们的项目 - ps：做的过程中发现ckeditor可以添加一些插件，或许5可以添加一些比较合适的插件来解决图片处理问题
下载ckeditor
链接 https://ckeditor.com/ckeditor-4/download/
- 项目中引用的是Standard Package
- 把下载后的文件解压放到public文件夹中
封装ckeditor组件
- 在components 中创建 ck.vue组件
<template><div><textarea :id="id"></textarea></div>
</template>
<script>
import {imgWord} from '@/utils/config'
export default {name: 'ckeditor4',props: ['value'],mounted: function() {const self = this// 渲染编辑器self.ckeditor = window.CKEDITOR.replace(self.id)// 设置初始内容self.ckeditor.setData(self.value)// 监听内容变更事件self.ckeditor.on('change', function() {self.$emit('input', self.ckeditor.getData())})},data: function() {return {id: parseInt(Math.random() * 10000).toString(),ckeditor: null}},methods: {getData () { // 因为直接修改公式后无法监听到value的变化，所以直接在确认编辑时重新获取编辑器里的数据return this.ckeditor.getData()}},computed: {ckData: function(){console.log(this.value)return this.value.replace(/src="CKEditor/g, `src="${imgWord}/CKEditor`)}},watch: {// 监听prop的变化，更新ckeditor中的值value: function() {if (this.ckData !== this.ckeditor.getData()) {this.ckeditor.setData(this.ckData)}}},// 销毁组件前，销毁编辑器beforeDestroy: function() {this.ckeditor.destroy()}
}
</script>
- 引用组件
在需要编辑的页面中引入组件
html：(这里采用的是弹窗编辑)
<a-modal title="编辑" width='800px' v-model="editVisible" @ok="editOk" :centered="true"><ckeditor4 v-if="editVisible" ref="ckeditor4" v-model="editorData"></ckeditor4>//加v-if是因为如果不销毁组件的话mathtype公式编辑器无法再次调用出来， ps： 可能还有优化的方法，可以官方文档找解决方法
</a-modal>
import ckeditor4 from '@/components/ck'在编辑完成时重新获取编辑器里的数据
editOk() {this.editorData = this.$refs.ckeditor4.getData()
}
ckeditor4保留空白标签及添加自定义样式
在ckeditor 文件夹下的contents.css文件中添加自定义样式
在ckeditor 文件夹下的config.js文件中添加配置，如 // 保留CKEditor空白<u></u>config.protectedSource.push(/<u[^>]><\/u>/g);CKEDITOR.dtd.$removeEmpty['u'] = false;config.allowedContent = true;
ckeditor4中添加Wiris MathType插件
下载Wiris
- 插件下载地址：https://ckeditor.com/cke4/addon/ckeditorwiris
- 后台支持下载： https://docs.wiris.com/en/mathtype/mathtype_web/integrations/html/ckeditor?utm_source=ckeditor&utm_medium=website&utm_campaign=pr_generic
配置Wiris插件
- 把下载的文件解压,移动到ckeditor/plugins
ckeditor/config.js
CKEDITOR.editorConfig = function (config) {// Define changes to default configuration here.// For complete reference see:// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html// The toolbar groups arrangement, optimized for two toolbar rows.config.toolbarGroups = [// { name: 'clipboard', groups: ['clipboard', 'undo'] },// { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },// { name: 'links' },{ name: 'insert' },{ name: 'forms' },{ name: 'tools' },{ name: 'document', groups: ['mode', 'document', 'doctools'] },{ name: 'others' },{ name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },// { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'] },{ name: 'styles' },{ name: 'colors' },{ name: 'wiris', groups:['ckeditor_wiris_formulaEditor','ckeditor_wiris_formulaEditorChemistry']}// { name: 'about' }];// 保留CKEditor空白<u></u>config.protectedSource.push(/<u[^>]><\/u>/g);CKEDITOR.dtd.$removeEmpty['u'] = false;config.allowedContent = true;// Remove some buttons provided by the standard plugins, which are// not needed in the Standard(s) toolbar.config.removeButtons = 'Underline,Subscript,Superscript';config.height = 411 /*编辑器高度*/// Set the most common block elements.config.format_tags = 'p;h1;h2;h3;pre';config.language = 'zh-cn';/*将编辑器的语言设置为中文*/config.image_previewText = ' ';/*去掉图片预览框的文字*/// Simplify the dialog windows.// config.extraPlugins = 'image2, uploadimage, ckeditor_wiris'; // 图片插件config.extraPlugins = 'ckeditor_wiris'; // mathtype// config.extraPlugins = 'uploadimage';config.imageUploadUrl = '/ckeditor/UploadImage';/*开启工具栏“图像”中文件上传功能，后面的url为图片上传要指向的的action或servlet*/config.filebrowserImageUploadUrl = "/ckeditor/UploadImage";config.removeDialogTabs = 'image:advanced;link:advanced';// config.mathJaxLib = 'http://convertpdf.yoko100.com/static/mathjax/MathJax.js?config=TeX-MML-AM_CHTML';config.extraPlugins += (config.extraPlugins.length == 0 ? '' : ',') + 'ckeditor_wiris'CKEDITOR.plugins.addExternal('ckeditor_wiris', 'https://ckeditor.com/docs/ckeditor4/4.12.1/examples/assets/plugins/ckeditor_wiris/', 'plugin.js')// CKEDITOR.plugins.addExternal('ckeditor_wiris', 'https://www.wiris.net/demo/plugins/ckeditor/', 'plugin.js');config.allowedContent = true// 快捷键config.keystrokes = [[CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus'], //获取焦点[CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus'], //元素焦点[CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu'], //文本菜单[CKEDITOR.CTRL + 90 /*Z*/, 'undo'], //撤销[CKEDITOR.CTRL + 89 /*Y*/, 'redo'], //重做[CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo'], //[CKEDITOR.CTRL + 76 /*L*/, 'link'], //链接[CKEDITOR.CTRL + 66 /*B*/, 'bold'], //粗体[CKEDITOR.CTRL + 73 /*I*/, 'italic'], //斜体[CKEDITOR.CTRL + 85 /*U*/, 'underline'], //下划线[CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse']]
};
Mathjax 渲染
- 官网： http://docs.mathjax.org/en/latest/basic/community.html#mailing-lists
引入 js 插件
在index.html 中
<script type="text/javascript" anysc src="https://convertpdf.yoko100.com/static/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script>
封装mathjax
在components中创建globalVariable/globalVariable.js
let isMathjaxConfig = false//用于标识是否配置
const initMathjaxConfig = () => {if (!window.MathJax) {return}window.MathJax.Hub.Config({showProcessingMessages: false, //关闭js加载过程信息messageStyle: 'none', //不显示信息jax: ['input/TeX', 'output/HTML-CSS'],tex2jax: {inlineMath: [['$', '$'], ['\\(', '\\)']], //行内公式选择符displayMath: [['$$', '$$'], ['\\[', '\\]']], //段内公式选择符skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'] //避开某些标签},'HTML-CSS': {availableFonts: ['STIX', 'TeX'], //可选字体showMathMenu: false //关闭右击菜单显示}})isMathjaxConfig = true //配置完成，改为true
}const MathQueue = function (elementId) {if (!window.MathJax) {return}console.log(document.getElementById(elementId))window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, document.getElementById(elementId)])
}export default {isMathjaxConfig,initMathjaxConfig,MathQueue
}
应用mathjax
watch 下监听数据变化
数据显示需要在v-html中，才能重新渲染
this.$nextTick(() => {if (this.commonsVariable.isMathjaxConfig){ //判断是否初始配置，若无则配置。this.commonsVariable.initMathjaxConfig()}this.commonsVariable.MathQueue('topicBody')//传入组件id，让组件被MathJax渲染
})
Tax 公式编辑
ckeditor4 +Wiris MathType + Mathjax 渲染 + Tax 公式编辑相关推荐
- 一款基于Latex语法和MathJax渲染的零基础公式编辑器，数学公式插件
零基础即可编辑公式 支持自定义编辑器配置和风格 支持二次编辑公式 支持作为插件和富文本编辑器一起使用 介绍 基于Latex语法和MathJax渲染的公式编辑器插件,易用.可二次编辑.内容可视化. 标题 ...
- Mathtype嵌入word和公式编号的问题
1.Mathtype嵌入word和公式编辑的问题 问题描述:下载Mathtype后,Word功能区不显示Mathtype 解决办法:文件--选项--加载项 在Mathtype的安装路径找到箭头所指文件 ...
- html网页公式编辑软件,如何在网页中插入MathType公式
数学公式不比一般的文字,特殊符号有很多,同时数学公式中的各种样式也很多,所以在编辑数学公式时需要要用到MathType这样专门的数学公式编辑器.用MathType在文档中编辑公式完全是可以的,甚至这个 ...
- 公式编辑神器-MathType
由于论文所投期刊要求论文中的公式必须使用 MathType 编辑,故对 mathType 进行了一番研究. 1.how to setup 步骤传送门:https://shimo.im/docs/Gtp ...
- MathType公式使用技巧汇总——Mathtype怎么在word中编辑公式？论文中公式有哪技巧？有哪些注意事项？论文中的公式怎么写？
文章目录 1 Mathtype安装 2 word 段落间插入公式 3 文字间嵌入(内联)公式 4 公式修改 5 不要使用键盘上的括号等符号 5.1 键盘上符号引发的问题 5.2 正确的符号使用方法 6 ...
- MathType如何保存常用公式
用MathType编辑公式时,很多时候公式都不是那么简单的,都会有一点点复杂.在文档中编辑公式其实也是一个非常耗时间的过程,尤其是一些新手,对编辑公式不是很熟悉更是如此.为了尽量提高编辑公式的效率,我 ...
- word自带公式编辑_怎样在word2013中快速插入数学公式
一切问题应该都是有效率的,只是我们没发现.比如word2013,一般都是常规插入,这样效率很低,每次都要去点击一下公式编辑器或者是去点击插入,太浪费时间,下面带来终极解决办法,达到点击即可编辑的效果. ...
- LyX使用小记之三 公式编辑
LyX使用小记之三 公式编辑 在LyX中可以方便的插入公式,只需要点击Insert Math按钮或者Ctrl+M即可,也可以在Insert->math中选择要插入的公式类型进行插入 在进行公式编 ...
- 公式编辑，图片转公式，公式截图一键转换为word公式或者latex
目录 公式编辑MathType 图片转公式注册mathpix snip 直接或者拍照复制进去就ok 导出公式 doc或者latex编辑
最新文章
- 作业 3 应用分支与循环结构解决问题 统计字符个数
- windows10+Python3-如何安装numpy和matplotlib包
- mxnet转pytorch预训练
- 应用量化时代 | 微服务架构的服务治理之路
- Flutter 实例 - 加载更多的ListView
- POSIX 线程编程（二）线程建立与终止
- Linux内存占用分析的几个方法，你知道几个？
- 程序员最喜欢用的在线代码编译器，什么？你竟然不知道！可以在网页敲代码，运行调试！
- 李善友：为什么外企人不敢创业
- 《架构之美》阅读笔记06
- 数据结构 2-3-4 静态链表
- C语言入门基础知识有哪些？
- jquery 获取select框选中的值示例一则
- vscode 调试找不到对应的python模块（根本，简单，有效）
- 苹果Mac高级文件搜索工具：ProFind
- APUE学习笔记——信号
- 互联网公司的技术体系
- 谷歌或Edge浏览器在开始菜单页面不显示图标
- 常见分布式任务调度工具分析
- bootstrap table表格高度随电脑分辨率变化