editor.md支持自定义
工具栏，可以通过以下步骤实现：
1. 在
editor.md的配置对象中，定义自定义
工具栏的按钮组，例如：
```javascript
var
editor =
editormd("
editormd", {
// 其他配置项...
toolbarCustom: [
{
name: "group1",
items: ["bold", "italic", "strikethrough", "underline"],
},
{
name: "group2",
items: ["my-button"],
},
],
toolbarIcons: function() {
return {
"my-button": '<i class="fa fa-smile-o"></i>',
};
},
toolbarHandlers: {
"my-button": function(cm, icon, cursor, selection) {
// 自定义按钮的点击事件
// ...
},
},
});
```
以上代码中，`toolbarCustom`用于定义自定义
工具栏的按钮组，该属性的值是一个数组，每个元素代表一个按钮组，包含两个属性：`name`表示按钮组的名称，`items`表示该按钮组中包含的按钮列表；`toolbarIcons`用于定义自定义按钮的图标；`toolbarHandlers`用于定义自定义按钮的点击事件。
2. 在CSS文件中，添加自定义
工具栏的样式：
```css
.
editor-toolbar-custom .toolbar-group-group1 {
background-color: #f2f2f2;
}
.
editor-toolbar-custom .toolbar-group-group2 {
background-color: #e6e6e6;
}
```
以上代码中，定义了两个
工具栏组的背景色。
3. 在页面中添加HTML元素，用于显示自定义
工具栏：
```html
<div id="
editormd">
<div id="
editor-toolbar" class="
editor-toolbar"></div>
<textarea></textarea>
</div>
```
其中，`
editor-toolbar`用于显示
工具栏。
4. 在JavaScript中，初始化自定义
工具栏：
```javascript
var
editorToolbar = $("#
editor-toolbar");
$.each(
editor.settings.toolbarCustom, function(i, group) {
var groupDiv = $("<div>").addClass("toolbar-group toolbar-group-" + group.name);
$.each(group.items, function(i, item) {
var button = $("<a>").addClass("toolbar-icon toolbar-icon-" + item);
var icon =
editor.settings.toolbarIcons[item];
if (icon) {
button.html(icon);
}
button.click(function() {
var handler =
editor.settings.toolbarHandlers[item];
if (handler) {
handler(
editor.cm, button,
editor.cm.getCursor(),
editor.cm.getSelection());
}
});
groupDiv.append(button);
});
editorToolbar.append(groupDiv);
});
```
以上代码中，首先获取
工具栏元素`
editorToolbar`，然后循环遍历
工具栏按钮组`
editor.settings.toolbarCustom`，对于每个按钮组，创建一个`div`元素，并添加`toolbar-group`和`toolbar-group-{name}`两个CSS类，其中`{name}`为按钮组的名称；然后循环遍历按钮组中的每个按钮，创建一个`a`元素，并添加`toolbar-icon`和`toolbar-icon-{item}`两个CSS类，其中`{item}`为按钮的标识符，在`toolbarIcons`中定义；然后给按钮绑定`click`事件，在事件处理函数中调用按钮的点击处理函数`
editor.settings.toolbarHandlers[item]`。最后将按钮添加到按钮组中。
975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
