将Redactor WYSIWYG集成在AngularJs指令中

前端之家收集整理的这篇文章主要介绍了将Redactor WYSIWYG集成在AngularJs指令中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图将美丽的所见即所得Redactor( http://imperavi.com/redactor/)整合到一个定制的AngularJS指令中.

Visualy它的工作,但我的自定义指令是不兼容的ng模型(我不明白为什么)

这是你如何使用我的指令:

  1. <wysiwyg ng-model="edited.comment" id="contactEditCom" content="{{content}}" required></wysiwyg>

这是指令码:

  1. var myApp = angular.module('myApp',[]);
  2. myApp.directive("wysiwyg",function(){
  3.  
  4. var linkFn = function(scope,el,attr,ngModel) {
  5.  
  6. scope.redactor = null;
  7.  
  8. scope.$watch('content',function(val) {
  9. if (val !== "")
  10. {
  11. scope.redactor = $("#" + attr.id).redactor({
  12. focus : false,callback: function(o) {
  13. o.setCode(val);
  14. $("#" + attr.id).keydown(function(){
  15. scope.$apply(read);
  16. });
  17. }
  18. });
  19. }
  20. });
  21.  
  22. function read() {
  23. var content = scope.redactor.getCode();
  24. console.log(content);
  25. if (ngModel.viewValue != content)
  26. {
  27. ngModel.$setViewValue(content);
  28. console.log(ngModel);
  29. }
  30. }
  31.  
  32. };
  33.  
  34. return {
  35. require: 'ngModel',link: linkFn,restrict: 'E',scope: {
  36. content: '@'
  37. },transclude: true
  38. };
  39. });

最后这是小提琴 – > http://fiddle.jshell.net/MyBoon/STLW5/

我根据Angular-UI的TinyMCE指令做了一个.这个也听格式按钮点击.当模型在指令之外更改时,它也处理这种情况.

directive.coffee(对不起,为coffeescript)

  1. angular.module("ui.directives").directive "uiRedactor",["ui.config",(uiConfig) ->
  2.  
  3. require: "ngModel"
  4. link: (scope,elm,attrs,ngModelCtrl) ->
  5. redactor = null
  6.  
  7. getVal = -> redactor?.getCode()
  8.  
  9. apply = ->
  10. ngModelCtrl.$pristine = false
  11. scope.$apply()
  12.  
  13. options =
  14. execCommandCallback: apply
  15. keydownCallback: apply
  16. keyupCallback: apply
  17.  
  18. scope.$watch getVal,(newVal) ->
  19. ngModelCtrl.$setViewValue newVal unless ngModelCtrl.$pristine
  20.  
  21.  
  22. #watch external model change
  23. ngModelCtrl.$render = ->
  24. redactor?.setCode(ngModelCtrl.$viewValue or '')
  25.  
  26. expression = if attrs.uiRedactor then scope.$eval(attrs.uiRedactor) else {}
  27.  
  28. angular.extend options,expression
  29.  
  30. setTimeout ->
  31. redactor = elm.redactor options
  32. ]

HTML

  1. <textarea ui-redactor='{minHeight: 500}' ng-model='content'></textarea>

猜你在找的Angularjs相关文章