javascript - CKEditor 获取范围以在自定义位置插入 HTML

Question

我正在开发一个模块 CKEditor Responsive Plugin对于 Drupal 7。我需要在光标位置上方的自定义位置插入一段 HTML。下面是显示当前光标位置的图像:

以上部分代码的 HTML 如下所示:

<div class="ckeditor-col-container">
   <div class="hundred-hundred-fifty-fifty-thirtythree-thirtythree">
      <div class="grid-12 twelvecol">
         <p>lorem ipsum</p>
      </div>
   </div>
   <div class="hundred-hundred-fifty-fifty-thirtythree-thirtythree">
      <div class="grid-12 twelvecol">
         <p>lorem ipsum</p>
      </div>
   </div>
   <div class="hundred-hundred-fifty-fifty-thirtythree-thirtythree">
      <div class="grid-12 twelvecol">
         <p>lorem ipsum</p>
      </div>
   </div>
</div>
<p><br />
   Sri Ramakrishna Vidya Kendra
</p>
<p></p>

您看到的三个 div 是我现在要插入的位置 - 这意味着我需要将新的 div 集附加到类 ckeditor-col-container 的 div 的最后一个子 div 下面。

我已经浏览了这个SO链接，其中讨论了在给定范围内插入HTML:Insert HTML before an element in CKEditor

但是，以下是我无法解决的挑战:

• 遍历当前光标位置上方的 DOM，以准备相对于类 ckeditor-col-container 的最近的 div 的范围。
• 到达此 (ckeditor-col-container) DOM 的末尾并准备范围，以便将新的 HTML 元素插入 ckeditor-col-container 的范围内
• 光标上方的 DOM 结构可以嵌套，但我有兴趣找到类 ckeditor-col-container 的最近的 div无论复杂的嵌套 DOM 结构如何。

使用 jQuery 对象并遍历 DOM 来实现这一点相对容易，但 CKEditor 比较神秘，文献相对较少。上面的第 3 点也很棘手，因为必须以平面方式读取分层数据结构。

如有任何帮助，我们将不胜感激。

编辑:我想要插入的示例 HTML 代码片段与您在上面可以找到的 div 相同:

lorem ipsum

最终的 HTML 将是这样的:

    <div class="ckeditor-col-container">
       <div class="hundred-hundred-fifty-fifty-thirtythree-thirtythree">
          <div class="grid-12 twelvecol">
             <p>lorem ipsum</p>
          </div>
       </div>
       <div class="hundred-hundred-fifty-fifty-thirtythree-thirtythree">
          <div class="grid-12 twelvecol">
             <p>lorem ipsum</p>
          </div>
       </div>
       <div class="hundred-hundred-fifty-fifty-thirtythree-thirtythree">
          <div class="grid-12 twelvecol">
             <p>lorem ipsum</p>
          </div>
       </div>
.
.
.
       <div class="hundred-hundred-fifty-fifty-thirtythree-thirtythree">
          <div class="grid-12 twelvecol">
             <p>lorem ipsum</p>
          </div>
       </div>
.
.
.
    </div>
    <p><br />
       Sri Ramakrishna Vidya Kendra
    </p>
    <p></p>

新的“插入”div 是显示在点之间的 div。我没有找到在代码格式化时突出显示代码的方法。

Answer 1

该代码没有进行完整的遍历，但我认为它可以为您提供一个非常好的起点。

总体思路是获取光标的当前位置并开始检查是否有任何兄弟元素(DOM 树上和下)是我们正在查找的元素。

CKEDITOR.plugins.add( 'samplePlugin', {
    icons: 'samplePluginIcon',
    init: function( editor ) {
        editor.addCommand( 'samplePlugin', {
            exec: function( editor ) {
                // First we need to find where our cursor is
                var selection = editor.getSelection();
                var range = selection.getRanges()[0];

                // We go up and down the DOM tree, so we need the prev and next elements
                var prevNode = range.getPreviousNode();
                var nextNode = range.getNextNode();

                // Save the container we are looking for
                var container = null;
                while (prevNode || nextNode) {
                    while (prevNode && prevNode.type == CKEDITOR.NODE_TEXT) {
                        prevNode = prevNode.getPreviousSourceNode();
                    }
                    if (prevNode && prevNode.hasClass('ckeditor-col-container')) {
                        container = prevNode;
                        break;
                    } else if (prevNode) {
                        prevNode = prevNode.getPreviousSourceNode();
                    }
                    while (nextNode && nextNode.type == CKEDITOR.NODE_TEXT) {
                        nextNode = nextNode.getNextSourceNode();
                    }
                    if (nextNode && nextNode.hasClass('ckeditor-col-container')) {
                        container = nextNode;
                        break;
                    } else if (nextNode) {
                        nextNode = nextNode.getNextSourceNode();
                    }
                }
                // In case we found the container we are looking for - just append some HTML to it.
                if (container) {
                    container.appendHtml('<div class="hundred-hundred-fifty-fifty-thirtythree-thirtythree">'+
                                    '<div class="grid-12 twelvecol">'+
                                        '<p>lorem ipsum</p>'+
                                    '</div>'+
                                 '</div>')
                }
            }
        });
        editor.ui.addButton( 'samplePlugin', {
            label: 'samplePlugin',
            command: 'samplePlugin',
            toolbar: 'insert'
        });
    }
});