0

我正在开发一个具有 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>
4

2 回答 2

0

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

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

这已经解决了这个问题。

于 2021-07-06T04:38:27.483 回答
0

尝试在文本编辑器之外的 Vue 中呈现时，另一个答案对我不起作用，所以我编写了这段代码，它采用包含 mathml 的文本并将每个math标签替换为svg. 它为每个标签发送一个请求。

async renderMathML(html){
        const regex = /<math[^>]*>.*?<\/math>/g;
        const groups = html.matchAll(regex);
        const promises = [];
        for (const group of groups) {
           promises.push(axios.get(`https://www.wiris.net/demo/editor/render?mml=${encodeURIComponent(group)}&format=svg`));
        }
        if(promises.length){
           const results = await Promise.all(promises);
           html = html.replace(regex, () => results.shift().data);
        }
        return html;
    }
于 2022-02-26T09:24:49.070 回答