Различия

Показаны различия между двумя версиями страницы.

--- software:development:web:docs:web:wysiwyg:sceditor_custom_commands [2026/01/07 01:46] – создано VladPolskiy
+++ software:development:web:docs:web:wysiwyg:sceditor_custom_commands [2026/01/07 02:33] (текущий) – VladPolskiy
@@ Строка 3: / Строка 3: @@
 <code php test.js>
+$(function() {
 $.sceditor.command.set("headers", {
-    exec: function(caller) {
+	exec: function(caller) {
-        // Сохраняем экземпляр редактора для его использования
+		var	editor   = this,
-        // в обработчике клика
+			$content = $("<div />");
-        var editor = this,
-            $content = $("<div />");
-        // Создайте параметры заголовка 1-6
+		for (var i=1; i<= 6; i++) {
-        for (var i=1; i<= 6; i++) {
+			$(
-            $(
+				'<a class="sceditor-header-option" href="#">' +
-                '<a class="sceditor-header-option" href="#">' +
+					'<h' + i + '>Heading ' + i + '</h' + i + '>' +
-                    '<h' + i + '>Заголовок ' + i + '</h' + i + '>' +
+				'</a>'
-                '</a>'
+			)
-            )
+			.data('headersize', i)
-            .data('headersize', i)
+			.click(function (e) {
-            .click(function (e) {
+				editor.execCommand("formatblock", "<h" + $(this).data('headersize') + ">");
-                // При нажатии на эту опцию вызывается собственный объект ContentEditable.
+				editor.closeDropDown(true);
-                // formatblock для форматирования этого блока в заголовок
-                //
-                // Практически всегда лучше использовать методы редактора, такие как
-                // Вставка() вместо встроенной команды execCommand браузера
-                // Функция execCommand имеет множество несовместимостей с браузерами.
-                editor.execCommand("formatblock", "<h" + $(this).data('headersize') + ">");
-                editor.closeDropDown(true);
-                e.preventDefault();
+				e.preventDefault();
-            })
+			})
-            .appendTo($content);
+			.appendTo($content);
-        }
+		}
-        editor.createDropDown(caller, "header-picker", $content.get(0));
+		editor.createDropDown(caller, "header-picker", $content.get(0));
-    },
+	},
-    Всплывающая подсказка: "Форматировать заголовки"
+	tooltip: "Format Headers"
 });
 </code>
@@ Строка 42: / Строка 34: @@
 <code css style.css>
-.sceditor-button-headers div { background: url('/images/headers-button.png'); }
+	.sceditor-button-headers div { background: url("https://d33wubrfki0l68.cloudfront.net/31586b20f376f87c81414430a7a1f70582486856/de066/misc/headers-button.png"); }
-.sceditor-header-option {
+	.sceditor-header-option {
-    display: block;
+		display: block;
-    курсор: указатель;
+		cursor: pointer;
-    font-size: 14px;
+		font-size: 14px;
-    text-decoration: none;
+		text-decoration: none;
-    цвет: #222;
+		color: #222;
-}
+	}
-.sceditor-header-option:hover { background: #eee; }
+	.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; }
 </code>
@@ Строка 57: / Строка 59: @@
 <code js script.js>
 $.sceditor.formats.bbcode
-    .set("h1", { tags: { h1: null }, format: "[h1]{0}[/h1]", html: "<h1>{0}</h1>", isInline: false })
+.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("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("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("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("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 });
+.set("h6", { tags: { h6: null }, format: "[h6]{0}[/h6]", html: "<h6>{0}</h6>", isInline: false });
 </code>
 Наконец, добавьте команду на панель инструментов редактора:
@@ Строка 68: / Строка 71: @@
 <code js script.js>
 $("#demo-cust-cmd").sceditor({
-    format: 'bbcode',
+format: 'bbcode',
-    toolbar: "headers|source",
+toolbar: "headers|bold,italic,underline|source",
+style: "https://cdn.jsdelivr.net/npm/sceditor@latest/minified/themes/content/default.min.css",
+emoticonsRoot: "/"
 });
 </code>
+Пример всего кода
+<code php 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>
+</code>
+\\
+{{:software:development:web:docs:web:wysiwyg:sceditor_live_6.png?|}}
+\\
+[[https://www.sceditor.com/posts/how-to-add-custom-commands/|Ссылка на оригинальную статью]]