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

Question

我正在为 Drupal 7 开发模块 CKEditor Responsive Plugin。我需要在光标位置上方的自定义位置插入一块 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 集附加到最后一个子 [= div 的 68=] 和 class ckeditor-col-container

我已经完成了这个 SO link，它讨论了在给定范围内插入 HTML：Insert HTML before an element in CKEditor

然而，以下是我未能解决的挑战：

遍历当前光标位置上方的DOM，准备相对于最近的div和class[=13]的范围=]
到达此 (ckeditor-col-container) DOM 的末尾并准备范围，以便将新的 HTML 元素插入到 ckeditor-col-container[= 的范围内53=]
游标上面的DOM结构可以嵌套，但是我有兴趣找到最近的div和classckeditor-col-container，不管嵌套复杂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>

新的'inserted' 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'
        });
    }
});

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

CKEditor get range to insert HTML at custom location

html

javascript

jquery

ckeditor