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中不起作用

回答

相關問題