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

ckeditor wrap

64802 просмотра

6 ответа

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

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

Есть ли какие-то настройки, которые заставляют редактора не переносить текст?

Автор: Nathan Osman Источник Размещён: 17.05.2019 02:45

Ответы (6)


121 плюса

Решение

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

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

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

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

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

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

Ссылка

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

Автор: codewaggle Размещён: 01.09.2011 06:07

14 плюса

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

    config.autoParagraph = false;

Автор: MikeBman Размещён: 11.10.2012 07:30

5 плюса

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

Правильный способ сделать это на самом деле .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>
Автор: ablueman Размещён: 10.02.2014 12:09

5 плюса

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

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

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

Автор: Neil Patrao Размещён: 30.03.2015 02:17

2 плюса

Если вы хотите исключить <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: Готово :)

Автор: Rishi Rich Размещён: 03.08.2016 11:40

0 плюса

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

ENTER_P    = 1 # default
ENTER_BR   = 2
ENTER_DIV  = 3

CKEDITOR_CONFIGS = {
    'default': {
        'enterMode': ENTER_BR,
    },
}
Автор: Ravi Dhiman Размещён: 15.03.2019 06:21
Вопросы из категории :
32x32