如何在 daviferreira 的中型编辑器中添加自定义按钮？答案

【问题标题】：How to add a custom button in daviferreira's medium-editor?如何在 daviferreira 的中型编辑器中添加自定义按钮？
【发布时间】：2015-03-11 04:35:36
【问题描述】：

我想在中型编辑器按钮栏中添加一个按钮以创建自定义样式（在本例中为红色文本）。

我可以创建按钮并让它出现在按钮栏中：

var medium = new MediumEditor(editorBox, {
    buttons: ['bold', ..., 'red'],
    extensions: {
        'red': new MyButton({label: 'R', style: 'color:red'})
    }
});

function MyButton(options) {
    this.options = options;
};

MyButton.prototype.getButton = function(instance) {
    return '<button><span style="' + this.options.style + '">' + this.options.label + '</span></button>';
};

我不太懂 Javascript。 https://github.com/daviferreira/medium-editor/wiki/Custom-Buttons-and-Extensions#buttons-defaultbutton-object 有文档，但我认为没有任何文档可以作为示例，所以我不知道它在实践中是如何工作的。

任何指针？

【问题讨论】：

标签： javascript medium-editor

【解决方案1】：

因此，您可以在链接到的页面底部找到与您尝试执行的操作类似的示例：Examples

如果您要实现基本扩展，则需要将onclick 处理程序附加到您在getButton() 中返回的按钮。

所以你需要修改你的 getButton() 方法来做这样的事情：

MyButton.prototype.getButton = function(instance) {
    var button = document.createElement('button');
    button.innerHTML = '<span style="' + this.options.style + '"'> + this.options.label + '</span>';
    button.addEventListener('click', this.onClick.bind(this));
    return button;
};

您可以在Highlighter Button Example 中看到这样的示例。在这种情况下，按钮在构造函数中创建，分配给this.button，并附加了onclick 处理程序。

此示例使用rangy 和CSS Class Applier Module 将更改应用于当前选定的文本。

对于您的情况，您可以这样做（假设您使用 rangy）：

MyButton.prototype.onClick = function(event) {
    var applier = rangy.createClassApplier("your-red-text-class");
    applier.toggleSelection();
}

您可以创建类应用程序作为构造函数的一部分，并在每次单击按钮时重用它。

要根据当前选择使工具栏中的按钮处于“活动”或“非活动”状态，您可以像 Highligher 示例一样实现 checkState()，或者实现 isAlreadyApplied()、isActive()、setActive() 函数在Extensions的文档中解释了

【讨论】：