Question

我对Angularjs很陌生，我试图回显我在输入字段中输入的值，并希望它出现在下面的div标签中，其中cdkeditor id分配给它。没有id =＆＃34; editor1＆＃34;它似乎工作得很好。但是当我添加它时它不起作用。

<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中。因此，您必须在watch中调用函数CKEDITOR.instances.editor1.setData($scope.name);，以便为CKEditor设置新的输入值。这是fiddle示例。

<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>

NG-绑定=＆＃34;名称＆＃34;没有在ckeditor

3 个答案: