Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/428.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在CKEditor中重新加载页面后保留光标位置_Javascript_Ckeditor - Fatal编程技术网

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

Javascript 在CKEditor中重新加载页面后保留光标位置,javascript,ckeditor,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

我在项目中使用的是
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>
我错过了什么


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

我找到了解决问题的方法。我不会说这是一个直接的解决方案。(我没有检查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-cke-bookmakrs="1" style="display:none">&nbsp;</span></p>

<p>three</p>
<p>one</p>

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

<p>three</p>

与其使用本机选择和范围,不如使用CKEditor的选择系统。创建一个可序列化书签,将
数据cke-*
属性移动到
数据-*
,以便在获取数据时不会删除它们,获取数据。然后,加载此数据,用
数据cke-*
替换
数据-*
属性并使用方法。基本上-尝试使用尽可能多的CKEditor的东西,因为这样更安全。但一般来说这是可以的。它并不完全可靠,因为例如,表格单元格选择会将跨距保留在错误的位置,因此您可能需要在创建书签之前稍微变换一个范围。但在大多数情况下,它应该是有效的。@Reinmar:谢谢你的建议。
<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();
});