Как настроить ckeditor, чтобы не обтекать содержимое в блоке <p>?

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

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

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

+47
источник поделиться
6 ответов

Добавьте следующее в файл 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 '<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 установлено enterMode CKEDITOR.ENTER_BR.

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

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

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

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

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

Ссылка

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

+122
источник

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

    config.autoParagraph = false;
+14
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

Правильный способ сделать это действительно на .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>
+5
источник

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

  • shift + enter для разрыва строки <br> и
  • just enter приведет к появлению нового абзаца.

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

+5
источник

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

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

Шаг 1: добавьте этот script на веб-страницу 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: Выполнено:)

+2
источник

Для Django-ckeditor добавьте этот Django-ckeditor в ваш файл settings.py:

ENTER_P    = 1 # default
ENTER_BR   = 2
ENTER_DIV  = 3

CKEDITOR_CONFIGS = {
    'default': {
        'enterMode': ENTER_BR,
    },
}
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос