Editor - 百度编辑器
实例化编辑器
var ue = UE.getEditor('editor2', {
toolbars: [[
'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', '|',
'selectall', 'cleardoc', '|',
'fontfamily', 'fontsize', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
'simpleupload', '|',
'removeformat', '|'
]],
iframeCssUrl: '../ueditor/themes/editor2.css',
initialFrameHeight:500,
enableAutoSave: false,
enableContextMenu: false,
elementPathEnabled : false,
focus:false,
autoHeightEnabled:false
});
选中编辑器的内容
ue.execCommand('selectall');
获取编辑器的内容
var cont = ue.getContent();
获取编辑器中选中的内容
//获取选中的内容
var range = ue.selection.getRange();
range.select();
//选中内容的纯文本
var txt1 = ue.selection.getText();
去除选中内容节点内的最近的 span 标签
var range = ue.selection.getRange();
range.select();
range.removeInlineStyle(["span"]);
为选中的内容增加 span 标签,并赋予 span 标签 style 样式
var range = ue.selection.getRange();
range.select();
range.applyInlineStyle("span",{"style":"font-size: 32px;"});
赋予编辑器内容
ue.setContent(cont, false);
清空编辑器的内容
ue.execCommand('cleardoc');
自定义按钮
UE.registerUI('button1',function(editor,uiName){
editor.registerCommand(uiName,{
execCommand:function(){
alert("执行操作");
}
});
var btn = new UE.ui.Button({
name:uiName,
title:'按钮名称',
cssRules :'background-image:url(../ueditor/themes/default/images/test.png) !important;background-size:22px 22px;zoom:2;',
onclick:function () {
editor.execCommand(uiName);
}
});
return btn;
},'28','editor2');
自定义弹出框
UE.registerUI('dialog1',function(editor,uiName){
// 创建dialog
var dialog = new UE.ui.Dialog({
editor:editor,
name:uiName,
title:"弹出框标题",
cssRules:"width:260px;height:125px;",
buttons:[
{
className:'edui-okbutton',
label:'确定',
onclick:function (){
alert("执行操作");
dialog.close(true);
}
},
{
className:'edui-cancelbutton',
label:'取消',
onclick:function () {
dialog.close(false);
}
}
],
content:'<div style="padding: 10px;">' +
'<textarea id="myDialog1" name="myDialog1" style="width:98%;height:30px;"></textarea>' +
'<span style="font-size: 5px;">test</span></div>'
});
//创建一个按钮,点击后出现对话框
var btn = new UE.ui.Button({
title:'按钮名称',
//自定义按钮样式
name:'myFirst'+uiName,
cssRules :'background-image:url(../ueditor/themes/default/images/test.png) !important;background-size:22px 22px;zoom:2;',
onclick:function () {
//渲染对话框并弹出
dialog.render();
dialog.open();
}
});
return btn;
},'26','editor2');
事件的监听
ue.addListener('selectionchange', function(){
//要监听的变化
});
自定义引用样式示例
UE.registerUI('myblockquote',function(editor,uiName){
editor.registerCommand(uiName,{
execCommand:function(){
this.execCommand('blockquote',{
"style":"border-left: 3px solid #E5E6E1; margin-left: 0px; padding-left: 5px; line-height:36px;"
});
}
});
var btn = new UE.ui.Button({
name:uiName,
title:'自定义引用',
cssRules :"background-position: -220px 0;",
onclick:function () {
editor.execCommand(uiName);
}
});
//每当编辑器内部选区发生改变时,将触发该事件
editor.addListener('selectionchange', function () {
var state = editor.queryCommandState('blockquote');
console.log(state);
if (state == -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
return btn;
});
此例为点击该按钮时,为其添加相应的样式。
To be continued ...
静静的看着大佬装逼,不打扰。
大佬别这样,我很菜的 ๑乛◡乛๑