能否用JavaScript/JQuery实现适配自有textarea的自定义编辑器工具栏？

当然没问题！完全可以用JavaScript或者jQuery实现你想要的自定义工具栏，完全不用依赖第三方编辑器自带的textarea——毕竟你的需求就是基于自己已有的文本框来做文本编辑嘛。我给你捋清楚思路，再附上具体的代码示例：

其实核心逻辑很简单：获取textarea中选中的文本片段，对这段文本进行格式化处理（比如包裹样式标签、添加格式标记），最后把修改后的内容放回textarea，同时处理好光标位置让编辑体验更流畅。

先搭好基础的HTML结构，包含你的自定义工具栏和自有textarea：

<!-- 自定义工具栏 -->
<div class="editor-toolbar">
  <button id="btn-bold">加粗</button>
  <button id="btn-italic">斜体</button>
  <select id="font-select">
    <option value="Arial">Arial</option>
    <option value="Times New Roman">Times New Roman</option>
    <option value="Courier New">Courier New</option>
  </select>
  <select id="fontsize-select">
    <option value="12px">12px</option>
    <option value="14px">14px</option>
    <option value="16px">16px</option>
    <option value="18px">18px</option>
  </select>
</div>

<!-- 你自己的textarea -->
<textarea id="my-custom-textarea" rows="8" cols="60">试试选中这段文本，点击工具栏按钮编辑吧！</textarea>

原生JavaScript实现 #

下面是纯JS的代码，不用依赖任何库：

// 获取textarea元素
const textarea = document.getElementById('my-custom-textarea');

// 绑定加粗按钮点击事件
document.getElementById('btn-bold').addEventListener('click', () => {
  wrapSelectedText('<b>', '</b>');
});

// 绑定斜体按钮点击事件
document.getElementById('btn-italic').addEventListener('click', () => {
  wrapSelectedText('<i>', '</i>');
});

// 字体选择事件
document.getElementById('font-select').addEventListener('change', (e) => {
  const fontFamily = e.target.value;
  wrapSelectedText(`<span style="font-family: ${fontFamily};">`, '</span>');
});

// 字号选择事件
document.getElementById('fontsize-select').addEventListener('change', (e) => {
  const fontSize = e.target.value;
  wrapSelectedText(`<span style="font-size: ${fontSize};">`, '</span>');
});

// 通用的文本包裹函数
function wrapSelectedText(openingMark, closingMark) {
  // 获取选中文本的起始和结束位置
  const startPos = textarea.selectionStart;
  const endPos = textarea.selectionEnd;
  const selectedText = textarea.value.substring(startPos, endPos);

  // 处理没有选中文本的情况：在光标位置插入空标记
  if (!selectedText) {
    const newContent = textarea.value.substring(0, startPos) + openingMark + closingMark + textarea.value.substring(endPos);
    textarea.value = newContent;
    // 把光标移到两个标记中间，方便直接输入
    textarea.selectionStart = startPos + openingMark.length;
    textarea.selectionEnd = startPos + openingMark.length;
    textarea.focus();
    return;
  }

  // 替换选中的文本为带标记的内容
  const newContent = textarea.value.substring(0, startPos) + openingMark + selectedText + closingMark + textarea.value.substring(endPos);
  textarea.value = newContent;

  // 保持选中替换后的内容，提升编辑体验
  textarea.selectionStart = startPos;
  textarea.selectionEnd = startPos + openingMark.length + selectedText.length + closingMark.length;
  textarea.focus();
}

jQuery版本实现 #

如果你习惯用jQuery，代码逻辑基本一致，只是元素获取方式不同：

const $textarea = $('#my-custom-textarea');

$('#btn-bold').click(() => {
  wrapText('<b>', '</b>');
});

$('#btn-italic').click(() => {
  wrapText('<i>', '</i>');
});

$('#font-select').change((e) => {
  const font = $(e.target).val();
  wrapText(`<span style="font-family: ${font};">`, '</span>');
});

$('#fontsize-select').change((e) => {
  const size = $(e.target).val();
  wrapText(`<span style="font-size: ${size};">`, '</span>');
});

function wrapText(openingMark, closingMark) {
  const textarea = $textarea[0];
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const selected = textarea.value.substring(start, end);

  if (!selected) {
    const newVal = $textarea.val().substring(0, start) + openingMark + closingMark + $textarea.val().substring(end);
    $textarea.val(newVal);
    textarea.selectionStart = start + openingMark.length;
    textarea.selectionEnd = start + openingMark.length;
    $textarea.focus();
    return;
  }

  const newVal = $textarea.val().substring(0, start) + openingMark + selected + closingMark + $textarea.val().substring(end);
  $textarea.val(newVal);
  textarea.selectionStart = start;
  textarea.selectionEnd = start + openingMark.length + selected.length + closingMark.length;
  $textarea.focus();
}

• 如果你的需求是生成Markdown格式文本，只需要把代码里的HTML标签换成Markdown标记就行（比如加粗用**，斜体用*）。
• 可以添加“取消格式化”的逻辑：比如判断选中的文本是否已经被包裹了对应标记，如果是就移除标记，避免重复格式化。
• 样式上可以给工具栏加一些CSS，让它看起来更像专业编辑器工具栏，比如按钮排成一行、添加hover效果等。

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