TinyMCE自定义插件开发：如何基于光标位置自动选中单词

我刚好做过类似的功能，其实不用纠结WordPress的源码，直接用TinyMCE的原生API就能搞定。下面给你一步步拆解实现方案：

核心思路 #

当用户点击你的「Add Link」按钮时，先检查当前是否有选中内容。如果只是光标停在某个位置（没有选中任何内容），就自动扩展选区，选中光标所在的完整单词，再弹出链接对话框。

具体代码实现 #

下面是完整的插件示例，包含自动选单词的核心逻辑：

tinymce.PluginManager.add('customlink', function(editor, url) {
  // 自动选中光标所在单词的核心函数
  const selectWordAtCursor = () => {
    const selection = editor.selection;
    const range = selection.getRng();

    // 如果已经有选中内容，直接跳过，不覆盖用户操作
    if (!range.collapsed) return;

    // 定位到光标实际所在的文本节点（光标可能停在元素节点上）
    let textNode = range.startContainer;
    if (textNode.nodeType !== Node.TEXT_NODE) {
      textNode = textNode.firstChild;
      if (!textNode) return;
    }

    const textContent = textNode.textContent;
    let startPos = range.startOffset;
    let endPos = startPos;

    // 向左遍历，找到单词的起始位置（跳过非单词字符）
    while (startPos > 0 && /\w/.test(textContent.charAt(startPos - 1))) {
      startPos--;
    }

    // 向右遍历，找到单词的结束位置
    while (endPos < textContent.length && /\w/.test(textContent.charAt(endPos))) {
      endPos++;
    }

    // 更新选区，选中整个单词
    range.setStart(textNode, startPos);
    range.setEnd(textNode, endPos);
    selection.setRng(range);
  };

  // 添加插件按钮到工具栏
  editor.ui.registry.addButton('customlink', {
    text: 'Add Link',
    icon: 'link',
    onAction: () => {
      // 先执行自动选单词逻辑
      selectWordAtCursor();
      // 调用TinyMCE内置的链接对话框（也可以替换成你自己的自定义对话框）
      editor.execCommand('mceLink');
    }
  });

  return {
    getMetadata: () => ({
      name: 'Custom Link Plugin',
      description: 'Add link with auto-select word feature'
    })
  };
});

关键细节调整 #

• 单词匹配规则：示例中用/\w/匹配字母数字下划线，如果需要支持中文或其他语言，可以修改正则为/[\w\u4e00-\u9fa5]/；如果要支持带连字符的单词（比如my-word），可以改成/[\w-]/。
• 跨节点场景：如果单词被HTML元素拆分（比如my<span>word</span>），基础逻辑可能无法完整选中，这种情况可以扩展代码遍历相邻节点来拼接完整单词，但大部分日常场景下基础逻辑足够用。
• 自定义对话框：如果不想用TinyMCE内置的链接对话框，把editor.execCommand('mceLink')换成你自己的弹窗逻辑即可。

使用方式 #

把这段代码作为自定义插件引入到你的TinyMCE配置中，然后在toolbar配置项里添加customlink按钮，就能使用这个带自动选单词功能的链接插件了。

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