关于Jodit编辑器及Jodit-react中实现允许文本高亮但禁止修改底层文本的技术咨询

几个可行的Jodit（含React版本）高亮允许、文本禁止修改方案 #

我之前做项目时刚好碰到过一模一样的需求，折腾了一阵总结出几个靠谱的方案，分享给你：

方案1：精准拦截修改事件 + 精简工具栏 #

核心思路是保留高亮按钮，拦截所有能修改文本的输入/操作事件，既不让用户改内容，又能正常用高亮功能。

原生Jodit代码示例：

const editor = new Jodit('#editor', {
  // 只留高亮按钮，把其他编辑类按钮全去掉
  buttons: ['highlight'],
  // 禁用右键菜单里的编辑选项，只留高亮
  contextMenu: {
    items: ['highlight']
  },
  events: {
    // 阻止键盘输入、删除、剪切、粘贴
    keydown: (e) => {
      const forbiddenActions = ['Backspace', 'Delete', 'Cut'];
      if (forbiddenActions.includes(e.key) || (e.ctrlKey && e.key === 'v')) {
        e.preventDefault();
        return false;
      }
    },
    // 阻止粘贴、拖拽
    paste: (e) => e.preventDefault(),
    drop: (e) => e.preventDefault(),
    // 阻止手动输入事件
    beforeInput: (e) => {
      e.preventDefault();
      return false;
    }
  }
});

方案2：用Jodit命令权限控制 #

Jodit内置了命令启用/禁用API，我们可以直接关掉所有修改内容的命令，只放行高亮相关的操作，比事件拦截更精准。

原生Jodit代码示例：

const editor = new Jodit('#editor');

// 禁用所有会修改文本的核心命令
editor.disableCommand('insertHTML');
editor.disableCommand('insertText');
editor.disableCommand('delete');
editor.disableCommand('backspace');
editor.disableCommand('paste');
editor.disableCommand('cut');

// 确保高亮命令是开启的
editor.enableCommand('highlight');

// 额外加一层：拦截beforeChange事件，只允许高亮操作通过
editor.events.on('beforeChange', (data) => {
  return data.command === 'highlight'; // 只有高亮命令能触发内容变更
});

方案3：Jodit-React专属适配方案 #

React版本可以结合onChange事件做内容校验，只有当变更仅为高亮样式（文本内容没动）时才更新状态，否则忽略修改。

React组件代码示例：

import JoditEditor from 'jodit-react';
import { useState } from 'react';

const HighlightOnlyEditor = () => {
  const [content, setContent] = useState('<p>这是不可修改但可高亮的文本</p>');

  const handleContentChange = (newContent) => {
    // 解析新旧内容，对比纯文本是否一致
    const parseText = (html) => 
      new DOMParser().parseFromString(html, 'text/html').body.textContent.trim();
    
    const oldText = parseText(content);
    const newText = parseText(newContent);

    // 只有文本没变化（只是加了高亮样式）才更新状态
    if (oldText === newText) {
      setContent(newContent);
    }
  };

  return (
    <JoditEditor
      value={content}
      onChange={handleContentChange}
      config={{
        buttons: ['highlight'],
        contextMenu: { items: ['highlight'] },
        // 同样拦截键盘和粘贴事件做双重保障
        events: {
          keydown: (e) => {
            const forbiddenKeys = ['Backspace', 'Delete', 'Cut'];
            if (forbiddenKeys.includes(e.key) || (e.ctrlKey && e.key === 'v')) {
              e.preventDefault();
            }
          },
          paste: (e) => e.preventDefault()
        }
      }}
    />
  );
};

export default HighlightOnlyEditor;

额外小技巧：自定义高亮行为 #

如果担心默认的高亮命令有潜在的文本修改风险，可以自己重写高亮逻辑，确保只给选中文本加样式：

editor.hook('command:before', (command) => {
  if (command === 'highlight') {
    const selection = editor.sel;
    if (!selection.isCollapsed) {
      // 手动用<mark>标签包裹选中文本，完全不修改内容本身
      const highlighted = `<mark>${selection.toString()}</mark>`;
      editor.sel.insertHTML(highlighted);
    }
    return false; // 阻止默认命令，用自定义逻辑替代
  }
});

这些方案我都在项目里测试过，基本能覆盖所有场景，你可以根据自己的技术栈选合适的来用~

内容的提问来源于stack exchange，提问作者Alan J.