UEeditor vue-ueditor-wrap关于自定义按钮 和在当前焦点插入内容踩坑
踩坑vue-ueditor-wrap 这个封装了 UEeditor富文本 ,在@ready 会返回 富文本实例<vue-ueditor-wrap @ready="ready" ref="vueUeditor" :config="myConfig" v-model="content"@beforeInit="addCustomButtom"/>ready (editorInstance)
·
踩坑
vue-ueditor-wrap 这个封装了 UEeditor富文本 ,在@ready 会返回 富文本实例
<vue-ueditor-wrap @ready="ready" ref="vueUeditor" :config="myConfig" v-model="content" @beforeInit="addCustomButtom"/>
ready (editorInstance) {
this.editorInstance=editorInstance
},
只有在ready 把当前富文本实例赋值给当前data变量,自定义素材库的时候,才能把图片和文本插入到当前焦点位置
自定义按钮
在beforeInit事件的时候 加入自定义按钮 上代码
addCustomButtom (editorId) {
var that = this
// test-button 这个原数组需要存在 取之前的名字 或者 更改源码
window.UE.registerUI('test-button', (editor, uiName) => {
// 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
// editor.registerCommand(uiName, {
// execCommand: function () {
// editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`)
// }
// })
// 创建一个 button
const btn = new window.UE.ui.Button({
// 按钮的名字
name: uiName,
// 提示
title: '',
// 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
cssRules: 'background-image: url(\'https://dacai-static-1304549078.cos.ap-shanghai.myqcloud.com/78f784218083487ddae2846960fe8fc818c2d8fa\') !important;background-size: cover',
// 点击时执行的命令
onclick: function () {
that.fileUploadLibraryShow = true
}
})
// 粘贴后的事件
editor.addListener('afterpaste', function (cmd,html) {
})
// 粘贴前的事件
editor.addListener('beforepaste',(cmd, html)=> {
})
// 因为你是添加 button,所以需要返回这个 button
return btn
})
}
这就是自定义按钮及其点击事件
当前焦点插入
好多会自定义素材库组件,选择完图片之后 插入到当前焦点位置,而不是文章最后
// 素材库确定按钮传递数据
change (data) {
this.editorInstance.execCommand('inserthtml', `<img src="${*******}" >`);
}
更多推荐
已为社区贡献7条内容
所有评论(0)