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

我有一个网页，它使用CKEditor创建一个简单的编辑窗格来编写消息。我遇到的问题是，当我单击发送消息时，从CKEditor检索到的内容是窗格的内容，但最后一个字母被截断。截断AngularJS中的最后一个字母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？

使用：

AngularJS :: 1.3.4
NG-的CKEditor :: 0.2（CKEditor的4.1.2）

来源

2015-01-21 Steve

您可以检查，如果是的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);

来源

2015-01-21 13:40:23 Nenotlep

如果这不是解决方案，我很高兴稍后删除此答案。 – Nenotlep 2015-01-21 13:40:41

这似乎是一个非常哈克的事情......但它确实工作！它适用于这个版本的CKEditor/Angular，所以我会把它给你。我想我也会创建一个单独的答案，因为我发现升级到CKEditor 4.4.6也解决了这个问题。所以我猜测4.1.2中存在一个错误，你的解决方案可以解决这个问题，并且已经编写了一个修复程序。 – Steve 2015-01-21 14:14:44

对我来说，它只是简单地将'updateModel'包装到'setTimeout（...，0）'中。我的猜测是，这是在JS事件队列中“跳过”CKEditor的事件处理程序的一种奇怪的方式 – 2015-12-05 22:00:45

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

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

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

来源

2015-01-21 14:23:02 Steve

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

回答

相关问题