如何在CKEditor中实现尺寸字符自动转换：将x替换为乘号

嘿，这个需求其实挺实用的——要让用户输入的类似122.3 x 90.5（或者无空格的122.3x90.5）里的小写x自动变成标准乘号×，我们可以根据你用的CKEditor版本（4或5）来实现，下面是具体方案：

针对CKEditor 4的实现方式 #

CKEditor 4的API相对直接，我们可以通过监听输入事件或者内容过滤器来处理：

方法1：监听按键+内容初始化事件 #

这种方式会在用户输入完成或编辑器初始化时自动替换文本，同时恢复光标位置避免干扰编辑体验：

CKEDITOR.replace('editor1', {
  // 这里可以保留你原有的其他配置
  on: {
    // 用户按键松开时触发替换
    keyup: function(evt) {
      const editor = evt.editor;
      const selection = editor.getSelection();
      const currentRange = selection.getRanges()[0];
      
      // 只处理光标处于折叠状态（非选中文本）的情况
      if (currentRange.collapsed) {
        const currentContent = editor.getData();
        // 用你提供的正则匹配"数字  x  数字"（x前后有空格），如果是无空格的情况，把正则改成/(?<=\d)x(?=\d)/g
        const correctedContent = currentContent.replace(/(?<=\d\ )x(?= \d)/g, '×');
        
        if (correctedContent !== currentContent) {
          editor.setData(correctedContent);
          // 恢复光标到原来的位置
          selection.selectRanges([currentRange]);
        }
      }
    },
    // 编辑器初始化时处理已有内容
    instanceReady: function(evt) {
      const editor = evt.editor;
      const initialContent = editor.getData();
      const correctedContent = initialContent.replace(/(?<=\d\ )x(?= \d)/g, '×');
      editor.setData(correctedContent);
    }
  }
});

方法2：使用内容过滤器（ACF）处理输出 #

如果你希望在编辑器生成HTML时统一处理，可以利用toHtml事件：

CKEDITOR.replace('editor1', {
  allowedContent: true, // 先允许所有内容，再自定义过滤规则
  on: {
    toHtml: function(evt) {
      // 在内容转换为HTML前替换目标字符
      evt.data.dataValue = evt.data.dataValue.replace(/(?<=\d\ )x(?= \d)/g, '×');
    }
  }
});

针对CKEditor 5的实现方式 #

CKEditor 5采用模块化架构，我们可以自定义一个轻量插件来处理文本替换：

步骤1：创建自定义替换插件 #

import { Plugin } from '@ckeditor/ckeditor5-core';

export default class ReplaceXWithTimes extends Plugin {
  init() {
    const editor = this.editor;
    
    // 监听文档内容变化事件
    editor.model.document.on('change:data', () => {
      const model = editor.model;
      const selection = model.document.selection;
      
      model.change(writer => {
        // 遍历文档中的所有文本节点
        const rootRange = model.createRangeIn(model.document.getRoot());
        for (const item of rootRange.getItems()) {
          if (item.is('$text')) {
            const originalText = item.data;
            // 替换匹配的x为乘号
            const newText = originalText.replace(/(?<=\d\ )x(?= \d)/g, '×');
            
            if (newText !== originalText) {
              writer.insertText(newText, item.getAttributeRange(), item.parent);
              writer.remove(item);
            }
          }
        }
        
        // 恢复光标位置，避免替换后光标跳走
        writer.setSelection(selection.getFirstPosition());
      });
    });
    
    // 处理初始加载或粘贴的内容
    editor.data.on('inputTransformation', (evt, data) => {
      data.data = data.data.replace(/(?<=\d\ )x(?= \d)/g, '×');
    });
  }
}

步骤2：在编辑器配置中引入插件 #

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import ReplaceXWithTimes from './replacexwithtimes';
// 导入你需要的基础插件，比如 Essentials, Paragraph, Bold 等

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [ReplaceXWithTimes, Essentials, Paragraph, Bold],
    toolbar: ['bold', 'italic'] // 保留你需要的工具栏按钮
  })
  .catch(error => {
    console.error(error);
  });

一些实用的注意事项 #

• 正则调整：你提供的正则是匹配数字+空格+x+空格+数字的场景，如果用户输入是无空格的122.3x90.5，请把正则修改为/(?<=\d)x(?=\d)/g。
• 避免重复替换：可以在替换时检查文本中是否已经存在×，防止反复替换影响性能。
• 性能优化：如果处理大文档，建议只替换光标附近的文本片段，而不是全量遍历整个文档。

内容的提问来源于stack exchange，提问作者Madamadam