如何创建支持加粗、斜体等格式的发帖输入框？

要实现带格式功能的发帖输入框，同时支持提交后渲染格式化内容，可按以下方案落地：

先搭出包含格式工具栏、输入框、提交按钮及结果展示区的HTML结构：

<div class="post-editor">
  <div class="toolbar">
    <button data-action="bold">加粗</button>
    <button data-action="italic">斜体</button>
    <button data-action="quote">引用</button>
  </div>
  <textarea id="postContent" rows="8" placeholder="写下你的内容..."></textarea>
  <button id="submitPost">发布</button>
  <div id="postDisplay" class="post-display"></div>
</div>

加些基础CSS让布局更合理：

.post-editor {
  max-width: 600px;
  margin: 20px;
}
.toolbar {
  margin-bottom: 10px;
}
.toolbar button {
  margin-right: 8px;
  padding: 4px 8px;
  cursor: pointer;
}
#postContent {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}
#submitPost {
  margin-top: 10px;
  padding: 6px 12px;
  cursor: pointer;
}
.post-display {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.post-display strong {
  font-weight: bold;
}
.post-display em {
  font-style: italic;
}
.post-display blockquote {
  border-left: 3px solid #ddd;
  padding-left: 10px;
  margin: 10px 0;
  color: #666;
}

通过JavaScript给工具栏按钮绑定事件，在文本框光标位置插入对应的Markdown标记（支持选中文本包裹）：

const textarea = document.getElementById('postContent');
const toolbarButtons = document.querySelectorAll('.toolbar button');

toolbarButtons.forEach(button => {
  button.addEventListener('click', () => {
    const action = button.dataset.action;
    let start = textarea.selectionStart;
    let end = textarea.selectionEnd;
    const selectedText = textarea.value.substring(start, end);
    let markdownTag = '';

    switch(action) {
      case 'bold':
        markdownTag = '**';
        break;
      case 'italic':
        markdownTag = '*';
        break;
      case 'quote':
        markdownTag = '> ';
        break;
    }

    let newText = '';
    if (action === 'quote') {
      const lines = selectedText.split('\n');
      const quotedLines = lines.map(line => `${markdownTag}${line}`).join('\n');
      newText = textarea.value.substring(0, start) + quotedLines + textarea.value.substring(end);
      textarea.value = newText;
      textarea.focus();
      textarea.setSelectionRange(start + quotedLines.length, start + quotedLines.length);
    } else {
      newText = textarea.value.substring(0, start) + markdownTag + selectedText + markdownTag + textarea.value.substring(end);
      textarea.value = newText;
      textarea.focus();
      const cursorPos = selectedText ? start + markdownTag.length + selectedText.length : start + markdownTag.length;
      textarea.setSelectionRange(cursorPos, cursorPos);
    }
  });
});

写一个轻量的转换函数，把Markdown标记转成对应HTML；如果需要支持更复杂的格式（比如列表、代码块），可使用成熟的Markdown解析库（如marked.js）：

function markdownToHtml(markdown) {
  let html = markdown;
  // 替换加粗
  html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
  // 替换斜体
  html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
  // 替换引用
  html = html.replace(/^> (.*)$/gm, '<blockquote>$1</blockquote>');
  // 换行转<br>
  html = html.replace(/\n/g, '<br>');
  return html;
}

绑定发布按钮事件，获取输入内容并渲染到展示区：

const submitBtn = document.getElementById('submitPost');
const postDisplay = document.getElementById('postDisplay');

submitBtn.addEventListener('click', () => {
  const rawContent = textarea.value.trim();
  if (!rawContent) return;
  const renderedHtml = markdownToHtml(rawContent);
  postDisplay.innerHTML = renderedHtml;
  // 清空输入框
  textarea.value = '';
});

这样就能实现：点击工具栏按钮给输入内容添加Markdown格式标记，发布后内容按加粗、斜体、引用等样式展示。

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