版本: 1.4
过程
- 仔细阅读仓库readme,起手一个demo
- 阅读,基本插件开发如下：
新建js
UE.registerUI('quote',function (editor,uiName) {
var btn = new UE.ui.Button({
//按钮的名字
name: uiName,//提示
title: uiName,//需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
cssRules: 'background-position: -500px 0;',//点击时执行的命令
onclick: function () {
//这里可以不用执行命令,做你自己的操作也可
editor.execCommand('inserthtml','哈哈哈哈哈哈')
}
});
//因为你是<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>button,所以需要返回这个button
return btn;
})
记录
生成弹窗
var dialog = new UE.ui.Dialog({
iframeUrl: editor.options.UEDITOR_HOME_URL + 'dialogs/popup.html',// url
name: 'popup',editor: editor,title: '写入批注',// iframe title
cssRules: "width:600px;height:260px;",// iframe 宽高
buttons: [
{
className: 'edui-okbutton',label: '确定',onclick: function () {
dialog.close(true);
editor.execCommand('html');
}
},{
className: 'edui-cancelbutton',label: '取消',onclick: function () {
dialog.close(false);
}
}]
})
dialog.render(); // 渲染
dialog.open(); // 打开弹出
var popup = new baidu.editor.ui.Popup({
editor: this,content: '',className: 'edui-bubble',_edittext: function () {
baidu.editor.plugins[thePlugins].editdom = popup.anchorEl;
me.execCommand(thePlugins);
this.hide();
},_delete: function () {
if (window.confirm('确认删除该控件吗？')) {
baidu.editor.dom.domUtils.remove(this.anchorEl,false);
}
this.hide();
}
})
popup.render();
$$含义
文本框: < 中的$$含义?
全局查找得知:
baidu.$$ = window[baidu.guid] = window[baidu.guid] || {global:{}};注册插件形式开发
之前registerUI注册UI开发,为了实现更复杂的效果，使用plugins注册
UE.plugins['quote'] = function() {
var me = this,thePlugins = 'quote';
me.commands[thePlugins] = {
execCommand: function () {
}
}
}
生成弹窗后的值如何获取判断？
在弹窗所属的html中，已经全局暴露了一个dialog对象，就是之前new的new UE.ui.Dialog.dialog有一些钩子和方法:
var oNode = null,thePlugins = 'quote';
window.onload = function () {
if (UE.plugins[thePlugins].editdom) {
oNode = UE.plugins[thePlugins].editdom;
var gValue = oNode.getAttribute('value').replace(/"/g,"\"");
gValue = gValue == null ? '' : gValue;
$G('orgvalue').value = gValue;
}
}
dialog.oncancel = function () {
if (UE.plugins[thePlugins].editdom) {
delete UE.plugins[thePlugins].editdom;
}
}
dialog.onok = function () {
if($G('orgvalue').value.trim() == '') {
alert('请输入批注内容')
return false;
}
var gValue=$G('orgvalue').value.replace(/\"/g,"&quot;");
}
