CKEditor中断<div>

Question

CKEditor效果很好。我想改进的只是一件小事

我们有使用CKEditor的消息系统。原始（旧）文本位于垂直蓝线中。请参见屏幕截图：

我想打破<div>。

到目前为止，我发现无法打破它。

在我的情况下，RETURN键应该会破坏<div>。

Answer 1

您可以使用以下模式配置回车键：

• ENTER_P - 创建新的<p>段落;
• ENTER_BR - 行被<br>元素打破;
• ENTER_DIV - 创建了新的<div>块。

所以在你的情况下，打破一个div：

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

以下是here

的文档

Answer 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。