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)
这里只写一个定义即可。
关键点已加红字。
最新文章
- 材价看板(1)- 如何建立你的第一个kanban,看看这些暴露的问题你们有没有?
- 手写控件,frame,center和bounds属性
- VTK初学一,a Mesh from vtkImageData—球冠
- php curl 伪造IP来源的代码分享
- 【leetcode】Dungeon Game (middle)
- Oracle- PL/SQL DEV的远程配置
- android ioctl fuzz,android 本地提权漏洞 android root
- 文本变语音引擎 ekho
- 光场相机重聚焦之三——Matlab光场工具包使用、重聚焦及多视角效果展示
- webpack loader加载器
- ubuntu终端执行shell脚本报command not found解决方法
- java中的@Override标签
- C语言第三次博客作业---单层循环结构
- Centos7 二进制安装 Kubernetes 1.13
- mongodb 笔记
- 大数据入门到精通19--mysql 数据导入到hive数据中
- LINQ to SQL 模拟实现 ROW_NUMBER() OVER(ORDER BY ...) 的功能
- 洛谷.4234.最小差值生成树(LCT)
- 给新创建的用户 赋予所有的权利 *.* 查看权限 删除用户 ---------DCL用户权限管理篇
- PAT 乙级 1071 小赌怡情(15 分)
热门文章
- Linux下date常用格式化输出
- DBA_SEGMENTS - 查看数据库对象所分配的物理存储空间
- iOS开发学习 阶段过程简述
- [Linux] ubuntu 格式化u盘
- 科研不是比赛,而是一种对未知和完美的自我追求——跟邢波(Eric Xing)面对面聊科研
- SpringMVC学习记录(七)--拦截器的使用
- http://www.cnblogs.com/shortboy/p/4429368.html
- Python数据整合与数据准备-BigGorilla实例应用
- Oracle database wrc运行报错ORA-15557
- Java8 CompletableFuture组合式的编程(笔记)