AngularJS CKEditor 中最后一个字母的截断

Question

我有一个网页，它使用 CKEditor 创建一个用于编写消息的简单编辑窗格。我遇到的问题是，当我单击发送消息时，从 CKEditor 检索的内容是窗格的内容，但最后一个字母被截断了。

以下是我认为是应用程序的相关代码：

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);
            };
        }
    };
});

和 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>

并且来自控制器：

$scope.send = function() {
    var msg = $scope.message;
    // ...
}

查看我设置编辑器的指令，我猜也许 ck.on('change', updateModel); 不会在向编辑器写入字符后立即触发。但是，点击框外似乎不会触发任何类型的更改事件，所以我不确定。

configuration/code是否有错误？

或者我是否可能只需要升级到更新版本的 CKEditor？

使用：

AngularJS:: 1.3.4
ng-ckeditor :: 0.2 (ckeditor 4.1.2)

Answer 1

您可以通过为它创建一个小节流来检查 updateModel 是否触发得太快，我已经用滚动的东西和 CKE 事件做过几次。

类似这种未经测试的方法可能有效：

var throttle = -1;
function updateModelThrottle() {
    if (throttle != -1) {
        if (console && console.log) { console.log("Throttled!"); }
        clearTimeout(throttle);
    }
    throttle = setTimeout(updateModel, 500);
}
function updateModel() {
    if (console && console.log) { console.log("Firing!"); }
    scope.$apply(function() {
        ngModel.$setViewValue(ck.getData());
        throttle = -1;
    });
}

ck.on('change', updateModelThrottle);
ck.on('key', updateModelThrottle);
ck.on('dataReady', updateModelThrottle);

Answer 2

根据我自己的进一步调查，我发现升级到 CKEditor 4.4.6 可以解决问题。

我必须假设早期版本中的错误已在 4.1.2 和 4.4.6 之间的某个时间点得到修复。

注意 - 这可能是许多人的首选解决方案。但是，@Nenotlep 的答案适用于此版本的 CKEditor，因此我接受并创建此答案以获取更多信息。

AngularJS CKEditor 中最后一个字母的截断

Truncation of last letter in AngularJS CKEditor

javascript

ckeditor

angularjs