uni-app的markdown富文本编辑器插件

此插件仅简单封装了一下,有复杂需求的可以自己扩展,图片上传需要在插件里配置uni.upload的url以及回调信息.

参数名	类型	描述
textareaData	String	绑定的markdown文本
textareaHtml	String	markdwon转义后的html
showPreview	Boolean	是否显示预览view

wuwangju 1楼•10 小时前

在uni-app中实现Markdown富文本编辑器功能，你可以使用现有的插件或自行集成相关库。下面是一个简单的集成案例，利用markdown-it库来解析Markdown，并借助uView UI（一个基于uni-app的UI框架，它提供了丰富的组件）来实现一个基础的Markdown编辑器。

1. 安装依赖

首先，确保你的项目已经安装了markdown-it和uView UI。如果未安装，可以通过以下命令安装：

npm install markdown-it --save
npm install uview-ui --save

2. 配置uView UI

在main.js中引入uView UI：

import Vue from 'vue';
import App from './App';
import uView from 'uview-ui';

Vue.use(uView);

new Vue({
    render: h => h(App),
}).$mount('#app');

3. 创建Markdown编辑器组件

在components目录下创建一个MarkdownEditor.vue文件，内容如下：

<template>
    <view>
        <u-textarea v-model="markdownContent" placeholder="输入Markdown内容"></u-textarea>
        <view v-html="compiledMarkdown"></view>
    </view>
</template>

<script>
import MarkdownIt from 'markdown-it';

export default {
    data() {
        return {
            markdownContent: '',
            md: new MarkdownIt()
        };
    },
    computed: {
        compiledMarkdown() {
            return this.md.render(this.markdownContent);
        }
    }
};
</script>

<style scoped>
/* 样式可根据需要调整 */
textarea {
    height: 200px;
    margin-bottom: 20px;
}
</style>

4. 使用Markdown编辑器组件

在你的页面（如pages/index/index.vue）中引入并使用这个组件：

<template>
    <view>
        <MarkdownEditor />
    </view>
</template>

<script>
import MarkdownEditor from '@/components/MarkdownEditor.vue';

export default {
    components: {
        MarkdownEditor
    }
};
</script>

总结

以上代码展示了一个简单的Markdown富文本编辑器集成方案，使用了markdown-it库来解析Markdown内容，并通过uView UI的u-textarea组件来输入Markdown文本。编译后的Markdown内容通过v-html指令直接渲染到页面上。

当然，这只是一个基础示例，你可以根据实际需求进行功能扩展，比如添加Markdown语法高亮、图片上传等功能。希望这个示例对你有所帮助！