Инструменты пользователя

Инструменты сайта


software:development:web:docs:web:wysiwyg:sceditor_custom_commands

Это старая версия документа!


SCEditor пользовательские команды

Чтобы добавить команду на панель инструментов, используйте следующую $.sceditor.command.set функцию:

test.js
$.sceditor.command.set("headers", {
    exec: function(caller) {
        // Сохраняем экземпляр редактора для его использования
        // в обработчике клика
        var editor = this,
            $content = $("<div />");
 
        // Создайте параметры заголовка 1-6
        for (var i=1; i<= 6; i++) {
            $(
                '<a class="sceditor-header-option" href="#">' +
                    '<h' + i + '>Заголовок ' + i + '</h' + i + '>' +
                '</a>'
            )
            .data('headersize', i)
            .click(function (e) {
                // При нажатии на эту опцию вызывается собственный объект ContentEditable.
                // formatblock для форматирования этого блока в заголовок
                //
                // Практически всегда лучше использовать методы редактора, такие как
                // Вставка() вместо встроенной команды execCommand браузера
                // Функция execCommand имеет множество несовместимостей с браузерами.
                editor.execCommand("formatblock", "<h" + $(this).data('headersize') + ">");
                editor.closeDropDown(true);
 
                e.preventDefault();
            })
            .appendTo($content);
        }
 
        editor.createDropDown(caller, "header-picker", $content.get(0));
    },
    Всплывающая подсказка: "Форматировать заголовки"
});

Добавьте команды CSS:

style.css
.sceditor-button-headers div { background: url('/images/headers-button.png'); }
.sceditor-header-option {
    display: block;
    курсор: указатель;
    font-size: 14px;
    text-decoration: none;
    цвет: #222;
}
.sceditor-header-option:hover { background: #eee; }

Затем, если вы используете плагин BBCode, добавьте команды BBCode, используя следующую $.formats.bbcode.set функцию:

script.js
$.sceditor.formats.bbcode
    .set("h1", { tags: { h1: null }, format: "[h1]{0}[/h1]", html: "<h1>{0}</h1>", isInline: false })
    .set("h2", { tags: { h2: null }, format: "[h2]{0}[/h2]", html: "<h2>{0}</h2>", isInline: false })
    .set("h3", { tags: { h3: null }, format: "[h3]{0}[/h3]", html: "<h3>{0}</h3>", isInline: false })
    .set("h4", { tags: { h4: null }, format: "[h4]{0}[/h4]", html: "<h4>{0}</h4>", isInline: false })
    .set("h5", { tags: { h5: null }, format: "[h5]{0}[/h5]", html: "<h5>{0}</h5>", isInline: false })
    .set("h6", { tags: { h6: null }, format: "[h6]{0}[/h6]", html: "<h6>{0}</h6>", isInline: false });

Наконец, добавьте команду на панель инструментов редактора:

script.js
$("#demo-cust-cmd").sceditor({
    format: 'bbcode',
    toolbar: "headers|source",
});
Только авторизованные участники могут оставлять комментарии.
software/development/web/docs/web/wysiwyg/sceditor_custom_commands.1767739572.txt.gz · Последнее изменение: VladPolskiy

Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: Public Domain
Public Domain Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki