我试图将美丽的所见即所得Redactor(
http://imperavi.com/redactor/)整合到一个定制的AngularJS指令中.
Visualy它的工作,但我的自定义指令是不兼容的ng模型(我不明白为什么)
这是你如何使用我的指令：
<wysiwyg ng-model="edited.comment" id="contactEditCom" content="{{content}}" required></wysiwyg>
这是指令码：
var myApp = angular.module('myApp',[]);
myApp.directive("wysiwyg",function(){
var linkFn = function(scope,el,attr,ngModel) {
scope.redactor = null;
scope.$watch('content',function(val) {
if (val !== "")
{
scope.redactor = $("#" + attr.id).redactor({
focus : false,callback: function(o) {
o.setCode(val);
$("#" + attr.id).keydown(function(){
scope.$apply(read);
});
}
});
}
});
function read() {
var content = scope.redactor.getCode();
console.log(content);
if (ngModel.viewValue != content)
{
ngModel.$setViewValue(content);
console.log(ngModel);
}
}
};
return {
require: 'ngModel',link: linkFn,restrict: 'E',scope: {
content: '@'
},transclude: true
};
});
最后这是小提琴 – > http://fiddle.jshell.net/MyBoon/STLW5/
我根据Angular-UI的TinyMCE指令做了一个.这个也听格式按钮点击.当模型在指令之外更改时,它也处理这种情况.
原文链接：https://www.f2er.com/angularjs/140858.htmldirective.coffee(对不起,为coffeescript)
angular.module("ui.directives").directive "uiRedactor",["ui.config",(uiConfig) ->
require: "ngModel"
link: (scope,elm,attrs,ngModelCtrl) ->
redactor = null
getVal = -> redactor?.getCode()
apply = ->
ngModelCtrl.$pristine = false
scope.$apply()
options =
execCommandCallback: apply
keydownCallback: apply
keyupCallback: apply
scope.$watch getVal,(newVal) ->
ngModelCtrl.$setViewValue newVal unless ngModelCtrl.$pristine
#watch external model change
ngModelCtrl.$render = ->
redactor?.setCode(ngModelCtrl.$viewValue or '')
expression = if attrs.uiRedactor then scope.$eval(attrs.uiRedactor) else {}
angular.extend options,expression
setTimeout ->
redactor = elm.redactor options
]
HTML
<textarea ui-redactor='{minHeight: 500}' ng-model='content'></textarea>
