uniapp markdown编辑器如何实现

我想在uniapp中集成一个markdown编辑器，但不知道如何实现。有没有现成的插件或组件可以直接使用？如果需要自己开发，应该怎么处理markdown的解析和预览功能？最好能支持实时预览和代码高亮。求具体的实现方案或推荐可用的第三方库！

2 回复

使用uniapp开发markdown编辑器，推荐使用marked.js解析markdown语法，配合textarea或rich-text组件实现编辑和预览。可添加代码高亮、图片上传等功能。建议分屏显示编辑区和预览区，实时渲染效果。


在UniApp中实现Markdown编辑器，可以通过以下步骤：

1. 核心思路

  • 输入区域：使用textarea或富文本编辑器组件接收用户输入
  • 预览区域：使用Markdown解析库将输入内容实时渲染为HTML
  • 双向绑定：通过Vue的数据绑定实现编辑和预览的实时同步

2. 实现方案

方案一：使用第三方库（推荐）

// 1. 安装marked库（HBuilderX项目可在插件市场搜索）
npm install marked

// 2. 页面结构
<template>
  <view class="editor-container">
    <view class="edit-section">
      <textarea v-model="markdownText" placeholder="输入Markdown内容" />
    </view>
    <view class="preview-section">
      <rich-text :nodes="htmlContent"></rich-text>
    </view>
  </view>
</template>

<script>
import marked from 'marked';

export default {
  data() {
    return {
      markdownText: '',
      htmlContent: []
    }
  },
  watch: {
    markdownText: {
      handler(newVal) {
        this.htmlContent = this.parseMarkdown(newVal);
      },
      immediate: true
    }
  },
  methods: {
    parseMarkdown(text) {
      // 注意：rich-text组件需要数组格式
      return [{
        name: 'div',
        attrs: { class: 'markdown-body' },
        children: marked.parse(text)
      }];
    }
  }
}
</script>

<style>
.editor-container {
  display: flex;
  height: 100vh;
}
.edit-section, .preview-section {
  flex: 1;
  padding: 10px;
}
textarea {
  width: 100%;
  height: 100%;
}
</style>

方案二：使用WXRICH插件（小程序兼容更好）

  1. 在HBuilderX插件市场搜索"wxRich"安装
  2. 支持更丰富的小程序富文本组件特性

3. 注意事项

  • 样式优化：可引入GitHub Markdown CSS样式
  • 性能优化：对输入内容进行防抖处理
  • 安全性：注意XSS防护，可使用DOMPurify sanitize

4. 扩展功能建议

  • 添加工具栏插入语法
  • 支持图片上传
  • 本地存储草稿
  • 导出HTML/PDF功能

以上方案可快速实现基础Markdown编辑器，根据需求选择适合的方案即可。

回到顶部