AngularJS & CKEditor

Editor de Texto
com
AngularJS &
CKEditor
Autor: Douglas Lira
douglas.lira.web@gmail.com | angularjs-br@googlegroups.com
Ajude a compartilhar conhecimento!!

1 – A idéia
Integrar um plugin para edição de texto que realmente funcione
com AngularJS. Escolhi o CKEditor porque achei simples, bastante
amigável e fácil implementação. Testei outros, mas o resultado final não
me agradou.
2 – Ferramentas
AngularJS - http://angularjs.org/
CKEditor - http://ckeditor.com/
3 – Mão na massa!!

1 – Arquivo Index – index.html
<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>HTML EDITOR - AngularJS by Douglas Lira</title>
<style type="text/css">
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/ckeditor.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>

<script src="js/App.js"></script>

<script src="js/directives/EditorDirective.js"></script>

<script src="js/controllers/EditorController.js"></script>
</head>
<body ng-controller="EditorController">
<h2>Editor de Texto com AngularJS + CKEditor</h2>
<textarea ckedit="descricao"></textarea>
<hr>
<pre>{{descricao}}</pre>
</body>
</html>

2 – Arquivo App – js/App.js
$app = angular.module('App',[]);
3 – Arquivo EditorController – js/controllers/EditorController.ks
'use strict';
$app.controller('EditorController', function EditorController($scope) {
$scope.descricao = '<h1>Olá mundo!!</h1>';
$scope.change = function() {
$scope.descricao = '<h2>Changed</h2>';
};
});
4 – Arquivo EditorDirective – js/directives/EditorDirective.js
"use strict";
$app.directive('ckedit', function ($parse) {
CKEDITOR.disableAutoInline = true;
var contador = 0,
prefix = '__htmlEDITOR_';
return {
restrict: 'A',
link: function (scope, element, attrs, controller) {
var gets = $parse(attrs.ckedit), sets = gets.assign;
attrs.$set('contenteditable', true);
if (!attrs.id) {
attrs.$set('id', prefix + (++contador));
}
var options = {};
options.on = {
blur: function (e) {
if (e.editor.checkDirty()) {
var ckValue = e.editor.getData();
scope.$apply(function () {
sets(scope, ckValue);
});
ckValue = null;
e.editor.resetDirty();
}
}
};
options.extraPlugins = 'sourcedialog';
options.removePlugins = 'sourcearea';

// Inicializando o Plugin
var editorTextoAngular = CKEDITOR.replace(element[0], options);
scope.$watch(attrs.ckedit, function (value) {
editorTextoAngular.setData(value);
});
}
}
});
Vamos lá... Como pudem observar essa directive é o segredo!!. A única coisa que fiz foi
implementar o evento onBlur atualizar o ng-model {{descrição}} atraves do atributo “ckedit”.
Espero que tenham gostado, até a próxima e um forte abraço a todos!!

AngularJS & CKEditor

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

AngularJS & CKEditor