CKEditor中断<div>

时间:2017-09-12 09:13:44

标签: javascript ckeditor

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

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

enter image description here

我想打破<div>

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

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

2 个答案:

答案 0 :(得分:8)

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

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

所以在你的情况下,打破一个div:

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

以下是here

的文档

答案 1 :(得分:4)

如果设置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