牛骨文教育服务平台(让学习变的简单)

自定义菜单UI

编辑器菜单栏默认使用的是目前比较主流、简介的字体图标,如果因为特殊需求想自定义菜单的UI,完全可以。例如下图将『粗体』和『斜体』菜单,换成普通的按钮形式。


可通过editor.UI.menus配置每个菜单的UI,代码示例如下,注意代码中的注释:

<div id="div1">
    <p>请输入内容...</p>
</div>


<!--这里引用jquery和wangEditor.js-->
<script type="text/javascript">
    var editor = new wangEditor("div1");
    
    // bold 是菜单的id,所有菜单的id,可在自定义菜单的文档中找到
    editor.UI.menus.bold = {
        // normal 配置正常状态下显示的UI
        normal: "<button style="font-size:20px; margin-top:5px;">B</button>",
        // selected 配置选中状态下的UI,.selected 说明菜单在选中状态下要增加一个 selected class
        selected: ".selected"
    };
    
    editor.UI.menus.italic = {
        normal: "<button style="font-size:20px; margin-top:5px;">I</button>",
        // selected 配置选中状态下的UI,除了上文配置样式之外,还可以配置一个单独的标签节点
        selected: "<button style="font-size:20px; margin-top:5px;"><i>I</i></button>"
    };
    
    editor.create();
</script>

『正常状态』和『选中状态』的说明:

  • 正常状态:例如,编辑区域的光标处于一段非链接状态的文字中时,『插入链接』菜单显示为 ,这就是正常状态 ;
  • 选中状态:例如,编辑区域的光标处于一个链接中时,『插入链接』菜单显示为 ,这就是选中状态;

总结:『选中状态』即是光标所处的位置的文字格式,符合菜单操作之后的结果,而对菜单做出特殊标记。