Простой JQuery WYSIWYG редактор вопрос

Question

У меня есть этот редактор под названием jWYSIWYG, в основном это плагин Jquery. Поэтому, когда я выбираю какой-то текст и нажимаю на панели H1 / H2 / p или что-то еще, мой текст оборачивается в соответствующие теги

(например, <h1>My text</h1>).

Мой простой вопрос: Как мне прикрепить определенные классы к этим тегам. Я имею в виду, что каждый раз, когда пользователь нажимает кнопку тега H1, я хочу, чтобы он выдавал что-то вроде

<h1 class="someclassname">H1</h1>

Я знаю, что это должно быть просто, если кто-то может помочь, было бы здорово.

Вот ссылка на проект, который я использую: https://github.com/akzhan/jwysiwyg

Спасибо.

Answer 1

Я знаю, что это старая ветка, но я решил опубликовать свои выводы для других, так как я также искал аналогичный твик для jWYSIWYG.

Вы можете переопределить поведение элементов управления по умолчанию, используя "exec ".

h1: {
    exec: function () {
        var range = this.getInternalRange(),
            common = $(range.commonAncestorContainer),
            $nodeName = range.commonAncestorContainer.nodeName.toLowerCase();
        if (common.parent('h1').length) {
            common.unwrap();
        } else {
            if ($nodeName !== 'body') {
                common.wrap('<h1 class="someclassname" />');
            }
        }
    }
}

Answer 2

глядя на документацию, должно быть что-то вроде этого:

$('#wysiwyg').wysiwyg({
    controls: {
        h1: { className: 'your-class-name' },
        h2: { className: 'your-other-class-name' },
    }
});