Ueditor/自定义工具栏

此条目用于说明Ueditor自定义工具栏

步骤一：创建编辑器

    var option = {
    initialContent: 'hello world',//初始化编辑器的内容
    minFrameHeight: 200,
    iframeCssUrl :'../../themes/default/iframe.css'    //给iframe样式的路径
    };
    //实例化编辑器
    var myeditor = new baidu.editor.Editor(option);

步骤二：给自定义的ui注册事件

   myeditor.addListener('selectionchange', function (){
    var cmdName = ['bold','italic','underline','strikethrough'],
    fontName = ['fontfamily','fontsize'],i=-1,
    range = myeditor.selection.getRange();//得到选中区域
    //判断是否为封闭标签
    if(range.collapsed){
        document.getElementById("bold").disabled = true;
        document.getElementById("italic").disabled = true;
        document.getElementById("underline").disabled = true;
        document.getElementById("strikethrough").disabled = true;
        document.getElementById("fontfamily").disabled = true;
        document.getElementById("fontsize").disabled = true;
        document.getElementById("fontColor").disabled = true;
    }else{
        document.getElementById("bold").disabled = false;
        document.getElementById("italic").disabled = false;
        document.getElementById("underline").disabled = false;
        document.getElementById("strikethrough").disabled = false;
        document.getElementById("fontfamily").disabled = false;
        document.getElementById("fontsize").disabled = false;
        document.getElementById("fontColor").disabled = false;
    }
    while(i++ < cmdName.length-1){
        //分别判断underline和strikethrough的命令
        if(cmdName[i] == "underline"){
            var val = myeditor.queryCommandValue("underline");
            if(val == "underline"){
                document.getElementById(cmdName[i]).style.color = "red";
            }else{
                document.getElementById(cmdName[i]).style.color = "";
            }
        }else if(cmdName[i] == "strikethrough"){
            var val = myeditor.queryCommandValue("underline");
            if(val == "line-through"){
                document.getElementById(cmdName[i]).style.color = "red";
            }else{
                document.getElementById(cmdName[i]).style.color = "";
            }
        }else{
            var state = myeditor.queryCommandState(cmdName[i]);
            if(state == 1){
                document.getElementById(cmdName[i]).style.color = "red";
            }else{
                document.getElementById(cmdName[i]).style.color = "";
            }
        }
    }
    i = -1;
    while(i++<fontName.length-1){
        var fstate = myeditor.queryCommandValue(fontName[i]).toLowerCase();
        var fselect = document.getElementById(fontName[i]);
        for(var j= 0;j<fselect.options.length;j++){
            if(fselect.options[j].value.toLowerCase().indexOf(fstate.split(",")[0])!=-1){
                fselect.options[j].selected = "true";
            }
        }
    }
    var fcolor = myeditor.queryCommandValue("forecolor");
    document.getElementById("fontColor").style.color = fcolor;
   });

参考来源

• http://ueditor.baidu.com/onlinedemo.html

Ueditor使用手册导航
针对普通使用者： 部署和体验|自定义配置|自定义工具栏|表单提交|重置编辑器|多编辑器|自定义编辑器|文本域渲染|前后端数据整合 针对二次开发者： 整体架构|插件机制|自定义插件开发 若干专题教程 相关问题