CODEWITHSUNDEEP
javascriptckeditoreditorcontenteditable
ninjascorner
ninjascorner

Reputation: 299

Passing user selection in Ckeditor

I'm working on a project where I need to pass the data selection made before the CKEditor get loaded.

  /**
   * Get text selection.
   */
  Drupal.xeditor.getSelection = function() {
    var text = "";
    if (window.getSelection) {
      text = window.getSelection().toString();
    }
    else if (document.selection && document.selection.type != "Control") {
      text = document.selection.createRange().text;
    }

    return text;
  };

I created a Ckeditor plugin called 'selection' to get the data from 

Drupal.xeditor.getSelection();

and re-highlight thatb selection inside the Ckeditor. 

/**
 * @file plugin.js
 * Manage selection in Ckeditor.
 */
( function($) {
  CKEDITOR.plugins.add( 'selection', {
    icons: 'selection',
    init: function( editor ) {
      //console.log(XEDITOR.current_selection);
      //console.log(CKEDITOR);
      editor.addCommand( 'selection', {
        exec : function( editor ) {   
          //
        }
      });
      editor.ui.addButton( 'selection', {
        label: 'Content selection',
        command: 'selection',
        icon: this.path + 'icons/selection.png'
      });
      editor.config.contentsCss = this.path + 'css/selection.css';
    },

    afterInit: function (editor) {
      // I can access the selection here.
      console.log(Drupal.xeditor.getSelection());

      // Auto highlight the string/word selected by the user earlier.

    }

  });
})(jQuery);

However, I have difficulty in re-highlighting the selected texts inside Ckeditor. Please see the screenshot below for more details.

Step 1

enter image description here

On mouseup, I will load the Ckeditor automatically. As you can see in the image below it says that "Loading..."

Step 2

enter image description here

Step 3

enter image description here

In step 3 the CKEditor is fully loaded. In this part I want also the word I selected in Step 1 to be highlighted so user can proceed on formatting and avoid to annoy the user by highlighting again.

Upvotes: 0

Views: 992

Answers (2)

ninjascorner
ninjascorner

Reputation: 299

I managed to achieved what I want using the approach in this thread how to select a text range in CKEDITOR programatically? and with Oleq editor#instanceReady.

Here is my whole code.

  CKEDITOR.on("instanceReady", function(event) {

    var sel = event.editor.getSelection();
    // Change the selection to the current element

    var element = sel.getStartElement();
    sel.selectElement(element);
    // Move the range to the text you would like to select

    var findString = Drupal.xeditor.getSelection();
    var ranges = event.editor.getSelection().getRanges();
    var startIndex = element.getHtml().indexOf(findString);
    if (startIndex != -1) {
      ranges[0].setStart(element.getFirst(), startIndex);
      ranges[0].setEnd(element.getFirst(), startIndex + findString.length);
      sel.selectRanges([ranges[0]]);
    }
  });

Is there something that I need to be aware of using this method?

UPDATE:

The above code only works in teaser view. In my full node view it selects the whole content.

Upvotes: 0

oleq
oleq

Reputation: 15895

Use bookmarks. Create an instance of CKEDITOR.dom.selection first:

var selection = new CKEDITOR.dom.selection( CKEDITOR.document );

Save bookmarks with selection.createBookmarks():

var bookmarks = selection.createBookmarks( 1 );

Then initialize your CKEditor. Once #instanceReady call selection.selectBookmarks():

editor.getSelection().selectBookmarks( bookmarks );

That's all.

Upvotes: 1

Related Questions