I am trying to use multiple instances of inline editing in my document. I have figured out how to enable all these instances and save the data of each instance, to a mysql database. But I need a way to distuinquish between each editor. I was thinking about using id's for this, but then I need to be able to get each elements id when saving, to save that to the database aswell. How can I do this?

This is what I have tried, here is my editors:

<div class="row">
   <div contenteditable="true" id="editor1" class="col-md-4 col-md-offset-2 editable">
       <p>Edit me plox</p>
   </div>

   <div contenteditable="true" id="editor2" class="col-md-4 col-md-offset-1 editable">
       <p>Edit me plox</p>
   </div>
</div>

Here is the script that saves the contents of the editors:

var elements = $( '.editable' );
elements.each( function() {
CKEDITOR.inline(this  ,{
        on:{
            blur: function(event){
                if (event.editor.checkDirty())
                    console.log(event.editor.getData());
                    var data = event.editor.getData();

                    var request = jQuery.ajax({
                        url: "coreedit/scripts/savecontent.php",
                        type: "POST",
                        data: {
                            content : data,
                            id: $(this).attr('id')
                        },
                        dataType: "html"
                    });

                    alert($(this).attr('id'));
            }
        }
    });
} );

This retrieves the id of the ckeditor I guess, because the message it returns is cke_1 and cke_2. I want the actual id's of the elements. (bump)

I am trying to use multiple instances of inline editing in my document. I have figured out how to enable all these instances and save the data of each instance, to a mysql database. But I need a way to distuinquish between each editor. I was thinking about using id's for this, but then I need to be able to get each elements id when saving, to save that to the database aswell. How can I do this?

This is what I have tried, here is my editors:

<div class="row">
   <div contenteditable="true" id="editor1" class="col-md-4 col-md-offset-2 editable">
       <p>Edit me plox</p>
   </div>

   <div contenteditable="true" id="editor2" class="col-md-4 col-md-offset-1 editable">
       <p>Edit me plox</p>
   </div>
</div>

Here is the script that saves the contents of the editors:

var elements = $( '.editable' );
elements.each( function() {
CKEDITOR.inline(this  ,{
        on:{
            blur: function(event){
                if (event.editor.checkDirty())
                    console.log(event.editor.getData());
                    var data = event.editor.getData();

                    var request = jQuery.ajax({
                        url: "coreedit/scripts/savecontent.php",
                        type: "POST",
                        data: {
                            content : data,
                            id: $(this).attr('id')
                        },
                        dataType: "html"
                    });

                    alert($(this).attr('id'));
            }
        }
    });
} );

This retrieves the id of the ckeditor I guess, because the message it returns is cke_1 and cke_2. I want the actual id's of the elements. (bump)

• javascript
• jquery
• ckeditor

• it's just a guess but you can try $(this).parent().attr('id') ... or you could inspect the dom tree in order to point to the right element ... read more about traversing – rafaelcastrocouto Commented Apr 8, 2014 at 18:09

1 Answer 1

In the event, this is a CKEditor object ... here are the docs about it

 id: this.element.$.id

DEMO