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下面添加我的新div组ckeditor-col-container

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

然而，以下是我无法解决的挑战：

遍历当前光标位置上方的DOM以准备与最近div 相关的范围ckeditor-col-container
到达此（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>

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

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

1 个答案: