Question

I am trying to create buttons for ckeditor that will add rows and columns of contents to the editor using 960.gs grid system.

I need a way to insert the generated code into certain div that already exists in the editor window not just at the cursor.

For example, We have this code in the editor:

<div class="container">
  <div class="grid_12">
    <div class="inner">
    </div>
  </div>
</div>

When I click my button, This code is generated:

<div class="grid_3"></div>

I need the generated code to be inserted into the div with class (grid_12). Whatever the position of the cursor is.

Answer 1

Since ckeditor seems to have the normal DOM model for the content being edited, you should be able to do something like this:

var oEditor = CKEDITOR.instances.editor1;
var element = oEditor.document.getById('myElement');
var grid_3 = new CKEDITOR.dom.element('div');
grid_3.setAttributes({'class' : 'grid_3'});
element.append(grid_3);

Here I did assume you’d use an id for the grid_12 element, if you wouldn’t it’s not possible to do it without fetching the cursors position and extracting the specified div using that then…