Editor百度编辑器 增加自定义工具栏功能按钮,选定内容插入html代码css字体样式

比如增加一个按钮.点击以后,选定文字直接加粗,字号18px,颜色绿色,点击一次.三次操作一次性合并
如下效果
在这里插入图片描述

					<script type="text/javascript">
//假如只有一个编辑器,可以这样
//var editor = new UE.ui.Editor({initialFrameHeight:200});
//editor.render("editor");
//多个编辑器
					    var va="{$v.entitle}";//PHP动态得到编辑器id
						UE.getEditor(va);
						
	//定义按钮       
    UE.registerUI('button2', function(va, uiName) {
    va.registerCommand(uiName, {
        execCommand: function() {
           // alert('execCommand:' + uiName)
        }
    });
    //创建一个button
    var btn = new UE.ui.Button({
        //按钮的名字
        name: uiName,
        //提示
        title: "加粗 自定义字体颜色",
        //下面添加额外样式,指定icon图标,这里默认使用一个重复的icon
        cssRules: '',
        //点击时执行的命令
        onclick: function() {
            //可省略
            //editor.execCommand(uiName);
	

//利用原有功能,叠加实现	
// editor.execCommand('inserthtml', 'hello!');
 va.execCommand(uiName);
 va.execCommand('bold'); //加粗
va.execCommand('fontSize','17px!important'); 
 va.execCommand('forecolor', '#3cbfae'); 

//或直接插入html代码,实现更复杂功能
//  var range = UE.getEditor('editor').selection.getRange();
         //   range.select();
      // var txt = UE.getEditor('editor').selection.getText();
		//editor.execCommand('insertHtml', "<span style='font-weight:700;font-size:18px;color:#3cbfae'>"+txt+"</span>");;
        }
    });
    //当点到编辑内容上时,按钮要做的状态反射 这个无无效,不知原因
    va.addListener('selectionchange', function() {
        var state = va.queryCommandState(uiName);
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });
    //因为你是添加button,所以需要返回这个button
    return btn;
}, [1, [va]]);//1表示位置


					</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值