Menu
I'm an angularJS newbie and i need to use ckeditor for a textarea in my app.
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>
Now i'm trying to use ckeditor for a single text area of one of the tpl "views" for my angular project and i can't get it work :( Here's the content of the tpl.html view:
<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>
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
Any help would be welcome :)
298
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
