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

我正在为Drupal7开发一个模块。我需要在光标位置上方的自定义位置插入一段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 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。当代码格式化时，我没有找到突出显示代码的方法。

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

一般的想法是获取光标的当前位置，并开始检查是否有任何同级（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.plugins.add（'samplePlugin'{
图标：“samplePluginIcon”，
init：函数（编辑器）{
editor.addCommand（'samplePlugin'{
执行：函数（编辑器）{
//首先，我们需要找到光标所在的位置
var selection=editor.getSelection（）；
var range=selection.getRanges（）[0]；
//我们在DOM树上下移动，所以我们需要prev和next元素
var prevNode=range.getPreviousNode（）；
var nextNode=range.getNextNode（）；
//保存我们正在寻找的容器
var容器=null；
while（上一个节点| |下一个节点）{
while（prevNode&&prevNode.type==CKEDITOR.NODE\u TEXT）{
prevNode=prevNode.getPreviousSourceNode（）；
}
if（prevNode&&prevNode.hasClass（'ckeditor-col-container'））{
container=prevNode；
打破
}else if（prevNode）{
prevNode=prevNode.getPreviousSourceNode（）；
}
while（nextNode&&nextNode.type==CKEDITOR.NODE\u TEXT）{
nextNode=nextNode.getNextSourceNode（）；
}
if（nextNode&&nextNode.hasClass（'ckeditor-col-container'））{
容器=下一个节点；
打破
}else if（下一个节点）{
nextNode=nextNode.getNextSourceNode（）；
}
}
//如果我们找到了我们正在寻找的容器，只需在其中附加一些HTML即可。
if（集装箱）{
container.appendHtml（“”+
''+
“lorem ipsum
”+
''+
'')
}
}
});
editor.ui.addButton（'samplePlugin'{
标签：“samplePlugin”，
命令：“samplePlugin”，
工具栏：“插入”
});
}
});

你能给出一个你想插入的html的例子吗？插入后的最终html应该是什么？@Dekel-我已经编辑了上面的问题。你检查了答案吗？@Dekel-我检查了，但没有尝试，我现在正在做！谢谢你的回答，我会把我的发现报告给你。太棒了！为我工作，给了你答案和赏金。然而，有一件事我认为你在这里错过了。我明确地希望只在光标上方的DOM结构中检查并插入新的HTML。我认为你的代码还不能适应这个问题，有什么解决办法吗？@RajPawanGumdal，你说过你想要最近的div，所以代码会给你最近的div（不管是在光标位置之前还是之后）。如果只想进入dom树，可以删除与

nextNode

相关的部分。我在问题中提到了“遍历当前光标位置上方的dom”。但不管怎样，这对我来说现在起作用了！谢谢你的帮助！