在AngularJs指令中集成Redactor WYSIWYG

Question

我尝试在自定义的AngularJS指令中集成漂亮的所见即所得Redactor (http://imperavi.com/redactor/)。

Visualy它可以工作，但我的自定义指令与ng-model不兼容(我不知道为什么)

您可以这样使用我的指令：

<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/

Answer 1

我根据Angular-UI的TinyMCE指令创建了一个。它还能监听格式按钮的点击。它还处理在指令之外更改模型的情况。

directive.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>

Answer 2

更新- Rails 4.2 - Angular-Rails 1.3.14

好了，伙计们，在经过大量的研究和其他成员对堆栈溢出的帮助后，这里有一个解决方案，它直接提供给控制器$scope和应用于文本区域的ng-model：

**渲染原始HTML**

# Filter for raw HTML
app.filter "unsafe", ['$sce', ($sce) ->
    (htmlCode) ->
        $sce.trustAsHtml htmlCode
]

Credit for Filter

指令：

# For Redactor WYSIWYG
app.directive "redactor", ->
require: "?ngModel"
link: ($scope, elem, attrs, controller) ->
    controller.$render = ->
        elem.redactor
            changeCallback: (value) ->
                $scope.$apply controller.$setViewValue value
            buttons: ['html', '|', 'formatting', '|',
                'fontcolor', 'backcolor', '|', 'image', 'video', '|',
                'alignleft', 'aligncenter', 'alignright', 'justify', '|',
                'bold', 'italic', 'deleted', 'underline', '|',
                'unorderedlist', 'orderedlist', 'outdent', 'indent', '|',
                'table', 'link', 'horizontalrule', '|']
            imageUpload: '/modules/imageUpload'
        elem.redactor 'insert.set', controller.$viewValue

Last line update reason

HTML视图中的：

<div ng-controller="PostCtrl">  
    <form ng-submit="addPost()">
        <textarea ng-model="newPost.content" redactor required></textarea>
        <br />
        <input type="submit" value="add post">
    </form>

    {{newPost.content}} <!-- This outputs the raw html with tags -->
    <br />
    <div ng-bind-html="newPost.content | unsafe"></div> <!-- This outputs the html -->
</div>

和控制器：

$scope.addPost = ->     
    post = Post.save($scope.newPost)
    console.log post
    $scope.posts.unshift post
    $scope.newPost.content = "<p>Add a new post...</p>"

为了防止带有redactor的TypeError在操作被调用之前将值填充到文本区域中，这对我来说最好的做法是保留格式：

# Set the values of Reactor to prevent error
    $scope.newPost = {content: '<p>Add a new post...</p>'}

如果你遇到CSRF错误，这将会解决这个问题：

# Fixes CSRF Error OR: https://github.com/xrd/ng-rails-csrf
app.config ["$httpProvider", (provider) ->
    provider.defaults.headers.common['X-CSRF-Token'] = angular.element('meta[name=csrf-token]').attr('content')

]

非常感谢：AngularJS & Redactor Plugin

最后……

如果您正在使用ng-repeat创建这些编校者文本区域，并且在访问作用域时遇到问题，请查看以下答案：Accessing the model inside a ng-repeat

Answer 3

看看这个fiddle是不是您想要的。

ng-model可以设置为content：

<wysiwyg ng-model="content" required></wysiwyg>

在链接函数中，el已经设置为定义指令的元素，因此不需要id。并且el已经是一个包装的jQuery元素。

链接功能：

var linkFn = function (scope, el, attr, ngModel) {
    scope.redactor = el.redactor({
        focus: false,
        callback: function (o) {
            o.setCode(scope.content);
            el.keydown(function () {
                console.log(o.getCode());
                scope.$apply(ngModel.$setViewValue(o.getCode()));