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

Question

我在我的项目中使用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]"

我在这里错过了什么？

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

- Kirubachari

Answer 1

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

- Kirubachari

---

不要使用原生的选择和范围，而应该使用CKEditor的选择系统。创建可序列化的书签，将data-cke-*属性移动到data-*，这样在获取数据时它们就不会被删除，然后获取数据。接着，加载此数据，用data-cke-*属性替换data-*，并使用moveToBookmark()方法。基本上，尽可能多地使用CKEditor的东西，因为这样更安全。 - Reinmar

但总的来说这是可以的。它不是完全可靠的，因为例如选择表格单元格会导致跨度错误的位置，所以您可能需要在创建书签之前对范围进行一些转换。但在大多数情况下应该能够正常工作。 - Reinmar

@Reinmar：感谢您的建议。 - Kirubachari