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

Truncation of last letter in AngularJS CKEditor

本文关键字：最后一个 AngularJS CKEditor 截断      更新时间：2023-09-26

我有一个网页，它使用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);就不会被触发。但是，单击离开框似乎不会触发任何类型的更改事件，所以我不确定。

配置/代码中是否有错误？

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

用：

  • 角度 ：： 1.3.4
  • ng-ckeditor ：： 0.2 （ckeditor 4.1.2）

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

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

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

您可以通过为其创建一个小限制来检查 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);
相关文章：