CKEditor break <div>

CKEditor отлично работает. Есть только незначительная вещь, которую я хотел бы улучшить.

У нас есть система сообщений, которая использует CKEditor. Оригинальный (старый) текст имеет вертикальную синюю линию. Смотрите скриншот:

Я хотел бы сломать <div>.

До сих пор я не нашел возможности разбить его.

В моем случае клавиша RETURN должна разорвать <div>.

Ответ 1

Вы можете настроить ключ ввода в следующих режимах:

ENTER_P - создаются новые <p> абзацы;
ENTER_BR - строки разбиты с помощью элементов <br>;
ENTER_DIV - создаются новые <div> блоки.

Итак, в вашем случае, чтобы разбить div:

CKEDITOR.replace( 'textarea_id', {
    enterMode: CKEDITOR.ENTER_DIV
});

Вот документы для ENTER_BR

Ответ 2

Если настройка enterMode = CKEDITOR.ENTER_DIV не работает для вас, другим решением является захват нажатия клавиши enter и ручная разбивка div на:

1), вставляя закрывающий тег </div>, чтобы разделить синюю линию div, создав верхнюю половину.

2), вставив новый тег <div class="novertline">, который открывает div без вертикальной линии. Это разрыв.

3) вставьте закрытие </div>

4) вставьте еще один, который заставляет нижнюю половину разделенного текста сохранить свою вертикальную линию.

Поскольку insertHtml не разрешает разделение div, я использовал insertText с флагом, чтобы впоследствии заменить его на html.

CKEDITOR.instances.textarea.on( 'key', function (evt) {
    if (evt.data.keyCode == 13){
        CKEDITOR.instances.textarea.insertText('SOME FLAG');
        var data = CKEDITOR.instances.textarea.getData();
        data = data.replace('SOME FLAG', '</div><div class="novertline"></div><div class="vertline">');
        CKEDITOR.instances.textarea.setData(data);
    }
});

В моем файле ckeditor.css я добавил два моих класса - но у вас, очевидно, уже есть свой эквивалентный класс div, который создает синюю строку:

.vertline {
    margin-left: 10px;
    border-left: 1px solid blue;
    height: 100%;
}
.novertline {
    margin-left: 10px;
    border-left: none;
    height: 100%;
}

Это нужно будет настроить для вашей ситуации. Однако он разбивает div по мере необходимости.