在CKEditor中重新加载页面后保留光标位置 [英] Retain cursor position after reloading the page in CKEditor

问题描述

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

  var bookmark = editor.selection.createBookmarks 
  

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

  var data = editor.getData（）
  

返回以下内容

 < p> one< / p> 
 
< p>两个< span style =display：none>& nbsp;< / span>< / p& 
 
< p>三< / p> 
  

而不是以下

 < p>一个< / p> 
 
< p>两个< span data-cke-bookmakrs =1style =display：none& nbsp;< / span>< / p& 
 
< p>三< / 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'）//这里值'1'不是什么意思
  
并在 config.js中执行以下操作 
  config.extraAllowedContent =span [datas-selection-bookmark]
  
当使用 editor.getData（）请求编辑器内容时，将返回以下
 < p>一个< / p> 
 
< p>两个< span data-selection-bookmakr =1style =display：none>& nbsp;< / span> 
 
< p> three< / p> 
  
 下半场（重新载入或重新导入）
  var editor = CKEDITOR.replace（'editor_textarea'）; 
 editor.on（'contentDom'，function（）{
 var ifrWin = getIframeWindow（）; //你需要写一个代码来获取CKEditor的iframe窗口
 
 
 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将光标移动到
 
 range.collapse（true）; 
 
 sel.addRange（range）; 
 
 $ span.remove（）; 
 
 
 ifrWin.document.getElementsByTagName（'body'）[0] .focus（）; 
}）; 
  
 
I am using CKEditor(4.1) in my project.I would like to retain the cursor position in editor after user reloading the page. CKEditor provides
var bookmark = editor.selection.createBookmarks();
to store the cursor position.However, if i use 
var data = editor.getData()
returns the following content
<p>one</p>

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

<p>three</p>
instead of the following
<p>one</p>

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

<p>three</p>
In config.js, I did the following thing
config.extraAllowedContent = "span[data-cke-bookmark]"
What am i missing here?

Thanks in advance for your answers and suggestions...
解决方案
I found a workaround to resolve the problem. I won't say this is a direct solution.(I haven't check for IE)

Once I create bookmark, It will return JSON object as follows
{collapsed: true,
endNode: undefined,
serializable: undefined,
startNode: CKEDITOR.dom.element}
And you can get the reference element by 
var spanRef =  object.startNode.$;
And a custom attribute.
$(spanRef).attr('data-selection-bookmark','1')//here value '1' doesn't mean anything
And do the following thing in config.js
config.extraAllowedContent = "span[data-selection-bookmark]"
When you ask the editor content by using editor.getData(), It will return the following
<p>one</p>

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

<p>three</p>
The Next Half ( After Reload or Reinit)
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();
});


                        
这篇关于在CKEditor中重新加载页面后保留光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！