<vue-ueditor-wrap :config="config" ref="ued" @ready="ready" @beforeInit="addCustomButtom"></vue-ueditor-wrap>
addCustomButtom重点这个方法
addCustomButtom (editorId) {
var that = this;
window.UE.registerUI('test-button', function (editor, uiName) {
// 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function () {
editor.execCommand('inserthtml', ``);
}
})
// 创建一个 button
var btn = new window.UE.ui.Button({
// 按钮的名字
name: uiName,
// 提示
title: '插入文字',
// 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
cssRules: "background-position: -380px 0px;",
// 点击时执行的命令
onclick: function () {
// 这里是我自己封装的上传图片功能可以忽略, 重点插入图片 editor.execCommand('inserthtml', '<img src="'+url+'"/>');
window.qiniuChange('.ueUpload #pickfiles',function(url){
// console.log(url);
editor.execCommand('inserthtml', '<img src="'+url+'"/>');
document.getElementById('pickfiles').value='';
})
// console.log('自定义button')
}
})
// 当点到编辑内容上时,按钮要做的状态反射
editor.addListener('selectionchange', function () {
// var state = editor.queryCommandState(uiName);
// if (state === -1) {
// btn.setDisabled(true);
// btn.setChecked(false);
// } else {
// btn.setDisabled(false);
// btn.setChecked(state);
// }
})
// 因为你是添加 button,所以需要返回这个 button
return btn;
}, 55 /* 指定添加到工具栏上的哪个位置,默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */)
},