Различия

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

--- software:development:web:docs:web:wysiwyg:sceditor [2026/01/06 23:09] – создано VladPolskiy
+++ software:development:web:docs:web:wysiwyg:sceditor [2026/01/07 12:57] (текущий) – [Дополнения и Файлы] VladPolskiy
@@ Строка 1: / Строка 1: @@
 ====== SCEditor ======
+**SCEditor** — это легковесный, бесплатный (open-source) JavaScript-редактор для веба, который позволяет пользователям форматировать текст в стилях BBCode и HTML в режиме "что видишь, то и получишь" (WYSIWYG), идеально подходящий для форумов, комментариев и блогов, где нужна простая, но функциональная вставка контента, включая таблицы, картинки, видео и смайлики.
+===== Основные особенности SCEditor: =====
+  * WYSIWYG (What You See Is What You Get): Отображает контент так же, как он будет выглядеть в итоге, упрощая форматирование.
+  * Поддержка форматов: Работает как с BBCode (для форумов), так и с HTML (для веб-страниц).
+  * Расширяемость: Легко добавляет функционал через плагины (например, для перетаскивания изображений, YouTube-видео).
+  * Инструменты: Включает базовые функции: жирный, курсив, подчеркивание, выравнивание, вставка ссылок, таблиц, изображений, смайликов.
+  * Легковесный: Разработан для быстрой загрузки, без необходимости сложной инсталляции.
+  * Темы и иконки: Возможность настройки внешнего вида.
+\\
+{{:software:development:web:docs:web:wysiwyg:sceditor_live_1.png?|}}
+\\
+===== Быстрый старт =====
+==== Включите JavaScript и CSS : ====
+<code html>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sceditor@3/minified/themes/default.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/sceditor@3/minified/sceditor.min.js"></script>
+</code>
+\\
+Либо
+\\
+<code html>
+<!-- Include the default theme -->
+<link rel="stylesheet" href="minified/themes/default.min.css" />
+<!-- Include the editors JS -->
+<script src="minified/sceditor.min.js"></script>
+<!-- Include the BBCode or XHTML formats -->
+<script src="minified/formats/bbcode.js"></script>
+<script src="minified/formats/xhtml.js"></script>
+</code>
+==== Инициализируйте редактор. ====
+\\
+{{:software:development:web:docs:web:wysiwyg:sceditor_live_bbcode_1.png?|}}
+\\
+=== BBCode ===
+Чтобы включить плагин BBCode, просто добавьте его **bbcode** в **format** параметры.
+\\
+<code php>
+<script src="https://cdn.jsdelivr.net/npm/sceditor@3/minified/formats/bbcode.min.js"></script>
+<script>
+// Replace the textarea #example with SCEditor
+var textarea = document.getElementById('example');
+sceditor.create(textarea, {
+	format: 'bbcode',
+	style: 'https://cdn.jsdelivr.net/npm/sceditor@3/minified/themes/content/default.min.css'
+});
+</script>
+</code>
+\\
+{{:software:development:web:docs:web:wysiwyg:sceditor_live_bbcode_2.png?|}}
+\\
+=== XHTML ===
+Чтобы включить плагин XHTML, просто добавьте его **xhtml** в **format** параметры.
+\\
+<code php>
+<script src="https://cdn.jsdelivr.net/npm/sceditor@3/minified/formats/xhtml.min.js"></script>
+<script>
+// Replace the textarea #example with SCEditor
+var textarea = document.getElementById('example');
+sceditor.create(textarea, {
+	format: 'xhtml',
+	style: 'https://cdn.jsdelivr.net/npm/sceditor@3/minified/themes/content/default.min.css'
+});
+</script>
+</code>
+\\
+{{:software:development:web:docs:web:wysiwyg:sceditor_live_xhtml_2.png?|}}
+\\
+===== Параметры =====
+==== Указание параметров : ====
+\\
+Все параметры следует передавать через конструктор.
+\\
+<code html>
+// Create the editor
+sceditor.create(textarea, {
+    // Options go here
+    plugins: 'undo',
+    format: 'bbcode',
+	toolbar: 'bold,italic,underline|source',
+	locale: 'no-NB'
+});
+</code>
+\\
+{{:software:development:web:docs:web:wysiwyg:sceditor_live_2.png?|}}
+\\
+=== панель инструментов ===
+toolbar String — список всех встроенных команд.
+\\
+Список команд, разделённых запятыми. Для разделения команд на группы используйте символ черточки (|) вместо запятой. Например:"bold,italic,underline|source"
+=== панель инструментов Исключить ===
+toolbarExclude String По умолчанию **null**
+Список команд, разделенных запятыми, которые следует исключить из панели инструментов. Оставьте значение «как», nullчтобы ничего не исключать.
+=== стиль ===
+style String
+URL-адрес таблицы стилей, используемой для оформления содержимого WYSIWYG- редактора.
+<code html>
+var textarea = document.getElementById('example');
+sceditor.create(textarea, {
+	style: 'minified/themes/content/default.min.css'
+});
+</code>
+\\
+=== шрифты ===
+fonts String. По умолчанию используется**"Arial,Arial Black,Comic Sans MS,Courier New,Georgia,Impact,Sans-serif,Serif,Times New Roman,Trebuchet MS,Verdana"**
+\\
+Список шрифтов, разделенных запятыми, для использования с селектором шрифтов.
+<code html>
+var textarea = document.getElementById('example');
+sceditor.create(textarea, {
+	fonts: 'Arial,Courier New,Times New Roman'
+});
+</code>
+\\
+{{:software:development:web:docs:web:wysiwyg:sceditor_live_3.png?|}}
+\\
+=== цвета ===
+цвета Строка По умолчанию null
+Список шестнадцатеричных значений цветов, разделенных запятыми, должен содержать символы черточки (|) для обозначения новых столбцов. Если задано значение, nullцвета будут сгенерированы автоматически.
+Например:
+colors: '#ffff00,#ff00ff,#00ffff|#ff0000,#00ff00,#0000ff',
+Результатом будет:
+=== локация ===
+locale Строка По умолчанию "en"
+Укажите используемую локаль, например: en, en-US, fr, и т. д.
+ВажныйФайл языка необходимо подключить после основного JS-файла редактора, но до создания самого редактора. Например:
+<code html>
+<script src="../minified/jquery.sceditor.min.js"></script>
+<script src="../languages/nl.js"></script>
+<!-- Create the editor after including the translation -->
+<script>
+sceditor.create(
+    ...
+);
+</script>
+</code>
+=== кодировка ===
+charset String По умолчанию используется"utf-8"
+Кодировка, используемая для содержимого WYSIWYG- редактора .
+=== startInSourceMode ===
+startInSourceMode — логическое значение, по умолчанию —false
+Чтобы запустить редактор в режиме исходного кода, установите значение, указывающее на trueзапуск в режиме исходного кода.
+=== смайликиВключены ===
+emoticonsEnabled Bool Defaults totrue
+Если необходимо включить смайлики. Установите значение false«отключить смайлики».
+=== emoticonsCompat ===
+emoticonsCompat Bool Defaults to false
+Включает или отключает режим совместимости со смайликами.
+Если эта функция включена, смайлики должны быть окружены пробелами или символами конца строки . Например, если у вас есть смайлик с кодом :/, в режиме совместимости он не заменит :/в http://.
+=== emoticonsRoot ===
+emoticonsRoot String По умолчанию — пустая строка
+Корневой URL всех смайликов. Эта строка будет добавляться в начало всех URL-адресов смайликов.
+=== смайлики ===
+объект смайликов
+Объект в следующем формате:
+<code html>
+{
+    // Emoticons to be included in the dropdown
+    dropdown: {
+        ':)': 'emoticons/smile.png',
+        ':angel:': 'emoticons/angel.png'
+    },
+    // Emoticons to be included in the more section
+    more: {
+        ':alien:': 'emoticons/alien.png',
+        ':blink:': 'emoticons/blink.png'
+    },
+    // Emoticons that are not shown in the dropdown but will still
+    // be converted. Can be used for things like aliases
+    hidden: {
+        ':aliasforalien:': 'emoticons/alien.png',
+        ':aliasforblink:': 'emoticons/blink.png'
+    }
+}
+</code>
+=== иконки ===
+icons Строка По умолчанию null
+Набор значков для использования в редакторе. Если это значение равно null, набор значков использоваться не будет, и вместо него будут загружены значки из текущей темы.
+\\
+<code html>
+var textarea = document.getElementById('example');
+	sceditor.create(textarea, {
+		format: 'xhtml',
+		icons: 'material'
+});
+</code>
+\\
+В комплект входят наборы иконок в монохромном стиле (используйте monocons в качестве значения параметра)
+\\
+{{:software:development:web:docs:web:wysiwyg:sceditor_live_4.png?|}}
+\\
+ и иконки в стиле Material Design (используйте material в качестве значения параметра).
+\\
+{{:software:development:web:docs:web:wysiwyg:sceditor_live_5.png?|}}
+\\
+=== ширина ===
+ширина — строка или целое число. По умолчанию —null
+Начальная ширина редактора. Может быть либо целым числом, которое будет рассматриваться как значение в пикселях, либо строкой в процентах. Например: "100%".
+Если установить значение null, ширина будет равна ширине заменяемого текстового поля.
+=== высота ===
+высота. Строка или целое число. По умолчанию -null
+Начальная высота редактора. Может быть либо целым числом, которое будет рассматриваться как значение в пикселях, либо строкой в процентах. Например: "100%".
+Если задать значение null, высота будет равна высоте заменяемого текстового поля.
+=== resizeEnabled ===
+resizeEnabled Bool По умолчаниюtrue
+Если это позволяет изменять размер редактора, в правом нижнем углу (левом нижнем углу в режиме LTR) редактора будет добавлен небольшой маркер, позволяющий изменять его размер.
+=== resizeMinWidth ===
+resizeEnabled int По умолчанию null
+Минимальная ширина, до которой можно изменять размер редактора. Установите значение null для половины ширины текстового поля или -1 для неограниченной ширины.
+=== resizeMinHeight ===
+resizeMinHeight int По умолчанию null
+Минимальная высота, на которой можно изменять размер редактора. Установите значение null для половины высоты текстового поля или -1 для неограниченной высоты.
+=== resizeMaxHeight ===
+resizeMaxHeight int По умолчанию null
+Максимальная высота, до которой можно изменять размер редактора. Установите значение null для удвоения высоты текстового поля или -1 для неограниченной высоты.
+=== resizeMaxWidth ===
+resizeMaxWidth int По умолчанию null
+Максимальная ширина, до которой можно изменять размер редактора. Установите значение null для удвоения ширины текстового поля или -1 для неограниченной ширины.
+=== resizeHeight ===
+resizeHeight — логическое значение . По умолчанию используетсяtrue
+Если необходимо включить изменение высоты редактора.
+=== resizeWidth ===
+resizeWidth — логическое значение. По умолчанию:true
+Если необходимо включить изменение ширины редактора.
+=== dateFormat ===
+dateFormat Строковый формат . По умолчанию используется"year-month-day"
+Формат даты, используемый командой date. Этот параметр будет переопределен, если в текущей локали указан другой формат даты.
+Слова «год», «месяц» и «день» будут заменены на текущие год, месяц и день пользователя.
+=== toolbarContainer ===
+HTML-элемент toolbarContainer по умолчанию null
+HTML-узел, в который следует встроить панель инструментов. По умолчанию панель инструментов добавляется над iframe.
+=== включить фильтрацию вставки ===
+enablePasteFiltering bool По умолчанию false
+Если включить фильтрацию при вставке текста, он будет отфильтрован с помощью любых плагинов.
+При использовании плагина BBCode любой HTML-код, не содержащий допустимого BBCode, будет удален.
+=== только для чтения ===
+readOnly bool По умолчанию false
+Если редактор настроен только для чтения.
+=== ртл ===
+rtl bool По умолчанию false
+Если необходимо перевести редактор в режим чтения справа налево.
+Это можно изменить во время выполнения с помощью соответствующего rtl(bool)метода.
+=== автофокус ===
+autofocus bool По умолчанию false
+Если необходимо включить автоматическую фокусировку редактора при загрузке страницы.
+=== автофокусКонец ===
+autofocusEnd bool По умолчаниюtrue
+Если курсор следует размещать в конце при автоматической фокусировке или в начале.
+=== авторазвернуть ===
+autoExpand bool По умолчанию false
+Если необходимо включить автоматическое расширение редактора в соответствии с содержимым.
+=== автоматическое обновление ===
+autoUpdate bool По умолчанию false
+Если это так, то исходное текстовое поле будет обновлено текущим значением редактора, когда редактор потеряет фокус.
+=== runWithoutWysiwygSupport ===
+runWithoutWysiwygSupport bool По умолчанию false
+Если запускать редактор исходного кода, когда в браузере отсутствует поддержка WYSIWYG- редактора. Это применимо только к мобильным ОС, поскольку все современные настольные браузеры поддерживают WYSIWYG- редактирование.
+=== идентификатор ===
+id Строка. По умолчанию используетсяnull
+Идентификатор для назначения редактора.
+=== плагины ===
+plugins String По умолчанию используется пустая строка
+Список плагинов, разделённых запятыми. Например:"plugin1,plugin2"
+Список плагинов по умолчанию см. в документации к плагинам.
+=== проверка орфографии ===
+Проверка орфографии Логическое значение По умолчаниюtrue
+Если нужно включить встроенную проверку орфографии браузера. Эта опция действительно полезна только в том случае, если вы хотите отключить встроенную проверку орфографии браузера.
+=== disableBlockRemove ===
+disableBlockRemove Логическое значение По умолчанию false
+По умолчанию редактор удаляет блочные элементы, когда курсор находится в начале элемента и нажата клавиша Backspace. Эта опция позволяет отключить такое поведение.
+=== parserOptions ===
+Объект parserOptions. По умолчанию используется пустой объект.
+Объект с параметрами для передачи в функцию BBCodeParser. Параметры следующие:
+  * breakBeforeBlock
+Если необходимо добавить перевод строки перед блоком BB-кодов.
+  * breakStartBlock
+Если нужно добавить перевод строки в начало блока BB-кодов.
+  * breakEndBlock
+Если нужно добавить перевод строки в конец блока BB-кодов.
+  * breakAfterBlock
+Если нужно добавить перевод строки после блока BB-кодов.
+  * fixInvalidNesting
+Если необходимо исправить некорректные вложенные BBCode, такие как блочные BBCode внутри встроенных BBCode.
+  * fixInvalidChildren
+Если необходимо исправить дочерние элементы, которые не должны быть дочерними элементами родительского BB-кода.
+  * removeEmptyTags
+Если нужно удалить пустые теги.
+  * quoteType
+Тип кавычек, используемых для атрибутов BBCode.
+\\
+Дополнительную информацию см. в разделе «Формат BBCode» .
+=== bbcodeTrim ===
+bbcodeTrim Логическое значение По умолчанию false
+Важный Это применимо только при использовании редактора в режиме BBCode.
+Удаляет пустое пространство в начале и конце значения редактора.
+Это не влияет на содержимое тегов BBCode или пробелы между ними, только на пробелы в начале и конце значения редактора.
+Например:
+[b]  example  [/b]
+[b]  example  [/b]
+станет:
+[b]  example  [/b]
+[b]  example  [/b]
+=== dropDownCss ===
+Объект dropDownCss по умолчанию представляет собой пустой объект.
+Дополнительный CSS-код для добавления в выпадающее меню (например, z-index).
+=== разрешенные теги ===
+массив allowedTags <string> По умолчанию[]
+Массив дополнительных тегов, которые должны быть разрешены в содержимом редактора.
+По умолчанию пользовательские HTML-элементы удаляются средством очистки HTML-кода. Эта опция позволяет указать любые пользовательские HTML-элементы, которые должны быть разрешены.
+=== разрешенные атрибуты ===
+allowedAttributes Array<string> Defaults to[]
+Набор дополнительных атрибутов, разрешенных для тегов в содержимом редактора.
+По умолчанию HTML-санитайзер удаляет пользовательские атрибуты. Эта опция позволяет указать любые пользовательские атрибуты, которые должны быть разрешены.
+===== Дополнения и Файлы =====
+  * [[https://www.sceditor.com/|Ссылка на официальны сайт]]
+  * [[github>samclarke/SCEditor|Ссылка на Github]]
+  * {{ :software:development:web:docs:web:wysiwyg:sceditor-3.2.0.zip |Загрузить SCEditor-3.2.0}}
+  * [[https://www.sceditor.com/api/|Документация / API]]