software:development:web:docs:web:wysiwyg:sceditor_custom_commands
SCEditor пользовательские команды
Чтобы добавить команду на панель инструментов, используйте следующую $.sceditor.command.set функцию:
- test.js
$(function() { $.sceditor.command.set("headers", { exec: function(caller) { var editor = this, $content = $("<div />"); for (var i=1; i<= 6; i++) { $( '<a class="sceditor-header-option" href="#">' + '<h' + i + '>Heading ' + i + '</h' + i + '>' + '</a>' ) .data('headersize', i) .click(function (e) { editor.execCommand("formatblock", "<h" + $(this).data('headersize') + ">"); editor.closeDropDown(true); e.preventDefault(); }) .appendTo($content); } editor.createDropDown(caller, "header-picker", $content.get(0)); }, tooltip: "Format Headers" });
Добавьте команды CSS:
- style.css
.sceditor-button-headers div { background: url("https://d33wubrfki0l68.cloudfront.net/31586b20f376f87c81414430a7a1f70582486856/de066/misc/headers-button.png"); } .sceditor-header-option { display: block; cursor: pointer; font-size: 14px; text-decoration: none; color: #222; } .sceditor-header-option h1, .sceditor-header-option h2, .sceditor-header-option h3, .sceditor-header-option h4, .sceditor-header-option h5, .sceditor-header-option h6 { border: 0; margin: 0; padding: .25em; } .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|bold,italic,underline|source", style: "https://cdn.jsdelivr.net/npm/sceditor@latest/minified/themes/content/default.min.css", emoticonsRoot: "/" });
Пример всего кода
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sceditor@latest/minified/themes/default.min.css" type="text/css" media="all" /> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sceditor@latest/minified/jquery.sceditor.bbcode.min.js"> </script> <style> .sceditor-button-headers div { background: url("https://d33wubrfki0l68.cloudfront.net/31586b20f376f87c81414430a7a1f70582486856/de066/misc/headers-button.png"); } .sceditor-header-option { display: block; cursor: pointer; font-size: 14px; text-decoration: none; color: #222; } .sceditor-header-option h1, .sceditor-header-option h2, .sceditor-header-option h3, .sceditor-header-option h4, .sceditor-header-option h5, .sceditor-header-option h6 { border: 0; margin: 0; padding: .25em; } .sceditor-header-option:hover { background: #eee; } </style> <script> $(function() { $.sceditor.command.set("headers", { exec: function(caller) { var editor = this, $content = $("<div />"); for (var i=1; i<= 6; i++) { $( '<a class="sceditor-header-option" href="#">' + '<h' + i + '>Heading ' + i + '</h' + i + '>' + '</a>' ) .data('headersize', i) .click(function (e) { editor.execCommand("formatblock", "<h" + $(this).data('headersize') + ">"); editor.closeDropDown(true); e.preventDefault(); }) .appendTo($content); } editor.createDropDown(caller, "header-picker", $content.get(0)); }, tooltip: "Format Headers" }); $.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 }); $("#demo-cust-cmd").sceditor({ format: 'bbcode', toolbar: "headers|bold,italic,underline|source", style: "https://cdn.jsdelivr.net/npm/sceditor@latest/minified/themes/content/default.min.css", emoticonsRoot: "/" }); }); </script> <p><textarea style="width:600px; height:300px" id="demo-cust-cmd">[h1]Lorem ipsum[/h1][h2]Sub header[/h2]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.</textarea></p> </body> </html>
Только авторизованные участники могут оставлять комментарии.
software/development/web/docs/web/wysiwyg/sceditor_custom_commands.txt · Последнее изменение: — VladPolskiy