ng-bind= "name"在 ckeditor 中不起作用

Question

我是AngularJS的新手。它似乎没有ID =" editor1"，但添加时不起作用。

<script src="https://cdn.ckeditor.com/4.6.1/full-all/ckeditor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<div id="editor1">
    <h1>Hello <span ng-bind="name"></span></h1>
</div>
</div>
<script>
CKEDITOR.replace( 'editor1', {
    toolbar: [
        { name: 'document', items: [ 'Print' ] },
        { name: 'clipboard', items: [ 'Undo', 'Redo' ] }
    ]
} );
</script>

Answer 1

尝试以下代码，您将输入值进入ckeditor。您可以继续关注输入范围变量，只要您的输入值更改，它就会显示该文本中的CKEditor。因此，您必须将函数CKEDITOR.instances.editor1.setData($scope.name);在内部观察中调用，以将新的输入值设置为CKEditor。这是小提琴示例。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><script src="https://cdn.ckeditor.com/4.6.1/full-all/ckeditor.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Name: <input type="text" ng-model="name"></p>
<div id="editor1">
    <h1>Hello <span ng-bind="name"></span></h1>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    CKEDITOR.replace( 'editor1', {
    toolbar: [
        { name: 'document', items: [ 'Print' ] },
        { name: 'clipboard', items: [ 'Undo', 'Redo' ] }
    ]
} );
$scope.$watch('name', function () {
    CKEDITOR.instances.editor1.setData($scope.name);
});
});
</script>

Answer 2

用于编辑器字段中数据的动态结合使用CKEditor与Angular JS的组合。

https://github.com/esvit/ng-ckeditor

看看Ng-Ckeditor的文档。

Answer 3

您必须使用angular-ckeditor.js

html文件：

<script src="angular.js"></script>
<script src="ckeditor.js"></script>
<script src="angular-ckeditor.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <p>Name: <input type="text" ng-model="name"></p>
    <div id="editor1" ckeditor="options" ng-model="name"></div>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        CKEDITOR.replace('editor1', {
            toolbar: [
                { name: 'document', items: ['Print'] },
                { name: 'clipboard', items: ['Undo', 'Redo'] }
            ]
        });
        $scope.options = {
            language: "en",
            allowedContent: true,
            entities: false
        };
    });
</script>