ckeditor4 +Wiris MathType + 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组件

1. 在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>

2. 引用组件

在需要编辑的页面中引入组件
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 公式编辑