在做博客后台的时候，找了好多富文本编辑器，都不太理想，百度的UED太重了，配置也比较复杂，最终找到了一款markdown类型的编辑器，集成到项目中感觉不错，分享给大家

tinymce 官方vue组件

这里推荐使用一款封装过的 @packy-tang/vue-tinymce

使用流程

//引入 @packy-tang/vue-tinymce
npm install @packy-tang/vue-tinymce --save

组件内使用

<template>
    <div>
        <div class="form-box">
            <mavon-editor ref="md" v-model="content" language="zh-CN" ishljs @imgAdd="imgUpload" @change="change" codeStyle="xcode" />

        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {

                content: "",// markdown 格式内容
                html: "",//富文本格式内容
            }
        },
        created() {

        },
        methods: {
            imgUpload(pos, $file) { //富文本图片上传
                console.log(pos);
                let formdata = new FormData();
                formdata.append('image', $file);
                this.$http.post('/imgUpload', formdata).then((res) => {
                    console.log(res);
                    if (res.status == 200 && res.data.state) {
                        let path = res.data.path;
                        this.$refs.md.$img2Url(pos, path);
                    }
                })
            },
            change(value, html) {//富文本内容改变
                this.html = html;
            },
        }
    }
</script>

<style lang="scss">

</style>

图片上传默认回转为base64格式的数据，插入到富文本中，我们可以使用imgAdd方法对图片进行上传 change 回调方法中的第二个参数为 markdow格式转为html富文本后的格式

支持边输入，边预览