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

我对Angularjs来说很新颖，我试图回显我在输入字段中输入的值，并期望出现在下面的div标签中cdkeditor ID分配给它。它似乎没有id =“editor1”正常工作，但它添加时不起作用。ng-bind =“name”在ckeditor中不起作用

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

来源

2016-12-28 user2672112

你所想要做的是不平凡的。编辑器不会自行编译角度指令。为什么你需要它首先包含角度指令？ – charlietfl

尝试下面的代码，您将获得输入值到CKEditor。您可以随时注意您的输入范围变量，并且只要您的输入值发生变化，就会将该文本显示在CKEditor中。因此，您必须调用功能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>

来源

2016-12-28 06:04:26

谢谢Ashish，但是这个替换了“Hello”文本。我希望它增加。 – user2672112

@ user2672112：那么，在这种情况下，您可以在监视内部调用setData函数时将Hello文本连接到$ scope.name变量，或者如果您不想连接，可以用Hello打开输入。希望它能帮助你。 –

对于编辑器字段中数据的动态绑定，请使用ckEditor与角度js的组合。

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

采取NG-的CKEditor的文件中看看。

来源

2016-12-28 06:28:09 Manikandan

必须使用角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>

来源

2016-12-28 07:32:29

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

回答

相关问题