我在我的项目中使用 CKEditor
(4.1)。我想在用户重新加载页面后保留光标在编辑器中的位置。 CKEditor
提供
var bookmark = editor.selection.createBookmarks();
存储光标位置。但是,如果我使用
var data = editor.getData()
返回以下内容
<p>one</p>
<p>two<span style="display:none"> </span></p>
<p>three</p>
而不是下面的
<p>one</p>
<p>two<span data-cke-bookmakrs="1" style="display:none"> </span></p>
<p>three</p>
在config.js
中,我做了以下事情
config.extraAllowedContent = "span[data-cke-bookmark]"
我在这里错过了什么?
提前感谢您的回答和建议...
最佳答案
我找到了解决问题的方法。我不会说这是一个直接的解决方案。(我没有检查 IE)
一旦我创建了书签,它将返回如下 JSON 对象
{collapsed: true,
endNode: undefined,
serializable: undefined,
startNode: CKEDITOR.dom.element}
你可以通过
获取引用元素var spanRef = object.startNode.$;
还有一个自定义属性。
$(spanRef).attr('data-selection-bookmark','1')//here value '1' doesn't mean anything
并在 config.js
config.extraAllowedContent = "span[data-selection-bookmark]"
当您使用editor.getData()
询问编辑器内容时,它将返回以下内容
<p>one</p>
<p>two<span data-selection-bookmakr="1" style="display:none"> </span></p>
<p>three</p>
下半场(重新加载或重新初始化后)
var editor = CKEDITOR.replace( 'editor_textarea');
editor.on( 'contentDom', function(){
var ifrWin = getIframeWindow(); //You need write a code to get iframe window of CKEditor
var range = document.createRange();
var sel = ifrWin.getSelection();
var doc = editor.document.$;
var $span = $( doc.body ).find( 'span[data-selection-bookmark]' );
range.selectNode( $span[ 0 ] );// To move the cursor before
range.collapse(true);
sel.addRange(range);
$span.remove();
ifrWin.document.getElementsByTagName('body')[0].focus();
});
关于javascript - 在 CKEditor 中重新加载页面后保留光标位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27524002/