lsj-edit富文本编辑-基于editor创作 editor 富文本 输入框 @谁来看 话题基于editor创作API型插件，提供丰富方法，可根据需要自由创作

lsj-edit富文本编辑-基于editor创作 - DCloud 插件市场

<template>
	<view class="content">
    <lsj-edit 
ref="lsjEdit" 
placeholder="输入正文"
:maxCount="200"
@onReady="editReady">
    <template v-slot:btns="data">
        <edit-btns 
        :edit="data.edit" 
        @click="onTabClick" 
        @submit="save"></edit-btns>
    </template>
</lsj-edit>
</view>
</template>
<script>
import editBtns from '@/uni_modules/lsj-edit/components/lsj-edit/edit-btns/edit-btns.vue';
export default {
    components:{
        // 富文本基本操作按键，可自行选择是否使用示例的按键
        editBtns
    },
    data() {
        return {
            edit: null
        }
    },
    methods: {
        // 编辑器初始化完毕，返回edit对象
        editReady(edit) {
            // 将富文本对象存放到当前页面，便于后续直接操作
            this.edit = edit;
        },
        // 演示----按钮组件点击事件
        onTabClick({name,index}) {
            switch (index){
                // 插入#话题#
                case 0:
                    this.addLink();
                    break;
                // @某人
                case 1:
                    this.addLink2();
                    break;
                default:
                    break;
            }
        },
        // 演示发布
        async save() {
            // 获取插入的图片列表
            let imgs = await this.edit.getImages()
            // 判断是否允许提交
            if (!this.edit.textCount && !imgs.length) {
                uni.showToast({
                    title: '请录入内容'
                });
            }

            // 将所有未上传的本地图片上传到服务器并替换到编辑器
            this.edit.replaceImage(async(img)=>{
                // 已上传的无需再上传
                // 这里没有放到edit内部去过滤，因为我觉得需不需要上传得你自己决定
                // 比如插入的base64图片是否需要上传
                // img.indexOf('http') = 0说明这个图片已经是网络地址，无需替换就直接跳过
                if(img.indexOf('http') === 0) {return img;}

                // 上传并替换图片
                /* 
                    let {data} = await uni.uploadFile({
                        url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
                        filePath: img, //本地图片
                        name: 'file',
                        formData: {
                            'user': 'test'
                        }
                    });
                    return data;
                 */

                // 因为演示的时候没有服务器，所以直接换个网络图方便后续演示，
                // 实际项目应使用上方注释内容
                return 'https://t7.baidu.com/it/u=3406125714,2513313326&fm=193&f=GIF'

            }).then(res=>{
                console.log('替换完成,最终内容为',JSON.stringify(res));

                // 示例项目可查看解析富文本演示
                uni.navigateTo({
                    url: '/pages/article/article?data='+escape(res.html)
                });
            }); 

        },
        // 插入话题示例
        addLink() {
            this.edit.addLink({
                prefix: '#',
                suffix: '#',
                name: '有问题欢迎加入LSJ插件交流群',
                data: {
                    name: 'QQ交流群',
                    qqGroupChatID: '667530868',
                }
            })
        },
        // @某人示例
        addLink2() {
            this.edit.addLink({
                prefix: '@',
                name: '马冬梅',
                data: {
                    userId: 10,
                }
            })
        }
    }
}
</script>