angularjs ckeditor指令有时无法从服务加载数据

发布时间：2020-12-17 09:28:45 所属栏目：安全来源：网络整理

导读：我使用 Vojta’s angularJS directive,但有时ckeditor将无法显示服务中的数据.这几乎从来没有发生在刷新,但通常发生在导航回页面.我能够验证$render函数总是使用正确的数据调用ck.setData,但有时它不会显示. 看来,$render方法有时在ckeditor准备好之前被调用

我使用 Vojta’s angularJS directive,但有时ckeditor将无法显示服务中的数据.这几乎从来没有发生在刷新,但通常发生在导航回页面.我能够验证$render函数总是使用正确的数据调用ck.setData,但有时它不会显示.

看来,$render方法有时在ckeditor准备好之前被调用.我可以通过添加一个监听器到instanceReady事件来解决这个问题,以确保它在ckeditor准备就绪后至少被调用一次.

ck.on('instanceReady',function() {
    ck.setData(ngModel.$viewValue);
  });

为了完整起见,这里是我使用的完整指令.

//Directive to work with the ckeditor
//See https://stackoverflow.com/questions/11997246/bind-ckeditor-value-to-model-text-in-angularjs-and-rails
app.directive('ckEditor',function() {
  return {
    require: '?ngModel',link: function(scope,elm,attr,ngModel) {
      var ck = CKEDITOR.replace(elm[0],{
                toolbar_Full:
                [
                { name: 'document',items : [] },{ name: 'clipboard',items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },{ name: 'editing',items : [ 'Find','Replace','SpellChecker','Scayt' ] },{ name: 'forms',{ name: 'basicstyles',items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript' ] },{ name: 'paragraph',items : [
                'NumberedList','BulletedList','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },{ name: 'links',{ name: 'insert',items : [ 'SpecialChar' ] },'/',{ name: 'styles',items : [ 'Styles','Format','Font','FontSize' ] },{ name: 'colors',{ name: 'tools',items : [ 'Maximize' ] }
                ],height: '290px',width: '99%'
            }
    );

      if (!ngModel) return;

      //loaded didn't seem to work,but instanceReady did
      //I added this because sometimes $render would call setData before the ckeditor was ready
      ck.on('instanceReady',function() {
        ck.setData(ngModel.$viewValue);
      });

      ck.on('pasteState',function() {
        scope.$apply(function() {
          ngModel.$setViewValue(ck.getData());
        });
      });

      ngModel.$render = function(value) {
        ck.setData(ngModel.$viewValue);
      };

    }
  };
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!