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

我创建了一个名为'selection'的Ckeditor插件来从

获取数据

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步

enter image description here

在mouseup上，我将自动加载Ckeditor。如下图所示，它显示“正在加载......”

第2步

enter image description here

第3步

enter image description here

在步骤3 中，CKEditor已完全加载。在这部分中，我还希望突出显示我在 Step 1 中选择的单词，以便用户可以继续进行格式化并避免再次突出显示来惹恼用户。

Answer 1

使用书签。首先创建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 );

这就是全部。

Answer 2

我设法通过此线程how to select a text range in CKEDITOR programatically?和Oleq 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]]);
    }
  });

使用这种方法有什么我需要注意的吗？

<强>更新

以上代码仅适用于预告视图。在我的完整节点视图中，它选择整个内容。

在Ckeditor中传递用户选择

2 个答案: