Vue.js Markdown编辑器：contenteditable换行(\n)问题求助

嘿，我之前做Vue的Markdown编辑器时也踩过这个换行的坑！给你几个实用的方案，帮你实现类似GitHub和Stack Overflow那样的整洁排版效果：

方案一：快速处理换行（适合简单场景） #

Vue的双大括号{{ }}插值会把\n当成普通文本直接输出，不会解析成换行。我们可以手动把换行符转换成HTML的<br>标签，再用v-html渲染，同时配合CSS优化排版：

1. 添加文本处理方法：
   在组件的methods里写一个转换函数：

methods: {
  formatLineBreaks(text) {
    // 把所有换行符替换成<br>，同时保留原有的空格
    return text ? text.replace(/\n/g, '<br>') : '';
  }
}

2. 模板中渲染处理后的文本：

<div v-html="formatLineBreaks(editorContent)" class="markdown-preview"></div>

3. 添加CSS优化排版：
   加上这段CSS，让换行和段落间距更接近GitHub的风格：

.markdown-preview {
  line-height: 1.6;
  white-space: pre-wrap; /* 保留换行和空格，同时自动换行避免横向滚动 */
  margin-bottom: 1.5em;
}

方案二：用专业Markdown解析库（推荐完整编辑器场景） #

如果你的编辑器需要支持完整的Markdown语法（比如粗体、标题、列表等），直接用成熟的解析库更靠谱，比如markdown-it或者marked，它们会自动处理换行和所有Markdown规则：

1. 安装解析库：
   以markdown-it为例，先安装：

npm install markdown-it --save

2. 在组件中集成：

import MarkdownIt from 'markdown-it';
// 初始化解析器，默认配置就和GitHub的Markdown规则很接近
const mdParser = new MarkdownIt();

export default {
  data() {
    return {
      editorContent: '' // 绑定到你的输入框v-model
    };
  },
  computed: {
    renderedMarkdown() {
      // 实时解析输入的Markdown文本
      return mdParser.render(this.editorContent);
    }
  }
}

3. 模板中渲染解析结果：

<div v-html="renderedMarkdown" class="markdown-preview"></div>

这种方式不仅能完美处理换行，还能解析所有标准Markdown语法，完全复刻GitHub/Stack Overflow的排版效果。

额外注意：XSS安全问题 #

如果你的编辑器允许用户输入公开内容，一定要注意v-html的XSS风险！可以搭配DOMPurify库过滤解析后的HTML，防止恶意脚本注入：

npm install dompurify --save

然后在解析后添加过滤：

import DOMPurify from 'dompurify';

// 在computed里修改：
renderedMarkdown() {
  const rawHtml = mdParser.render(this.editorContent);
  return DOMPurify.sanitize(rawHtml);
}

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