Свой список css-классов

Added by Станислав Б. 9 months ago

Здравствуйте!

Подскажите, пожалуйста, как можно добавить на панель выпадающий список со своими css-классами, которые бы применялись к выделенному блоку текста?


Replies (5)

RE: Свой список css-классов - Added by Troex Nevelin 9 months ago

Встроенного функционала для такой возможности нет, единственный выход это писать свой плагин.

RE: Свой список css-классов - Added by Станислав Б. 9 months ago

Пример плагина где-нибудь можно посмотреть?

RE: Свой список css-классов - Added by Troex Nevelin 9 months ago

Кнопка разрыва страницы / Пример как сделать свою кнопку

Смотрите так же как устроенны другие кнопки

Вот ещё очень хороший пример как дёргать встроенные комманды - How can i use anchor tags in HTML page instead of default...

RE: Свой список css-классов - Added by Станислав Б. 9 months ago

Написал вот такой код:

(function($) {
elRTE.prototype.ui.prototype.buttons.mystyle = function(rte, name) {
    this.constructor.prototype.constructor.call(this, rte, name);
    var self = this;
    var opts = {
        labelTpl : '%label',
        tpl      : '<span style="font-size:%val;line-height:1.2em">%label</span>',
        select   : function(v) { self.set(v); },
        src      : {
            ''         : this.rte.i18n('CSS style'),
            'important' : this.rte.i18n('Important'), 
            'small_pic' : this.rte.i18n('Small image'), 
        }
    }

    this.select = this.domElem.elSelect(opts);

    this.command = function() {
    }

    this.set = function(v) {
            var n = this.node();
            this.rte.selection.restoreIERange();
            if (n) {
                $(n).attr('class', v);
                this.rte.ui.update();
            }
    }

        this.node = function() {
            var n = this.rte.selection.getNode();
            if (n.nodeType == 3) {
                n = n.parentNode;
            }

            return n.nodeType == 1 && n.nodeName != 'BODY' ? n : null;
        }

        this.update = function() {
            this.domElem.removeClass('disabled');
        }

}
})(jQuery);

Проблема в том, что работает, только если выделение обёрнуто в ноду. Как можно предварительно обвернуть выделение в span? Просмотрел все исходники, но не смог найти решения.

Заранее благодарю.

RE: Свой список css-классов - Added by Dmitry Levashov 9 months ago

Посмотрите исходники команд работы с цветом/размером/шрифтом, например ui/fontsize.js
И elRTE.selection.js - метод selected

(1-5/5)