关于uniapp:发布了新插件基于editor创作的富文本编辑器

因为我的项目须要 @谁来看的性能，所以依据官网 editor 二次封装了一个富文本编辑器，想着可能你们心愿本人定义编辑器按钮，所以把按钮组件提出来了，你能够自在更换，想着你可能更心愿基于 api 本人设计编辑器，所以把性能都给你封装到 Class Edit 类了，你只需 new Edit，外面丰盛的 api 就都是你的了。

上面是插件介绍：

插件地址：https://ext.dcloud.net.cn/plugin?name=lsj-edit

创作不易，若能帮到你请不要手软点亮 5 颗星~

应用组件前必读

• 此组件是对 editor 组件二次封装，减少了相似微信的 @谁来看 和 相似微博的插入 #话题等性能
• 如心愿插入话题或 @后光标不指向最初而指向话题前面，须要在 editor 组件源码退出一段代码，须要能够加 Q 群发你
• 为了不便大家更换按钮控件，我将控制器按钮和编辑器画布拆分成了两个组件
• 你齐全能够自定义编辑器，所有性能都封装到了 edit 类，不便各位调用, 查看 Edit 具体文档

• 因为比拟懒，只测试了 H5 和 App 端，其余端懒得测了，如果遇到问题能够群里 Q 我

  划重点！！！

  如果你心愿自定义编辑器，Edit 类实例的办法和事件机制你须要理解, 具体查看示例我的项目或查看 Edit 具体文档

根本应用

lsj-edit 组件属性与事件绑定

附带的按钮 edit-btns 组件属性与事件绑定

VUE

<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>

JS

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,}
            })
        }
    }
}

Edit 类实例的办法和事件机制

Edit 实例办法

tool

• 调用 editorContext 对象的事件，如撤销 undo, 复原 redo, 清空内容 clear, 失焦 blur 等
• 调用形式：edit.tool(‘blur’)

format

• 批改款式, 反对的值可查看 editorContext format
• 调用形式：edit.format(‘color’,’#999999′)

getContents

• 获取编辑器内容, 返回 Promise.resolve
• 调用形式：await edit.getContents()

upKeyboard

• 使光标进入编辑器并唤起键盘
• 调用形式：edit.upKeyboard()

emoji

• 插入 emoji 表情
• 调用形式：edit.emoji(‘😀’)

addLink

• 插入带参数的链接，如插入 #话题或 @谁
• 调用形式：edit.addLink(Object)

getLink

• 获取编辑器内增加的所有链接
• 调用形式：edit.getLink()

addImage

• 通过相册 / 相机抉择图片并增加到编辑器中，此时图片是本地门路，在公布前应将图片上传，具体可查看示例我的项目 index.vue 提交事件示例;
• 调用形式：edit.addImage(tempFilePaths)

getImages

• 获取编辑器内增加的所有图片
• 调用形式：edit.getImages()

replaceImage

• 替换图片，编辑器内每个图片都会触发传入的 fn, 依据须要可自行替换成新的图片地址，用于将本地图片上传到服务器
• 必须传入 Function，且必须 return 一个图片地址
• 调用形式：edit.replaceImage(fn)

// 提交前将所有未上传的本地图片上传到服务器并替换到编辑器
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;
    
}).then(res=>{console.log('所有图片替换实现, 返回最新的 detail',JSON.stringify(res));
});    

事件机制

• Edit 为您设计了观察者模式，您能够在须要的中央注册和发送事件

$fire(eventName,any)

• 发送事件

• 示例：

  edit.$fire('edit:focus', detail);

$on([eventName, callback])

• 注册事件

• 示例：

  edit.$on('edit:focus',(e)=> {console.log('监听光标进入',e);
  })

$off([eventName, callback])

• 移除某个注册的事件

• 示例：

  edit.$off('edit:focus', (e)=> {console.log('监听光标进入',e);
  });

Edit 内置的事件

• 只需在须要的中央注册即会主动在对应的机会触发

舒适提醒

0. 如阐明表白还不够分明，不分明怎么应用可导入残缺示例我的项目运行体验和查看
1. 欢送退出 QQ 探讨群：701468256(已满)
2. 欢送退出 QQ 探讨群：469580165(已满)
3. 欢送退出 QQ 探讨群：667530868
4. 若能帮到你还请点亮 5 颗小星星以作激励哈~
5. 若能帮到你还请点亮 5 颗小星星以作激励哈~
6. 若能帮到你还请点亮 5 颗小星星以作激励哈~