Your SlideShare is downloading. ×
Editor de Texto
com
AngularJS &
CKEditor
Autor: Douglas Lira
douglas.lira.web@gmail.com | angularjs-br@googlegroups.com
Aj...
1 – A idéia
Integrar um plugin para edição de texto que realmente funcione
com AngularJS. Escolhi o CKEditor porque achei ...
1 – Arquivo Index – index.html
<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>HTML EDITOR - Angu...
2 – Arquivo App – js/App.js
$app = angular.module('App',[]);
3 – Arquivo EditorController – js/controllers/EditorControlle...
// Inicializando o Plugin
var editorTextoAngular = CKEDITOR.replace(element[0], options);
scope.$watch(attrs.ckedit, funct...
Upcoming SlideShare
Loading in...5
×

AngularJS & CKEditor

2,186

Published on

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.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,186
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "AngularJS & CKEditor"

  1. 1. Editor de Texto com AngularJS & CKEditor Autor: Douglas Lira douglas.lira.web@gmail.com | angularjs-br@googlegroups.com Ajude a compartilhar conhecimento!!
  2. 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. 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. 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. 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!!

×