Как настроить ckeditor, чтобы не обтекать содержимое в блоке ?
Я использую ckeditor на своем веб-сайте, чтобы пользователям было проще вводить HTML.
Однако данные, возвращаемые из ckeditor, завернуты в блоки
. (Который я не хочу.)
Есть ли какой-то параметр конфигурации, который заставляет редактор не обтекать текст ничем?
Добавьте в файл config.js для CKEditor следующее:
config.enterMode = CKEDITOR.ENTER_BR;
Пример:
... CKEDITOR.editorConfig = function (config) { config.enterMode = CKEDITOR.ENTER_BR; ... };
Детали
Настройка, которая управляет этим поведением, основана на том, что вы хотите, когда пользователь нажимает Enter .
На всякий случай, кто-то, кто работает с HTML, читает это, я включаю в себя некоторое базовое объяснение вовлеченных понятий и почему тег нужно вставлять при нажатии клавиши Enter .
Мы знаем, что если мы введем какой-то текст в документ HTML, а затем добавим дополнительный текст в новую строку, браузер не отобразит текст в виде двух строк, он проигнорирует любые возвраты каретки и сгустят несколько пробелов между символами до одного пространство.
Следующий HTML:
qwer tyui
Будет отображаться как:
qwer tyui
Поэтому редактору нужно вставить тег HTML, чтобы сообщить браузеру, что он должен отображать вторую группу текста в новой строке.
Конфигурация, которая управляет этим, – config.enterMode
и предлагает три варианта:
1 – Вставить абзац
Значение по умолчанию создает элемент абзаца при каждом нажатии Enter :
config.enterMode = CKEDITOR.ENTER_P; // inserts `...
`
2 – Вставить ‘div’
Вы можете создать элемент div
вместо абзаца:
config.enterMode = CKEDITOR.ENTER_DIV; // inserts ``
3 – Вставить разрыв (настройка, которую вы ищете)
Если вы предпочитаете не обтекать текст ничем, вы можете вставить тег разрыва строки:
config.enterMode = CKEDITOR.ENTER_BR; // inserts `
`
Документация CKEditor указывает, что использование параметра ENTER_BR
не рекомендуется :
Примечание. Рекомендуется использовать параметр
CKEDITOR.ENTER_P
из-за его семантического значения и правильности. Редактор оптимизирован для этого параметра.
Другая связанная настройка «autoParagraph»
Существует вторая настройка, которая управляет аналогичной ситуацией – config.autoParagraph
. Как это работает, зависит от параметра config.enterMode
рассмотренного выше.
autoParagraph
определяет, autoParagraph
ли встроенные элементы, такие как span
, в элемент блока ( p
или div
), заданный параметром enterMode
. По умолчанию используется обертка встроенных элементов, поэтому, если вы введете такой пробел (как HTML):
asdfg
Он будет завернут в элемент ap или div следующим образом:
asdfg
или это:
asdfg
Встроенный элемент не будет обернут, если вы установите для него значение false
или если вы установите enterMode
на CKEDITOR.ENTER_BR
.
Документация CKEditor включает эту заметку о config.autoParagraph
:
Примечание. Изменение значения по умолчанию может привести к непредсказуемым проблемам использования.
Еще больше настроек
Есть еще три настройки, которые несколько связаны с этой темой:
-
config.fillEmptyBlocks
-
config.forceEnterMode
-
config.ignoreEmptyParagraph
Справка
Полный список доступных параметров конфигурации можно найти здесь:
- CKEDITOR.config – Документация API JavaScript CKEditor 3
- CKEDITOR.config – Документация CKEditor 4
Я знаю, что немного опоздал в игру, но я думаю, что вариант, который ищет OP:
config.autoParagraph = false;
На это хорошо ответили выше, однако, как уже упоминалось, вы не должны изменять это в основной конфигурации.
Правильный способ сделать это на самом деле.
т.е.
Очень простое решение без изменения конфигурации – использовать
-
shift
+enter
для разрыва строки, и - просто
enter
новый пункт.
Преимущество в том, что вам не нужно выполнять какие-либо изменения конфигурации. Кроме того, у вас есть оба.
Если вы хотите исключить
и хотите, чтобы в Ckeditor был только базовый инструмент редактирования, такой как Bold Italic indexscript и т. Д., Выполните следующие действия:
Я на 100% уверен в этом, так как я исследовал 36 часов непрерывно 🙂
Шаг 1. Добавьте этот скрипт в свою веб-страницу PHP.
Шаг 2: добавьте id="editor2"
и onfocus="this.value='';"
в вашем текстовом поле, как это
Шаг 3: Убедитесь, что из Textarea Class="ckeditor"
.
Шаг 4: перезагрузите свою веб-страницу, если этого не произошло. Удалите кеш / историю и перезагрузите компьютер / ноутбук.
Шаг 5: Сделано 🙂