Как добавить пользовательскую кнопку в редактор среды daviferreira?

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 есть документация, но я ничего не знаю в качестве примера, поэтому я не знаю, как это работает на практике.

Есть указатели?

Answer 1

Таким образом, вы можете найти пример чего-то похожего на то, что вы пытаетесь сделать, внизу страницы, на которую вы ссылались: Примеры

Если вы реализуете базовое расширение, вам необходимо 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;
};

Вы можете увидеть пример этого в примере с кнопкой выделения. В этом случае кнопка создается в конструкторе, назначенном this.button и onclick обработчик прилагается.

В этом примере используются rangy и модуль CSS Class Applier для применения изменений к текущему выделенному тексту.

Для вашего случая вы можете сделать что-то вроде этого (при условии, что вы используете rangy):

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

Вы можете создать applier класса как часть конструктора и просто использовать его каждый раз при нажатии кнопки.

Чтобы ваша кнопка на панели инструментов была "активной" или "неактивной" в зависимости от текущего выбора, вы можете реализовать checkState() как пример Highligher или isAlreadyApplied(), isActive(), setActive() функции, описанные в документации по расширениям