I have come across an issue with my web page that utilizes CKEditor for creating message edit panes. The problem arises when I try to send a message and the content retrieved from CKEditor is missing the last letter.
Below is a snippet of what I believe to be the relevant code in the application:
appDirectives.directive('ckEditor', function() {
return {
require : '?ngModel',
link : function(scope, elm, attr, ngModel) {
var ck = CKEDITOR.replace(elm[0], {
toolbar: [
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] }
],
removePlugins: 'elementspath'
});
if (!ngModel)
return;
ck.on('instanceReady', function() {
ck.setData(ngModel.$viewValue);
});
function updateModel() {
scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
}
ck.on('change', updateModel);
ck.on('key', updateModel);
ck.on('dataReady', updateModel);
ngModel.$render = function(value) {
ck.setData(ngModel.$viewValue);
};
}
};
});
As well as the corresponding HTML:
<div>
<div class="actions">
<button class="sendButton" ng-click="send()" type="button">
Send
</button>
</div>
<div>
{{message.content | warnIfContentMaxExceeded}}
</div>
<div class="body">
<textarea ck-editor="" id="contentEditor"
name="contentEditor" rows="10" cols="60"
ng-model="message.content"
value="message.content"></textarea>
</div>
</div>
And here's a glimpse at the controller:
$scope.send = function() {
var msg = $scope.message;
// ...
}
Upon inspecting my editor setup directive, I suspect that ck.on('change', updateModel); might not trigger immediately after each character input. However, clicking away from the editing pane does not seem to invoke any change event. Am I missing something in the configuration/code?
Do you reckon upgrading to a newer version of CKEditor would resolve this issue?
Current software versions in use:
- AngularJS :: 1.3.4
- ng-ckeditor :: 0.2 (ckeditor 4.1.2)