Retain cursor position after reloading the page in CKEditor

后端 未结 1 1874
死守一世寂寞
死守一世寂寞 2021-01-13 13:18

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

<
相关标签:
1条回答
  • 2021-01-13 13:40

    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();
    });
    
    0 讨论(0)
提交回复
热议问题