Question

我使用以下指令创建ckEditor视图。该指令还有其他行可以保存数据，但这些不包括在内，因为保存始终适用于我。

app.directive('ckEditor', [function () {
    return {
        require: '?ngModel',
        link: function ($scope, elm, attr, ngModel) {
            var ck = ck = CKEDITOR.replace(elm[0]);

            ngModel.$render = function (value) {
            ck.setData(ngModel.$modelValue);
            setTimeout(function () {
                ck.setData(ngModel.$modelValue);
            }, 1000);
        };            }
    };
}])

窗口出现，但几乎总是第一次它是空的。然后单击[SOURCE]按钮显示源并再次单击它后，窗口将填充数据。

我非常确定ck.setData在尝试ck.getData时工作，然后将输出记录到控制台。但是，似乎ck.setData在开始时不会使数据可见。

是否有某种方法可以强制显示视图窗口内容？

Answer 1

您可以随时在模型上调用渲染，它只会执行您告诉它的任何操作。在您的情况下，调用ngModel.$render()会抓取$modelValue并将其传递给ck.setData()。 Angular会在其摘要周期内（即每当它注意到模型已更新时）自动调用$render。但是，我注意到Angular有时候没有正确更新，特别是在编译指令之前设置$modelValue的情况下。

因此，您可以在设置模态对象时简单地调用ngModel.$render()。唯一的问题是你必须有权访问ngModel对象来执行此操作，而控制器中没有这个对象。我的建议是做以下事情：

在您的控制器中：

$scope.editRow = function (row, entityType) {
   $scope.modal.data = row;
   $scope.modal.visible = true;
   ...
   ...
   // trigger event after $scope.modal is set
   $scope.$emit('modalObjectSet', $scope.modal);  //passing $scope.modal is optional
}

在你的指令中：

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

scope.$on('modalObjectSet', function(e, modalData){
    // force a call to render
    ngModel.$render();
});

它不是一个特别干净的解决方案，但它应该允许您在需要时拨打$render。我希望有所帮助。

更新:(更新后）

我不知道你的控制器是嵌套的。这可能会在Angular中变得非常棘手，但我会尝试提供一些可能的解决方案（假设我无法看到所有代码和项目布局）。范围事件（如注释here）特定于范围的嵌套，并且仅向子范围发出事件。因此，我建议尝试以下三种解决方案之一（按照我个人喜好的顺序列出）：

1）重新组织你的代码以获得更清晰的布局（更少的控制器嵌套），这样你的范围就是直接的后代（而不是兄弟控制器）。

2）我将假设1)是不可能的。接下来我会尝试使用$scope.$broadcast()函数。其中的规格也列为here。 $emit和$broadcast之间的区别在于$ emit仅向子$ scope发送事件，而$ broadcast将向父和子范围发送事件。

3）忘记在角度中使用$scope个事件，只使用通用的javascript事件（使用jQuery之类的框架，或者甚至像示例here中那样滚动自己的事件）

Answer 2

对这个问题有一个相当简单的答案。我检查了DOM，发现数据实际上一直在加载。但是它没有在Chrome浏览器中显示。所以问题更多的是ckEditor的显示问题。奇怪的解决方案似乎是调整ckEditor窗口的大小，然后使文本可见。

Answer 3

默认情况下隐藏ckeditor时，这是ckeditor的一个奇怪问题。试图显示编辑器有30％的可能性编辑器无法编辑，编辑器数据被清除。如果你试图隐藏/显示你的编辑器，使用像position:absolute;left-9999px;这样的CSS技巧隐藏编辑器，然后用css将其返回。这样，ckeditor不会在DOM中删除，而只是位于其他位置。

Answer 4

使用非常简单有效的java脚本代码。注意 editor1 是我的textarea id

<script>
  $(function () {
    CKEDITOR.timestamp= new Date();
    CKEDITOR.replace('editor1');
  });
</script>

第二种方式在控制器中，当您的查询是从数据库中获取数据时，请使用

是.success之后的代码（function（）。

 $http.get(url).success(function(){
   CKEDITOR.replace('editor1');
});

Answer 5

我知道，这个帖子已经死了一年了，但我遇到了同样的问题，我找到了另一个（仍然是丑陋的）解决这个问题的方法：

instance.setData(html, function(){
  instance.setData(html);
});

ckEditor的视图区域有时在开始时显示为空

5 个答案: