自定义菜单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>

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

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

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