如何在角JS应用程序中使用ckeditor？ [英] How to use ckeditor in angular JS app?
问题描述
我是一个angularJS新手，我需要在应用中使用ckeditor作为textarea。
I'm an angularJS newbie and i need to use ckeditor for a textarea in my app.
在我尝试过角度应用之前，我已经做了一个仅html的网页。
我已经生成了我的ckeditor包此处并添加了所需的标签（如下所示），它的工作原理与一个魅力。
Before i've tried it on the angular app i've done a "html only" webpage. I've generated my ckeditor package here and added the needed tags (as below) and it works like a charm.
<!DOCTYPE HTML>
<html>
<head>
<title>CKEditor test page</title>
<meta charset="utf-8">
</head>
<body>
<script src='./ckeditor/ckeditor.js'></script>
<div>
<form>
<label>Text input</label>
<textarea name="text" id='editor1' class="ckeditor"></textarea>
<input type="submit" method="GET">
</form>
<script>
CKEDITOR.replace('editor1');
</script>
</div>
</body>
</html>
现在我正在尝试使用ckeditor作为其中一个tpl的单个文本区域views为我的角度项目，我不能得到它的工作:(
这是tpl.html视图的内容：
<script src='./ckeditor/ckeditor.js'></script>
<div class="container">
<div class="page-header">
<h2>Title</h2>
</div>
<form role="form" class="input_form">
<accordion>
<accordion-group heading="Add content" is-open="false">
<div class="form-group">
<label class="control-label">TEXT INPUT</label>
<textarea id='test' class="form-control" rows="3" ng-model="data.body"
placeholder="Write your text here!"/></textarea>
</div>
</accordion-group>
</accordion>
<div class="text-right">
<a ng-click="submitText()" class="btn btn-primary">Send text</a>
</div>
</form>
</div>
获取ckeditor与angularJS应用程序一起工作的最基本方法是什么？它可以安装这些指令吗？
http://github.com/esvit/ng-ckeditor
http://github.com/lemonde/angular-ckeditor
What is the most basic approach to get ckeditor working with an angularJS app? Could it be installing any of these directives? http://github.com/esvit/ng-ckeditor http://github.com/lemonde/angular-ckeditor
欢迎任何帮助：）
推荐答案
您可以像这样创建自己的指令：
You could create your own directive like so:
(function () {
'use strict';
angular
.module('app')
.directive('ckeditor', Directive);
function Directive($rootScope) {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModel) {
var editorOptions;
if (attr.ckeditor === 'minimal') {
// minimal editor
editorOptions = {
height: 100,
toolbar: [
{ name: 'basic', items: ['Bold', 'Italic', 'Underline'] },
{ name: 'links', items: ['Link', 'Unlink'] },
{ name: 'tools', items: ['Maximize'] },
{ name: 'document', items: ['Source'] },
],
removePlugins: 'elementspath',
resize_enabled: false
};
} else {
// regular editor
editorOptions = {
filebrowserImageUploadUrl: $rootScope.globals.apiUrl + '/upload',
removeButtons: 'About,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Save,CreateDiv,Language,BidiLtr,BidiRtl,Flash,Iframe,addFile,Styles',
extraPlugins: 'simpleuploads,imagesfromword'
};
}
// enable ckeditor
var ckeditor = element.ckeditor(editorOptions);
// update ngModel on change
ckeditor.editor.on('change', function () {
ngModel.$setViewValue(this.getData());
});
}
};
}
})();
并使用它：
and to use it:
<!-- regular wysiwyg editor -->
<textarea ng-model="vm.article.Body" ckeditor></textarea>
<!-- minimal wysiwyg editor -->
<textarea ng-model="vm.article.Body" ckeditor="minimal"></textarea>
这篇关于如何在角JS应用程序中使用ckeditor？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
