Question

我有一个讨论表。所以我的表单中有一个新的评论和编辑评论选项。对于编辑评论，我创建了一个自定义指令来动态显示所有旧评论。

我在新评论textarea上实施了TinyMCE编辑器，并在那里工作正常。

但问题是，当我尝试将TinyMCE编辑器添加到编辑注释textarea时，它就不能在那里工作了。

这是我的discussion.html文件代码

<div class="post-commnets" ng-controller="discussionCtrl">
            <div class="comment-box" data-ng-repeat="discussionComment in comment.userComments">
               <bh-edit-comment bh-group-alternate-id="groupAlternateId" bh-checkmember="{{checkMember}}" bh-current-user-id="{{currentUserEmail}}" bh-comment="discussionComment" bh-comment-text="{{discussionComment.content}}" bh-index="$index" bh-group-alternate-id="groupAlternateId" bh-display-edit="true" bh-text-box-css="'colonySetEdit'" bh-comment-css="'categorylabel'"></bh-edit--comment>
                 </div>
             </div>
        <form class="comment-form" name="newconversation">
              <div class="formRow"><textarea ui-tinymce="tinyMceOptions" data-ng-model="comment.commentText" ></textarea></div>                                                    
       <div class="btn-box">
        <a class="btn btn-custom" href="#" data-ng-click="saveComment()">Publish</a>
            </div>
</form>

在discussionCtrl中我写下面的代码： -

$scope.tinymceOptions = {
    plugins: 'link image code',
    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
  };

这是我的指令模板

<div class="row" >
    <div class="col-md-11 forDrop">
        <div class="post_user"><a ng-href="/user/profile/view/{{comment.email_id}}"><img src="
        <a ng-href="">{{comment.firstname}} {{comment.name}}</a>
        </div>
            <div data-ng-if="comment.show" ><textarea id="focus{{comment.id}}" ng-class="{{textBoxCss}}"   ng-class="edit-user-comment" ui-tinymce="tinymceOptions" data-ng-model="editComment.content"></textarea></div>
        <p data-ng-hide="comment.show" ng-bind-html="comment.content"></p>
        <p class="created-date">{{changeDateFormat(comment.created_at)}}</p>
        </div>
    <div class="col-md-1 actions" data-ng-if="checkmember==1 || currentUserId == comment.email_id">
        <a href="" class="done secondry" ng-class="{'done secondry':!displayEdit}" data-ng-mousedown="updateCommentContent(comment.id,comment.content)"></a>
          <a href="" ng-attr-title="{{'Edit'}}" class="penEdit primery" data-ng-mousedown="clickToUpdateComment(comment.content)"></a>  
    </div>
</div>

这是我的自定义指令。

groupProfile.directive("bhEditComment", ["$rootScope", "$cookies", "$location", "$timeout", "groupFactory", "userFactory", function ($rootScope, $cookies, $location, $timeout, groupFactory, userFactory) {
        var obj = {
            restrict: 'E',
            scope: {
                'content': '@bhCommentText',
                'comment': '=bhComment',
                'checkmember': '@bhCheckmember',
                'currentUserId': '@bhCurrentUserId',
                'index': '=bhIndex',
                'displayEdit': '=bhDisplayEdit',
                'commentCss': '@bhcommentCss',
                'textBoxCss': '@bhTextBoxCss',
                groupAlternateId: '=bhGroupAlternateId',
            },
            replace: true,
            templateUrl: '/group/user/edit/comment/template',
            link: function (scope, element, attrs) {
                scope.editComment = {
                    content: scope.content
                };
                var unbindWatcher = undefined;
                scope.clickToUpdateComment = function (index) {
                scope.tinyMCeInit();
                    scope.comment.show = true;
                    unbindWatcher = scope.$watch('content', function (value) {
                        scope.editComment.content = value;
                    });

                };

                scope.tinyMCeInit  = function () {
                    scope.tinymceOptions = {
                            plugins: 'link image code',
                            toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
                          };
                }

                scope.updateCommentContent = function (commentId, commentText) {
                    var flag = 0;
                    var newCommentText = scope.editComment.content;
                    if (newCommentText !== undefined && newCommentText !== '') {
                        if (commentText !== newCommentText) {
                            if (typeof unbindWatcher === "function") {
                                unbindWatcher();
                            }

                            groupFactory.editComment({
                                content: newCommentText,
                                commentId: commentId,
                                groupAlternateId: scope.groupAlternateId
                            }).then(function (data) {
                                scope.comment.show = false;
                                scope.comment.content = newCommentText;
                            }, function (err) {
                                scope.comment.show = false;
                            });


                        } else {
                            scope.comment.show = false;
                        }
                    } else {
                        scope.comment.show = false;
                        return;
                    }
                };


                scope.changeDateFormat = function (commentDate) {
                    var date = new Date(commentDate);
                    var monthNames = ["January", "February", "March", "April", "May", "June",
                        "July", "August", "September", "October", "November", "December"
                    ];
                    var month = monthNames[date.getMonth()];
                    var day = date.getDate();
                    var hours = date.getHours();
                    var minutes = date.getMinutes();
                    var ampm = hours >= 12 ? 'pm' : 'am';
                    hours = hours % 12;
                    hours = hours ? hours : 12; // the hour '0' should be '12'
                    minutes = minutes < 10 ? '0' + minutes : minutes;
                    var strTime = hours + ':' + minutes + ' ' + ampm;
                    return day + ' ' + month + ' at ' + strTime;
                }
            }
        }
        return obj;
    }]);

如果我尝试在指令之前添加textarea，那么它适用于我（在同一控制器中工作）但在指令内部无效。

<div class="post-commnets" ng-controller="discussionCtrl">
            <div class="comment-box" data-ng-repeat="discussionComment in comment.userComments">
  <textarea ui-tinymce name="description" placeholder="What's on your mind?" data-ng-model="discussionComment.content"></textarea>
               <bh-edit-comment bh-group-alternate-id="groupAlternateId" bh-checkmember="{{checkMember}}" bh-current-user-id="{{currentUserEmail}}" bh-comment="discussionComment" bh-comment-text="{{discussionComment.content}}" bh-index="$index" bh-group-alternate-id="groupAlternateId" bh-display-edit="true" bh-text-box-css="'colonySetEdit'" bh-comment-css="'categorylabel'"></bh-edit--comment>
                 </div>
             </div>
        <form class="comment-form" name="newconversation">
              <div class="formRow"><textarea ui-tinymce="tinyMceOptions" data-ng-model="comment.commentText" ></textarea></div>                                                    
       <div class="btn-box">
        <a class="btn btn-custom" href="#" data-ng-click="saveComment()">Publish</a>
            </div>
</form>

以下是我的讨论表格的截图

任何想法？

Answer 1

以下是 tinymce 指令的工作片段： -

var app = angular.module("myApp", ['ui.tinymce']);
app.controller("myCtrl", function($scope) {
  
});

app.directive("bhEditComment", ["$rootScope", "$location", "$timeout", function($rootScope, $location, $timeout) {
  var obj = {
    restrict: 'E',
    replace: true,
    templateUrl: "foo.html",
    link: function(scope, element, attrs) {

    }
  }
  return obj;
}]);

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.5/angular.min.js"></script>
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tinymce/0.0.19/tinymce.min.js"></script>
<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <bh-edit-comment></bh-edit-comment>
    <script type="text/ng-template" id="foo.html">
      <textarea ui-tinymce ng-model="demo.tinymce"></textarea>
    </script>
  </div>

TinyMCE无法在我的自定义指令中工作

1 个答案: