如何将WanaKana绑定到contenteditable div？实现方法咨询

当然可以！WanaKana完全支持绑定到contenteditable="true"的<div>元素——官方文档虽然重点展示了<input>和<textarea>的用法，但核心API其实足够灵活，刚好能满足你需要富文本样式的需求。我来一步步给你讲怎么实现：

核心思路 #

WanaKana的官方bind()方法是专门为表单输入元素设计的，但我们可以手动监听contenteditable元素的输入事件，调用WanaKana的转换API来实现相同效果，同时还能完整保留用户添加的富文本样式（比如加粗、斜体）。

步骤1：准备HTML结构 #

先创建你的可编辑div，给它设置ID方便后续获取：

<div id="japaneseEditor" contenteditable="true" style="border: 1px solid #eee; padding: 10px; min-height: 120px;">
  在这里输入罗马音，会自动转成假名~
</div>

步骤2：引入WanaKana #

不管你是用CDN还是本地安装的包，确保先加载WanaKana库：

<!-- 示例：用CDN引入最新版 -->
<script src="https://unpkg.com/wanakana@latest"></script>

步骤3：实现转换逻辑（保留富文本样式） #

这里的关键是只转换文本节点，不破坏用户添加的HTML标签，同时还要处理光标位置，避免转换后光标跳走影响体验：

const editor = document.getElementById('japaneseEditor');

// 辅助函数：保存当前光标位置
function saveCursor(el) {
  const selection = window.getSelection();
  if (!selection.rangeCount) return null;
  
  const range = selection.getRangeAt(0);
  const preRange = range.cloneRange();
  preRange.selectNodeContents(el);
  preRange.setEnd(range.startContainer, range.startOffset);
  
  return {
    start: preRange.toString().length,
    end: preRange.toString().length + range.toString().length
  };
}

// 辅助函数：恢复光标位置
function restoreCursor(el, pos) {
  if (!pos) return;
  
  const selection = window.getSelection();
  const range = document.createRange();
  let currentNode = el.firstChild;
  let currentLength = 0;

  // 遍历节点找到光标对应的位置
  while (currentNode) {
    if (currentNode.nodeType === Node.TEXT_NODE) {
      if (currentLength + currentNode.length >= pos.start) {
        range.setStart(currentNode, pos.start - currentLength);
        range.setEnd(currentNode, pos.end - currentLength);
        break;
      }
      currentLength += currentNode.length;
    }
    currentNode = currentNode.nextSibling;
  }

  selection.removeAllRanges();
  selection.addRange(range);
}

// 递归转换所有文本节点（不破坏HTML标签）
function convertText(el) {
  for (const child of el.childNodes) {
    if (child.nodeType === Node.TEXT_NODE) {
      // 可根据需求切换转换方法：toHiragana/toKatakana/toRomaji
      child.textContent = wanakana.toHiragana(child.textContent);
    } else if (child.nodeType === Node.ELEMENT_NODE) {
      convertText(child);
    }
  }
}

// 监听输入事件，触发转换
editor.addEventListener('input', () => {
  const cursorPos = saveCursor(editor);
  convertText(editor);
  restoreCursor(editor, cursorPos);
});

// 可选：监听keyup事件，覆盖一些input事件没触发的场景
editor.addEventListener('keyup', () => {
  const cursorPos = saveCursor(editor);
  convertText(editor);
  restoreCursor(editor, cursorPos);
});

额外说明 #

• 转换方法可以按需切换：wanakana.toHiragana()（转平假名）、wanakana.toKatakana()（转片假名）、wanakana.toRomaji()（转罗马音）。
• 如果不需要保留富文本样式，直接用textContent获取和设置内容会更简单，但上面的方法能完美兼容加粗、斜体等自定义样式。
• 光标处理是核心细节，不然用户输入时光标会跳转到开头，严重影响编辑体验。

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