0

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

我可以创建按钮并使其出现在按钮栏中：

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有文档，但没有任何我认为的例子，所以我不知道如何它在实践中有效。

任何指针？

4

1 回答 1

4

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

如果您正在实现基本扩展，则需要将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 类应用程序模块将更改应用到当前选定的文本。

对于您的情况，您可以执行以下操作（假设您使用 rangy）：

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

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

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

于 2015-03-09T14:32:00.207 回答