Integrating CKEDITOR with rivet js based application

[sadhanadhande]

We are trying to use ckeditor in a rivet and backbone js based application.

Following are the part of code where we are trying to attach ckeditor with class 'ckeditor'

<textarea class='ckeditor' data-rv-input="model.<%= Formbuilder.options.mappings.CONTENT %>" /> </textarea>

We have successfully attached ckeditor instance with textarea, but problem comes with backbone model data. The editor content are not reflecting in backbone model.

we have tried to update content with following ways

1. set CKEDITOR.instances['ckeditor'].getData() to the textarea
2. CKEDITOR.instances['ckeditor'].updateElement();

But no luck. Any help on this problem would be greatly appreciated!

Thank you in advance!

[Duder-onomy]

Hi,
I have used CK editor with Rivets and backbone many times. Usually, it does not involve rivets.

The key takeaway is that you add event handling to the editor ckeditor.on('change', ..update the model and backbone.model.on('change', ...updateCK editor

Here is how I solved it in this CMS:
Taken out of context, but I hope it helps: (written in a require.js env, all of ckeditors dependencies are loaded ASYNC)

_prepareCkeditor.call(this)
    .done(
        _setEditorValue.bind(this),
        _setEditorEventHandling.bind(this),
        _setModelEventHandling.bind(this)
    );

function _prepareCkeditor() {
    var $deferred = new $.Deferred();

    require(['ckeditorAdapter'], _startEditor.bind(this, $deferred));

    return $deferred.promise();
}

function _startEditor($deferred) {
    var self = this;
    this.ckeditor = this.$('#ckeditor' + this.model.cid).ckeditor(ckeditorConfig, $deferred.resolve).editor;
}

function _setEditorValue() {
    if(!_.isUndefined(this.model.get('value'))) {
        this.ckeditor.setData(this.model.get('value'));
    }
}

function _setEditorEventHandling() {
     this.ckeditor.on('change', _setContentValue.bind(this));
}

function _setModelEventHandling() {
     this.model.on('change:value', _setEditorValue.bind(this));
}

function _setContentValue() {
    this.model.set('value', this.ckeditor.getData());
}

Though, I bet you could write a super slick binder for this, ...or event a component.
I will try both of those out on my lunch break and get back to you. Could be mutually beneficial.

Cheers