Question

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

我可以创建按钮并使其显示在按钮栏中：

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有文档，但我没有把它作为一个例子，所以我不知道它在实践中是如何运作的。

任何指针？

Answer 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()，{{1} }，isActive()函数在Extensions

的文档中进行了解释

如何在daviferreira的媒体编辑器中添加自定义按钮？

1 个答案: