test-angular.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>angular test</title>
  6. <style type="text/css">
  7. #editor-trigger {
  8. width: 100%;
  9. height: 200px;
  10. }
  11. </style>
  12. <link rel="stylesheet" type="text/css" href="../../dist/css/wangEditor.min.css">
  13. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  14. </head>
  15. <body>
  16. <div ng-app="editorContainer" ng-controller="editorCtrl">
  17. <p>wangEditor 集成到 angular 的示例</p>
  18. <div ng-model="text" contenteditable="true"></div>
  19. </div>
  20. <script type="text/javascript" src="../../dist/js/lib/jquery-1.10.2.min.js"></script>
  21. <script type="text/javascript" src="../../dist/js/wangEditor.js"></script>
  22. <script type="text/javascript">
  23. var app = angular.module('editorContainer', []);
  24. app.controller('editorCtrl', function ($scope) {
  25. $scope.editorContent = '';
  26. });
  27. app.directive('contenteditable', function() {
  28. return {
  29. restrict: 'A' ,
  30. require: '?ngModel',
  31. link: function(scope, element, attrs, ngModel) {
  32. // 初始化 编辑器内容
  33. if (!ngModel) {
  34. return;
  35. } // do nothing if no ng-model
  36. // Specify how UI should be updated
  37. ngModel.$render = function() {
  38. element.html(ngModel.$viewValue || '');
  39. };
  40. // Listen for change events to enable binding
  41. element.on('blur keyup change', function() {
  42. scope.$apply(readViewText);
  43. });
  44. // No need to initialize, AngularJS will initialize the text based on ng-model attribute
  45. // Write data to the model
  46. function readViewText() {
  47. var html = element.html();
  48. // When we clear the content editable the browser leaves a <br> behind
  49. // If strip-br attribute is provided then we strip this out
  50. if (attrs.stripBr && html === '<br>') {
  51. html = '';
  52. }
  53. ngModel.$setViewValue(html);
  54. }
  55. // 创建编辑器
  56. var editor = new wangEditor(element);
  57. editor.create();
  58. }
  59. };
  60. });
  61. </script>
  62. </body>
  63. </html>