vue数字公式篇 Tinymce结合使用（二）

继上一篇的数字公式，这次的功能是将公式能插入编辑器以及修改

1、Tinymce 自定义 LateX 按钮，打开公式编辑器窗口 LateX.vue

  window.tinymce.init({...//基础配置这里我就不写了setup(ed) {//自定义 LateX 按钮ed.ui.registry.addButton('LateX', {text: 'LateX', // 按钮文本onAction: function () {// 1. 获取当前光标位置const latexEditorBookmark = ed.selection.getBookmark(2); // 获取光标位置const editorId = ed.id; // 保存当前编辑器 IDconsole.log('activeEditorId:', editorId);// 2. 生成一个随机的 ID，用于 wmath 标签const uid = 'wmath-' + Math.random().toString(36).substr(2, 9);// 3. 创建一个 <wmath> 标签并插入到光标处const wmathHtml = `<wmath contenteditable="false" data-id="${uid}" data-latex=""></wmath>`;ed.insertContent(wmathHtml); // 在光标位置插入 wmath 标签// 4. 打开公式编辑器窗口，并传递光标位置、编辑器 ID 和 wmathIdconst url = `/LateX?editorId=${editorId}&wmathId=${uid}`;window.open(url, '_blank', 'width=1000,height=800,scrollbars=no,resizable=no');}});//点击数字公式时打开窗口进行编辑var currentWmathElement = null;ed.on('click', function (e) {const wmathElement = e.target.closest('wmath');if (wmathElement) {currentWmathElement = wmathElement; // 👈 保存当前点击的元素const latexContentRaw = wmathElement.getAttribute('data-latex') || '';console.log('at line 488: raw =', latexContentRaw);// 去除所有 $ 符号const latexContent = latexContentRaw.replace(/\$/g, '').trim();console.log('at line 489: cleaned =', latexContent);// 编码后用于传递到弹窗const encoded = encodeURIComponent(latexContent);// 给 wmath 添加唯一 data-id，方便后续精准替换let wmathId = wmathElement.getAttribute('data-id');if (!wmathId) {wmathId = 'wmath-' + Math.random().toString(36).substr(2, 9);wmathElement.setAttribute('data-id', wmathId);}// 当前编辑器 ID 也保存下来（如果你有多个编辑器）const editorId = ed.id;// 打开编辑窗口并传参（传递 data-id + 内容）window.open(`/LateX?id=${encoded}&wmathId=${wmathId}&editorId=${editorId}`,'_blank','width=1000,height=800,scrollbars=no,resizable=no');}});}})//监听子页面数据if (!window._wmath_listener_registered) {// 💾 新增公式插入点记录let latexEditorBookmark = null;let activeEditorId = null;// 👂 message 监听器：处理编辑 + 新增两种情况window.addEventListener('message', function (event) {const data = event.data;console.log('data at line 648:', data);// ✅ 编辑现有公式：替换或删除if (data && data.type === 'update-wmath') {const { editorId, wmathId, latex } = data;const newLatex = latex ? latex.trim() : '';if (!editorId || !wmathId) return;const targetEditor = tinymce.get(editorId);if (!targetEditor) return;const targetWmath = targetEditor.dom.select(`wmath[data-id="${wmathId}"]`, targetEditor.getBody())[0];if (targetWmath) {if (!newLatex) {// ❌ 删除公式targetEditor.dom.remove(targetWmath);} else {// ✅ 更新公式targetWmath.setAttribute('data-latex', newLatex);targetWmath.innerHTML = newLatex;setTimeout(() => {if (typeof renderMathJax === 'function') {this.window.renderMathJax(editorId);}}, 10);}}}});// 🚩 标记为已注册，防止重复window._wmath_listener_registered = true;}

注意：所有的公式都是 $$ 公式 $$ 并且都是反斜杠
富文本存储的时候 <wmath data-latex="$$ 公式 $$"> $$ 公式 $$ </wmath>

这里解释一下为什么不直接存储$$ 公式 $$
原因：
1、我们是用户编辑内容，最终有后端形成word文件，编辑在进行处理，这就会导致不能随意存储数据
2、所有直接$$ 公式 $$ 渲染之后会取代原内容转成这样的标签并且不会记录公式，所以我才想着在套一个自定义的标签在这里插入图片描述
3、为什么不能渲染的时候直接把公式赋值到父级span标签上呢，由于原因1，我是不能存储span 以及 p这种常规的标签如果把公式放到标签上也没办法保证用户就只录入一个公式而且这种直接赋值也是js去渲染的比较慢