abp 中wangEditor-angular 的使用

主要是上传图片的配置。

(function () {
if (typeof angular === 'undefined') {
return;
}

angular.module('editorContainer', [])
//.constant('uiBsEditor', { uiEditor: {} })
.directive('contenteditable', function () {
return {
restrict: 'A',
//scope:true,
//scope: { 'id': '&id' },
require: 'ngModel',
link: function ($scope, element, attrs, ctrl) {
// 创建编辑器
//scope = $scope;
var editor = new wangEditor(element);

//1.改名很重要，因为files不改的话，会报告参数不一样
editor.config.uploadImgFileName = "files";

//2.上传路径
editor.config.uploadImgUrl = attrs.upimageurl|| ''; //$scope.vm.editer.upimageurl;// '/fileupload/postimage';

// editor.config.uploadHeaders = attrs.token || '';

//3.防XSRF
if (attrs.token) {
editor.config.uploadHeaders = {
'X-XSRF-TOKEN': attrs.token 
};
}

 

//editor.config.customUpload = true; // 配置自定义上传的开关
//editor.config.customUploadInit = $scope.vm.uploadFiles; // 配置上传事件，uploadInit方法已经在上面定义了
editor.config.hideLinkImg = true;
editor.config.menus = [
'source',
'|',
'bold',
'underline',
'italic',
'strikethrough',
'eraser',
'forecolor',
'bgcolor',
'|',
'quote',
'fontfamily',
'fontsize',
'head',
'unorderlist',
'orderlist',
'alignleft',
'aligncenter',
'alignright',
'|',
'link',
'unlink',
'table',
'emotion',
'|',
'img',
'video',
'|',
'undo',
'redo',
'fullscreen'
];

ctrl.$render = function () {
element.html(ctrl.$viewValue || '');
};

editor.onchange = function () {
// 从 onchange 函数中更新数据
$scope.$apply(function () {
var html = editor.$txt.html();
ctrl.$setViewValue(html);
});
};

editor.create();

$scope.$on('$destroy', function () {

editor.destroy();
delete editor;
});
}
};
});
})();

 

前台html

<div ng-model="vm.internalclassinfo.classInfo" upimageurl="{{vm.uploadurl}}" token="{{vm.token}}" contenteditable="true" style="height:350px;"></div>

 

前台js

vm.uploadurl = abp.appPath + "FileUpload/Upload2?uptype=cmsimage";
vm.token = abp.security.antiForgery.getToken();

 

后台

public string Upload2(IEnumerable<HttpPostedFileBase> files)

这里只写一个定义即可。

 

关键点已加红字。