ng-bind = "name" не работает внутри ckeditor

Я довольно новичок в Angularjs, и я пытаюсь повторить значение, которое я ввожу в поле ввода, и ожидать, что оно появится в нижнем теге div, где идентификатор cdkeditor, назначенный ему. Кажется, что он отлично работает без 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: Итак, в этом случае вы можете конкатрировать текст Hello в переменную $ scope.name при вызове функции setData внутри чата или вы можете начать свой ввод с помощью Hello, если вы не хотите concat. Надеюсь, это поможет вам. –

Для динамического связывания данных в поле редактора используйте комбинацию ckEditor с угловым js.

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

Посмотрите в документации нг-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

ответ

Смежные вопросы