Как настроить ckeditor, чтобы не переносить содержимое в блок <p>? - PullRequest
47 голосов
/ 27 июля 2010

Я использую ckeditor на своем веб-сайте, чтобы пользователям было проще вводить HTML.

Однако данные, которые я получаю от ckeditor, заключены в блоки <p></p>.(Который я не хочу.)

Есть ли какой-либо параметр конфигурации, который заставляет редактор не заключать текст во что-либо?

Ответы [ 6 ]

122 голосов
/ 01 сентября 2011

Добавьте следующее в ваш 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, чтобы сообщить браузеру, что он должен отображать вторую группутекст на новыйline.

Параметр конфигурации, который управляет этим параметром, config.enterMode и предлагает три параметра:

1 - Вставить абзац

При настройке по умолчанию каждый раз создается элемент абзаца Нажатие :

config.enterMode = CKEDITOR.ENTER_P; // inserts `<p>...</p>`

2 - Вставить 'div'

Вы можете создать элемент div вместо абзаца:

config.enterMode = CKEDITOR.ENTER_DIV; // inserts `<div></div>`

3 - Вставить разрыв (нужную настройку)

Если вы предпочитаете не переносить текст во что-либо, вы можете вставить тег разрыва строки:

config.enterMode = CKEDITOR.ENTER_BR; // inserts `<br />`

Документация CKEditor указывает, что использование параметра ENTER_BR не рекомендуется :

Примечание. Рекомендуется использовать параметр CKEDITOR.ENTER_P из-за его семантического значенияи правильность.Редактор оптимизирован для этого параметра.

Другой связанный параметр 'autoParagraph'

Существует второй параметр, который управляет аналогичной ситуацией - config.autoParagraph.Как это работает, зависит от настройки config.enterMode, описанной выше.

autoParagraph определяет, будут ли встроенные элементы, такие как span, обернуты в элемент блока (p или div), заданный enterMode настройка.По умолчанию используется обтекание встроенных элементов, поэтому при вводе диапазона (например, HTML):

<span>asdfg</span>

Он будет заключен в элемент ap или div следующим образом:

<p><span>asdfg</span></p>

или это:

<div><span>asdfg</span></div>

Встроенный элемент не будет перенесен, если вы установите его на false или если вы установите enterMode на CKEDITOR.ENTER_BR.

Документация CKEditor включает это примечание о config.autoParagraph:

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

Еще больше настроек

Есть еще три параметра, которые в некоторой степени связаны с этой темой:

  • config.fillEmptyBlocks
  • config.forceEnterMode
  • config.ignoreEmptyParagraph

Справочник

Полный список доступных параметров конфигурации можно найти здесь:

15 голосов
/ 11 октября 2012

Я знаю, что немного опаздываю к игре, но я думаю, что опция, которую ищет ОП:


    config.autoParagraph = false;

5 голосов
/ 30 марта 2015

Очень простое решение без каких-либо изменений конфигурации - это использовать

  1. shift + enter для перевода строки <br>, а
  2. просто enter.вызвать новый абзац.

Преимущество заключается в том, что вам не нужно вносить какие-либо изменения в конфигурацию.Плюс, у вас есть оба.

5 голосов
/ 10 февраля 2014

Ответ на этот вопрос дан выше, однако, как уже упоминалось, вам не следует изменять это в основной конфигурации.

Правильный способ сделать это на самом деле .replace.

т.е.

    <form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
    <textarea id="editor2" name="editor2" rows="300"><?php echo $editor2;?></textarea>
    <textarea id="editor1" name="editor1" rows="1" cols="50" onfocus="this.value=''; this.onfocus=null;">Type Tab Title Here:</textarea>
    <input type="submit" value="Submit">
    </form>

<script type="text/javascript">  
    CKEDITOR.replace( 'editor2', { 
    enterMode: CKEDITOR.ENTER_BR, 
    on: {'instanceReady': function (evt) { evt.editor.execCommand('maximize');     }},
    });      
    </script>
2 голосов
/ 03 августа 2016

Если вы хотите исключить тег <p> и хотите, чтобы в Ckeditor использовался только базовый инструмент редактирования, например, надстрочный шрифт полужирного курсива и т. Д., Выполните следующие действия:

Я на 100% уверенкак я исследовал 36 часов непрерывно:)

Шаг 1: добавьте этот скрипт на веб-страницу PHP

<script type="text/javascript">  
    CKEDITOR.replace( 'editor1', { 
    enterMode: CKEDITOR.ENTER_BR, 
    on: {'instanceReady': function (evt) { evt.editor.execCommand('');}},
    }); 
</script>

Шаг 2: добавьте id="editor2" и onfocus="this.value='';" в текстовое поле, как это

<textarea id="editor2" name="AsYourWish" onfocus="this.value='';">

Шаг 3: Убедитесь, что удалили Class="ckeditor" из Textarea.

Шаг 4: Перезагрузите веб-страницу, если не произошло Удалите кэш / историю и перезагрузите ПК / ноутбук.

Шаг 5: Готово:)

0 голосов
/ 15 марта 2019

Для Django-ckeditor добавить эту конфигурацию в файл settings.py:

ENTER_P    = 1 # default
ENTER_BR   = 2
ENTER_DIV  = 3

CKEDITOR_CONFIGS = {
    'default': {
        'enterMode': ENTER_BR,
    },
}
...