在CKEditor中重新加载页面后保留光标位置

时间:2014-12-17 10:58:27

标签: javascript ckeditor

我在我的项目中使用CKEditor(4.1)。我想在用户重新加载页面后保留编辑器中的光标位置。 CKEditor提供了

var bookmark = editor.selection.createBookmarks();

存储光标位置。但是,如果我使用

var data = editor.getData()

返回以下内容

<p>one</p>

<p>two<span style="display:none">&nbsp;</span></p>

<p>three</p>

而不是以下

<p>one</p>

<p>two<span data-cke-bookmakrs="1" style="display:none">&nbsp;</span></p>

<p>three</p>

config.js中,我做了以下事情

config.extraAllowedContent = "span[data-cke-bookmark]"

我在这里缺少什么?

提前感谢您的回答和建议......

1 个答案:

答案 0 :(得分:3)

我找到了解决问题的解决方法。我不会说这是一个直接的解决方案。(我没有检查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">&nbsp;</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();
});