javascript - ckeditor + wiris MathType 在编辑模式下不解析数学 ml
问题描述
在 out spring MVC 项目中,我将 wiris MathType 与 ckeditor 集成用于数学和化学方程式。集成顺利而迅速地完成。
创建数据后,我可以从 ckeditor 获取 MathML xml 并将其保存到数据库中。要编辑数据,我从数据库加载数据并将其绑定到 textarea,以便用户可以修改方程式。
问题是当打开页面以编辑数据时,方程没有被解析,看起来 ckeditor 正在删除所有 MathML xml,并且只显示方程的数据。
我是初始化。带有wiris插件的ckeditor如下:
CKEDITOR.plugins.addExternal('ckeditor_wiris', 'https://www.wiris.net/demo/plugins/ckeditor/', 'plugin.js');
CKEDITOR.editorConfig = function (config)
{
config.toolbar = [
{name: 'wirisplugins', items: ['ckeditor_wiris_formulaEditor', 'ckeditor_wiris_formulaEditorChemistry']}
];
config.allowedContent = true;
};
CKEDITOR.replace( 'mathml', {extraPlugins: 'ckeditor_wiris'} );
我还在这里创建了一个 jsfiddle https://jsfiddle.net/vgr47y8n/2/来演示这个问题。
预期输出是:分配给 textarea 的 MathML 应该被解析为数学方程。
我做错了什么?
解决方案
实际上,当方程插入 CKEditor 时,它只会保留 MathML xml。
您看到的图像是从 MathML xml 到 SVG 图像的热渲染。
当您将数据保存到 DB 时,CKEditor 将仅保存 MathML XML。
当您从数据库中检索数据时,您应该检测“MathML xml”并使用以下 URL 将其呈现为 SVG 图像:
var renderURL = "https://www.wiris.net/demo/editor/render"; $.post(renderURL, { format: "svg", mml: mmlEquation }, function (rd) { var img = document.createElement("IMG"); if ($.trim(rd)) { if (rd.documentElement) { var svg = rd.documentElement; var svgImageXml = (new XMLSerializer).serializeToString(svg); var svgAsDataSrc = "data:image/svg+xml;base64," +btoa(unescape(encodeURIComponent(svgImageXml))); img.setAttribute("class", "Wirisformula-equ"); img.setAttribute("align", "middle"); img.setAttribute("data-equationType", eqType); img.setAttribute("src", svgAsDataSrc); img.setAttribute("data-mathml", mmlEquation); img.setAttribute("alt", ""); } } }
确保您无法在文本区域中显示方程式,但您可以在 CKEditor 或 HTML Container 中显示它(Div/Li...等)
推荐阅读
- node.js - Node.js 中的 process.hrtime() 和 process.hrtime.bigint() 函数是指什么时间?
- python - 将十六进制(字节)转换为奇数长度字符串中的 ASCII 文本
- julia - 在 Julia 中使用多维数组广播二维数组
- reactjs - How to do timeout and then clear timeout in react functional component?
- winapi - 如何在 lua 中使用 ffi 制作前景(焦点)窗口?如果我知道我的窗口的 HWND。我需要代码
- karate - 空手道框架中的 AssertAll 功能
- prestashop - 类别顶部的图像
- php - 在 php/laravel 中更改 json 格式
- protocol-buffers - 我在 Windows 上安装协议缓冲区时遇到问题?
- python - 使用 MLflowClient 进行嵌套运行