如何点击按钮将首个textarea内容作为段落添加到第二个textarea及开发自定义文本编辑器

1. 文本内容追加功能实现 #

基础DOM结构 #

<textarea id="inputText" rows="5" placeholder="请输入内容"></textarea>
<button id="addBtn">添加到目标区域</button>
<textarea id="targetText" rows="10" placeholder="目标内容区域"></textarea>

原生JavaScript实现 #

const addBtn = document.getElementById('addBtn');
const inputText = document.getElementById('inputText');
const targetText = document.getElementById('targetText');

// HTML特殊字符转义，避免XSS风险
function escapeHtml(str) {
  return str.replace(/[&<>"']/g, char => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  }[char]));
}

addBtn.addEventListener('click', () => {
  const content = inputText.value.trim();
  // 空内容不执行添加逻辑
  if (!content) return;
  // 用p标签包裹内容追加到目标textarea
  targetText.value += `<p>${escapeHtml(content)}</p>\n`;
  // 可选：清空输入框
  inputText.value = '';
  // 可选：自动滚动到目标区域底部
  targetText.scrollTop = targetText.scrollHeight;
});

jQuery实现 #

// 需提前引入jQuery依赖
$('#addBtn').on('click', function() {
  const content = $('#inputText').val().trim();
  if (!content) return;
  // 追加内容到目标textarea
  $('#targetText').val((_, oldVal) => oldVal + `<p>${escapeHtml(content)}</p>\n`);
  $('#inputText').val('');
  $('#targetText').scrollTop($('#targetText')[0].scrollHeight);
});

2. 带内联编辑、删除能力的自定义文本编辑器实现 #

注意：原生textarea仅支持纯文本输入，无法渲染DOM元素和交互按钮，因此需要将第二个textarea调整为「可视化交互容器 + 隐藏存储textarea」的组合结构，交互在可视化容器完成，数据自动同步到隐藏textarea用于表单提交。

调整后的DOM结构 #

<textarea id="inputText" rows="5" placeholder="请输入内容"></textarea>
<button id="addBtn">添加到编辑器</button>
<!-- 可视化交互容器 -->
<div id="editorContainer" style="border: 1px solid #dcdfe6; min-height: 200px; padding: 10px; border-radius: 4px;"></div>
<!-- 隐藏存储域，用于提交数据 -->
<textarea id="targetText" hidden name="content"></textarea>

完整交互逻辑实现 #

const addBtn = document.getElementById('addBtn');
const inputText = document.getElementById('inputText');
const editorContainer = document.getElementById('editorContainer');
const targetText = document.getElementById('targetText');

// HTML特殊字符转义
function escapeHtml(str) {
  return str.replace(/[&<>"']/g, char => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  }[char]));
}

// 同步编辑器内容到隐藏存储域
function syncContent() {
  targetText.value = editorContainer.innerHTML;
}

// 添加段落逻辑
addBtn.addEventListener('click', () => {
  const content = inputText.value.trim();
  if (!content) return;

  // 1. 创建段落容器
  const paraBlock = document.createElement('div');
  paraBlock.style = 'display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; padding: 8px; border: 1px solid #f0f0f0; border-radius: 4px;';

  // 2. 创建可编辑内容区域
  const contentEl = document.createElement('p');
  contentEl.contentEditable = true;
  contentEl.style = 'flex: 1; margin: 0; min-height: 22px; outline: none;';
  contentEl.innerText = escapeHtml(content);
  // 内容编辑时自动同步数据
  contentEl.addEventListener('input', syncContent);

  // 3. 创建编辑按钮
  const editBtn = document.createElement('button');
  editBtn.innerText = '编辑';
  editBtn.style = 'flex-shrink: 0; padding: 3px 8px; font-size: 12px; border: none; border-radius: 3px; background: #e8f3ff; color: #409eff; cursor: pointer;';
  editBtn.addEventListener('click', () => {
    contentEl.focus();
    // 自动选中段落全部内容，方便快速编辑
    const range = document.createRange();
    range.selectNodeContents(contentEl);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  });

  // 4. 创建删除按钮
  const delBtn = document.createElement('button');
  delBtn.innerText = '删除';
  delBtn.style = 'flex-shrink: 0; padding: 3px 8px; font-size: 12px; border: none; border-radius: 3px; background: #fef0f0; color: #f56c6c; cursor: pointer;';
  delBtn.addEventListener('click', () => {
    paraBlock.remove();
    syncContent();
  });

  // 组装元素到容器
  paraBlock.append(contentEl, editBtn, delBtn);
  editorContainer.append(paraBlock);

  // 同步数据、清空输入框
  syncContent();
  inputText.value = '';
});

可选优化点 #

• 给段落块添加hover高亮、编辑中状态高亮的样式，提升交互体验
• 可扩展支持富文本格式（加粗、斜体、链接等），基于document.execCommand或者集成轻量富文本内核实现
• 表单提交时直接读取#targetText的value即可获得完整的带结构的内容数据

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