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 div下的最後一個子div的類別ckeditor-col-container

我已經通過這個SO鏈接，談論插入HTML給定ra NGE：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存有

和最終的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是在點之間顯示的。當代碼格式化時，我沒有找到突出顯示代碼的方法。

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