[英]TinyMCE not working inside my custom directive
我有一个讨论表。 因此在我的表单中有一个新的注释和编辑注释选项。 对于编辑注释,我创建了一个自定义指令以动态显示所有旧注释。
我在新的注释文本区域上实现了TinyMCE编辑器,并且在此处可以正常工作。
但是问题是,当我尝试将TinyMCE编辑器添加到编辑注释文本区域时,它在那儿不起作用。
这是我的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>
在Ctrl内部,我编写以下代码:-
$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>
这是我的讨论表的屏幕截图
任何想法?
这是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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.