CKEditor效果很好。我想改进的只是一件小事
我们有使用CKEditor的消息系统。原始(旧)文本位于垂直蓝线中。请参见屏幕截图:
我想打破<div>
。
到目前为止,我发现无法打破它。
在我的情况下,RETURN键应该会破坏<div>
。
答案 0 :(得分:8)
您可以使用以下模式配置回车键:
<p>
段落; <br>
元素打破; <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
。