Содержание

SCEditor
Обсуждение

SCEditor

SCEditor — это легковесный, бесплатный (open-source) JavaScript-редактор для веба, который позволяет пользователям форматировать текст в стилях BBCode и HTML в режиме «что видишь, то и получишь» (WYSIWYG), идеально подходящий для форумов, комментариев и блогов, где нужна простая, но функциональная вставка контента, включая таблицы, картинки, видео и смайлики.

Основные особенности SCEditor:

WYSIWYG (What You See Is What You Get): Отображает контент так же, как он будет выглядеть в итоге, упрощая форматирование.
Поддержка форматов: Работает как с BBCode (для форумов), так и с HTML (для веб-страниц).
Расширяемость: Легко добавляет функционал через плагины (например, для перетаскивания изображений, YouTube-видео).
Инструменты: Включает базовые функции: жирный, курсив, подчеркивание, выравнивание, вставка ссылок, таблиц, изображений, смайликов.
Легковесный: Разработан для быстрой загрузки, без необходимости сложной инсталляции.
Темы и иконки: Возможность настройки внешнего вида.

Быстрый старт

Включите JavaScript и CSS :

<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>

Либо

<!-- 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>

Инициализируйте редактор.

BBCode

Чтобы включить плагин BBCode, просто добавьте его bbcode в format параметры.

<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>

XHTML

Чтобы включить плагин XHTML, просто добавьте его xhtml в format параметры.

<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>

Параметры

Указание параметров :

Все параметры следует передавать через конструктор.

// Create the editor
sceditor.create(textarea, {
    // Options go here
 
    plugins: 'undo',
    format: 'bbcode',
	toolbar: 'bold,italic,underline|source',
	locale: 'no-NB'
});

панель инструментов

toolbar String — список всех встроенных команд.
Список команд, разделённых запятыми. Для разделения команд на группы используйте символ черточки (|) вместо запятой. Например:«bold,italic,underline|source»

панель инструментов Исключить

toolbarExclude String По умолчанию null

Список команд, разделенных запятыми, которые следует исключить из панели инструментов. Оставьте значение «как», nullчтобы ничего не исключать.

стиль

style String

URL-адрес таблицы стилей, используемой для оформления содержимого WYSIWYG- редактора.

var textarea = document.getElementById('example');
sceditor.create(textarea, {
	style: 'minified/themes/content/default.min.css'
});

шрифты

fonts String. По умолчанию используется«Arial,Arial Black,Comic Sans MS,Courier New,Georgia,Impact,Sans-serif,Serif,Times New Roman,Trebuchet MS,Verdana»
Список шрифтов, разделенных запятыми, для использования с селектором шрифтов.

var textarea = document.getElementById('example');
sceditor.create(textarea, {
	fonts: 'Arial,Courier New,Times New Roman'
});

цвета

цвета Строка По умолчанию null

Список шестнадцатеричных значений цветов, разделенных запятыми, должен содержать символы черточки (|) для обозначения новых столбцов. Если задано значение, nullцвета будут сгенерированы автоматически.

Например:

colors: '#ffff00,#ff00ff,#00ffff|#ff0000,#00ff00,#0000ff', Результатом будет:

локация

locale Строка По умолчанию «en»

Укажите используемую локаль, например: en, en-US, fr, и т. д.

ВажныйФайл языка необходимо подключить после основного JS-файла редактора, но до создания самого редактора. Например:

<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>

кодировка

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-адресов смайликов.

смайлики

объект смайликов

Объект в следующем формате:

{
    // 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'
    }
}

иконки

icons Строка По умолчанию null

Набор значков для использования в редакторе. Если это значение равно null, набор значков использоваться не будет, и вместо него будут загружены значки из текущей темы.

var textarea = document.getElementById('example');
	sceditor.create(textarea, {
		format: 'xhtml',
		icons: 'material'
});

В комплект входят наборы иконок в монохромном стиле (используйте monocons в качестве значения параметра)

и иконки в стиле Material Design (используйте material в качестве значения параметра).

ширина

ширина — строка или целое число. По умолчанию —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]

dropDownCss

Объект dropDownCss по умолчанию представляет собой пустой объект.

Дополнительный CSS-код для добавления в выпадающее меню (например, z-index).

разрешенные теги

массив allowedTags <string> По умолчанию[]

Массив дополнительных тегов, которые должны быть разрешены в содержимом редактора.

По умолчанию пользовательские HTML-элементы удаляются средством очистки HTML-кода. Эта опция позволяет указать любые пользовательские HTML-элементы, которые должны быть разрешены.

разрешенные атрибуты

allowedAttributes Array<string> Defaults to[]

Набор дополнительных атрибутов, разрешенных для тегов в содержимом редактора.

По умолчанию HTML-санитайзер удаляет пользовательские атрибуты. Эта опция позволяет указать любые пользовательские атрибуты, которые должны быть разрешены.

Содержание

SCEditor

Основные особенности SCEditor:

Быстрый старт

Включите JavaScript и CSS :

Инициализируйте редактор.

BBCode

XHTML

Параметры

Указание параметров :

панель инструментов

панель инструментов Исключить

стиль

шрифты

цвета

локация

кодировка

startInSourceMode

смайликиВключены

emoticonsCompat

emoticonsRoot

смайлики

иконки

ширина

высота

resizeEnabled

resizeMinWidth

resizeMinHeight

resizeMaxHeight

resizeMaxWidth

resizeHeight

resizeWidth

dateFormat

toolbarContainer

включить фильтрацию вставки

только для чтения

ртл

автофокус

автофокусКонец

авторазвернуть

автоматическое обновление

runWithoutWysiwygSupport

идентификатор

плагины

проверка орфографии

disableBlockRemove

parserOptions

bbcodeTrim

dropDownCss

разрешенные теги

разрешенные атрибуты

Дополнения и Файлы