[英]Ckeditor angular directive doesn't work
我使用下面的代码使用angularjs指令显示ckeditor。 但它不会显示在第th页中。
指令:
'use strict';
define('ngCkeditor', ['app'], function (app) {
app.directive('ngCkeditor', function () {
return {
restrict: 'AC',
require: 'ngModel',
link: function (scope, element, attr, ngModel) {
debugger;
var ck = CKEDITOR.replace(element[0]);
if (!ngModel) return;
ck.on('pasteState', function () {
scope.$apply(function () {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function (value) {
ck.setData(ngModel.$viewValue);
};
}
};
});
});
和控制器:
define('ckEditorController', ['app', 'ckeditor', 'ckfinder', 'ngCkeditor'], function (app, ckeditor, ckfinder, ngCkeditor) {
app.lazy.controller('ckEditorController', ['$scope', '$location', function ($scope, $location) {
debugger;
$scope.text = 'this is test';
}]);
});
这是HTML:
<link href="~/app/lib/editor/css/bootstrap.css" rel="stylesheet" />
<link href="~/app/lib/editor/ng-ckeditor.css" rel="stylesheet" />
<h2>CkEditor</h2>
<form name="frm">
<div ng-controller="ckEditorController">
<textarea class="ng-Ckeditor" ng-model="text"></textarea>
<textarea ng-ckeditor ng-model="text"></textarea>
<h3>Result HTML:</h3>
<div ng-bind-html-unsafe="text"></div>
</div>
在我看来,指令中的链接部分不会触发。
谢谢
更新:
看看jsfiddle链接。 它就像一种魅力。 但是我没有
您应该使用正确的指令名称:
<textarea ng-ckeditor ng-model="text"></textarea>
注意,由于camelCase到蛇格转换,casengCkeditor‛指令名称对应于ng-ckeditor‛规范化形式。
在我提供详细说明的地方查看此答案。 https://stackoverflow.com/a/33460305/949476
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.