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
