Прохождение выбора пользователя в Ckeditor

Question

Я работаю над проектом, в котором мне нужно передать выбор данных, сделанный до загрузки CKEditor.

  /**
   * 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;
  };

Я создал плагин Ckeditor под названием "selection" для получения данных от

Drupal.xeditor.getSelection();

и повторно выделите тот выбор в 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);

Тем не менее, я испытываю трудности с повторным выделением выделенных текстов внутри Ckeditor. Пожалуйста, смотрите скриншот ниже для более подробной информации.

Шаг 1

При наведении мыши я загружу Ckeditor автоматически. Как вы можете видеть на изображении ниже, он говорит, что "Загрузка..."

Шаг 2

Шаг 3

На шаге 3 CKEditor полностью загружен. В этой части я хочу, чтобы также было выделено слово, выбранное на шаге 1, чтобы пользователь мог продолжить форматирование и избежать раздражения пользователя повторным выделением.

Answer 1

Мне удалось добиться того, что я хочу, используя подход в этой теме, как программно выбрать диапазон текста в CKEDITOR? и с олеком editor#instanceReady,

Вот весь мой код

  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]]);
    }
  });

Есть ли что-то, что мне нужно знать об использовании этого метода?

ОБНОВИТЬ:

Приведенный выше код работает только в тизере. В моем полном представлении узла это выбирает весь контент.

Answer 2

Используйте закладки. Создать экземпляр CKEDITOR.dom.selection первый:

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

Сохранить закладки с selection.createBookmarks():

var bookmarks = selection.createBookmarks( 1 );

Затем инициализируйте ваш CKEditor. Однажды #instanceReady звонок selection.selectBookmarks():

editor.getSelection().selectBookmarks( bookmarks );

Это все.