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

Question

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

<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>

Answer 1

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

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

这已经解决了问题。

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

Wiris MathType does not parse MathML on Vue Component reload

mathtype

vue.js

ckeditor4.x

wiris