How do I save inline editor contents on the server?

Question

I'm using CKeditor to allow users to inline edit the content on a page once logged in.

I know I can access the data using:

var data = CKEDITOR.instances.editable.getData();

but I don't know how to send the data to a script so I can update the database. It would be cool if the script ran each time someone deselected a contenteditable element... but I don't know if thats even possible.

Any tips would be great! :)

My site is built using php/mysql.

score 18 · Accepted Answer · answered Dec 18 '12 at 09:40

18

Something like this:

CKEDITOR.disableAutoInline = true;

CKEDITOR.inline( 'editable', {
    on: {
        blur: function( event ) {
            var data = event.editor.getData();
            // Do sth with your data...
        }
    }
} );

Note that this won't work with other interactions like: user called editor.setData() or user closed the web page while editing. Contents will be lost in such cases. If I were you, I'd rather periodically check for new data:

CKEDITOR.disableAutoInline = true;

var editor = CKEDITOR.inline( 'editable', {
    on: {
        instanceReady: function() {
            periodicData();
        }
    }
} );

var periodicData = ( function(){
    var data, oldData;

    return function() {
        if ( ( data = editor.getData() ) !== oldData ) {
            oldData = data;
            console.log( data );
            // Do sth with your data...
        }

        setTimeout( periodicData, 1000 );
    };
})();

answered Dec 18 '12 at 09:40

oleq

15,697
1
38
65

1

Is it possible to call ckeditor on a specific class, instead of an ID - as I have more than one area on a page to edit. – Dan Temple Dec 18 '12 at 23:15
Add `contenteditable="true"` to your elements and set `CKEDITOR.disableAutoInline = false`. – oleq Dec 19 '12 at 14:05
then how do I get ckeditor to fire on blur without: `CKEDITOR.inline( 'headline', { on: { blur: function( event ) {` – Dan Temple Dec 19 '12 at 17:06
`CKEDITOR.on( 'blur', function( event ) {} )` for all editors. – oleq Dec 20 '12 at 09:04
The event handler defined by your last command is not being called when I click on or lose focus in my `contenteditable=true` divs... – Michael May 24 '17 at 00:05

score 3 · Answer 2 · answered Feb 21 '14 at 08:08

3

CKEDITOR.inline('editable'  ,{
        on:{
            blur: function(event){
                if (event.editor.checkDirty())
                    console.log(event.editor.getData());
            }
        }
    });

Try this.

answered Feb 21 '14 at 08:08

kei.

71
3

score 1 · Answer 3 · edited Dec 02 '15 at 13:04

1

It looks like "blur" event might help you: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#event:blur

edited Dec 02 '15 at 13:04

Toby Allen

10,997
11
73
124

answered Dec 17 '12 at 20:58

Andriy Kuba

8,093
2
29
46

ok, so how do you know what "editor" is when you have a lot of contenteditable=true elements on the page, but you don't know when one of them is going to be active (or maybe you don't even know what the elements will be at initialization because some might get added dynamically.) using CKEDITOR.on doesn't seem to work (events never get called) – Michael May 24 '17 at 16:52
What I did, I create editors dynamically, depending on the data, sometimes one, sometimes ten and so on. In this scenario, I had an "editor" instance in my script. It was not global "CKEDITOR.on" but exact instance "editor.on". So I was able to define exact "blur" event exactly on every instance. Typically it was a simple function that sends a message "take data (editor.getData()) and send it" to the part application that speaks with a server. – Andriy Kuba May 25 '17 at 07:06

How do I save inline editor contents on the server?

3 Answers3

Linked