Wiris MathType 不会在 Vue 组件重新加载时解析 MathML

如何解决Wiris MathType 不会在 Vue 组件重新加载时解析 MathML

我正在开发一个带有 MathType 插件的 Vue JS 应用程序，当输入公式并以正确的格式显示时，该插件工作正常。但是当组件被销毁并再次创建并且使用 v-model 将先前输入的数据传递给组件时，MathML 代码是完整的（如在 Vue 检查器中观察到的）但只有原始文本内容显示在编辑器和方程中不会解析为图像格式。如果我使用包含公式的 v-model 重新加载整个页面，MathType 会对其进行解析并显示正确的图像。有没有办法在 CKEditor 4 中为动态/编程添加的文本触发这种解析？这是我的代码：

<template>
    <div>
        <input v-bind:name="fieldName" type="hidden" v-model="content" />
        <ckeditor v-bind:editor-url="editorUrl" ref="editor" v-bind:config="editorConfig" v-model="content"></ckeditor>
    </div>
</template>

<script>
    import CKEditor from 'ckeditor4-vue';
    export default {
        props: {
            currentContent: {
                type: String,default: null,},fieldName: {
                type: String,default: 'content',toolbarType: {
                type: String,default: 'Full',data: function () {
            return {
                editorConfig: {
                    embed_provider: '//ckeditor.iframe.ly/apI/Oembed?url={url}&callback={callback}',mathJaxLib: '//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML',protectedSource: [/<u[^>]><\/u>/g],toolbar_Exam: [
                        ['Cut','copy','Paste','PasteFromText','PasteFromWord','Undo','Redo'],['Bold','Italic','Underline','Strike','Subscript','Superscript'],['Outdent','Indent','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Table','HorizontalRule','Smiley','SpecialChar'],['Styles','Format','Font','FontSize','TextColor','BGColor'],//['oembed','MediaEmbed'],['ckeditor_wiris_formulaEditor','ckeditor_wiris_formulaEditorChemistry'],],toolbar_Full: null,toolbar: this.toolbarType,allowedContent: true,extraAllowedContent: 'math[xmlns]; maction; maligngroup; malignmark; menclose; merror; mfenced; mfrac; mglyph; mi;' +
                        'mlabeledtr; mlogdiv; mmultiscripts; mn; mo; mover; mpadded; mphantom; mroot; mrow; ms; mscarries; mscarry;' +
                        'msgroup; mstack; msline; mspace; msqrt; msrow; mstack; mstyle; msub; msup; msubsup; mtable; mtd; mtext; mtr;' +
                        'munder; munderover; semantics; annotation; annotation-xml;',editorUrl: siteUrl+'/vendor/ckeditor/ckeditor.js',};
        },components: {
            'ckeditor': CKEditor.component,};
</script>

解决方法

我已通过使用通用 Wiris MathType 插件 https://www.npmjs.com/package/@wiris/mathtype-generic 并导入 wirisplugin-generic.js 脚本并在挂载函数的组件中的内容变量上使用 WirisPlugin.Parser.initParse 解决了此问题。

mounted() {
 this.content = WirisPlugin.Parser.initParse(this.content);
}

这已经解决了问题。