Question

我将拥有一个具有拖放功能的应用。此外，还可以将ckeditor放入其中。

如何创建ckeditor的新实例，我遇到的问题是所有实例都具有相同的＆＃34; ng-model＆＃34;。

我看到了一个答案＆＃34; ng-repeat＆＃34;这里： jsfiddle.net/TheSharpieOne/cPTr7/ 但我的应用程序没有这样的转发器。

谢谢

Answer 1

有类似的问题，不知道这是否可以帮助你，但解决了我的问题。

var app = angular.module('app', []);

app.directive('ckEditor', [function () {
    return {
        require: '?ngModel',
        link: function ($scope, elm, attr, ngModel) {

            var ck = CKEDITOR.replace(elm[0]);

            ck.on('pasteState', function () {
                $scope.$apply(function () {
                    ngModel.$setViewValue(ck.getData());
                });
            });

            ngModel.$render = function (value) {
                ck.setData(ngModel.$modelValue);
            };
        }
    };
}])

function myCtrl($scope){
    $scope.ckEditors = [];
    $scope.post = 0;
    $scope.addEditor = function(id){
        $scope.ckEditors.pop();
        $scope.post=id;
        var rand = ""+(Math.random() * 10000);
        $scope.ckEditors.push({value:rand});
    }
}

<script src="http://ckeditor.com/apps/ckeditor/4.2/ckeditor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="myCtrl">
    
<h3>Post1:</h3>
    <div ng-repeat="editor in ckEditors">
    <textarea ng-if="post==1" data-ng-model="editor.value" data-ck-editor></textarea>
    <br />
    </div>
    <button ng-click="addEditor(1)">New Editor</button>

<h3>Post2:</h3>
    <div ng-repeat="editor in ckEditors" >
    <textarea ng-if="post==2" data-ng-model="editor.value" data-ck-editor></textarea>
    <br />
    </div>
    <button ng-click="addEditor(2)">New Editor</button>

http://jsfiddle.net/PauloSegundo/mrLz8eba/

AngularJS ckEditor，多个实例

1 个答案: