CODEWITHSUNDEEP
phpjqueryhtmlajaxckeditor
Thobias Nordgaard
Thobias Nordgaard

Reputation: 295

CKeditor Inline editing, get Element class

So i am trying to use CKeditor with inline editing and have found a plugin that sends the current data of the ckeditor element to a ajax script which then sends the data to a php script for saving purposes. But since I am going to need multiple editor instances on each page I need to send the id of the editor instance along with the data. These are my files:

index.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CKeditor test</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
    <div class="content">
        <div class="editable" contenteditable="true">
            Hello there my friend.
        </div>
    </div>

    <script type="text/javascript">
    window.onload = function()
    {
        CKEDITOR.disableAutoInline = true;
        CKEDITOR.inline( '.editable' )
    }
    </script>
</body>
</html>

the plugin that saves the data: (its a bit messy, sorry)

CKEDITOR.plugins.add( 'inlinesave',

{

    init: function( editor )

    {

        editor.addCommand( 'inlinesave',

            {

                exec : function( editor )

                {


                    addData();



function addData() {
                        var data = editor.getData();
                        var element = editor.element;



                        jQuery.ajax({
                            type: "POST",



                            /*Replace 'dump.php' with the name of the file you wish to use                                  to handle the data.

                            Data can be retrieved from the variable $_POST                                          ['editable_data'].
*/

                            url: "dump.php",



                            data: { editabledata: data + ID OF THE ELEMENT HERE }


                        })



                        .done(function (data, textStatus, jqXHR) {


                            alert("Your content was successfully saved. " +  + " [" +                           jqXHR.responseText + "]");


                        })



                        .fail(function (jqXHR, textStatus, errorThrown) {


                            alert("Error saving content. [" + jqXHR.responseText + "]");

                                });


                    }


                }

            });

        editor.ui.addButton( 'Inlinesave',

        {

            label: 'Save',

            command: 'inlinesave',
            icon: this.path + 'images/inlinesave.png'

        } );

    }

} );

How can this be achieved?

Upvotes: 1

Views: 1618

Answers (2)

Mahdi
Mahdi

Reputation: 755

you can get Id of element by:

editor.container.getId()

Upvotes: 1

KoalaBear
KoalaBear

Reputation: 2948

I had the same question.

You can do this, as you already have the element where the inline editor is working on:

data: {
  editabledata: data,
  id: element.attr('id')
}

And then you have 2 POST values in your incoming request on dump.php

Upvotes: 1

Related Questions