AngularJS & CKEditor
•
1 like•3,814 views
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.
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
AngularJS & CKEditor
- 1. Editor de Texto com AngularJS & CKEditor Autor: Douglas Lira douglas.lira.web@gmail.com | angularjs-br@googlegroups.com Ajude a compartilhar conhecimento!!
- 2. 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!!
- 3. 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> <!-- MAIN --> <script src="js/App.js"></script> <!-- Directive --> <script src="js/directives/EditorDirective.js"></script> <!-- Controllers --> <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>
- 4. 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';
- 5. // 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!!