国产东西,看得懂,容易用,文档简单
官方体验地址:http://www.wangeditor.com/
官方手册:https://www.kancloud.cn/wangfupeng/wangeditor3/332599
npm install wangeditor –save
记得开异步。这里的代码是配合我之前发的d2admin连着用,并不能无脑拷贝,或者你要自己看懂,自己改造
方法名称:UploadPic
代码:
Dim e As RequestEventArgs = args(0)'事件代码--- If Functions.Execute("CheckAuths",e,{1}) =False Then Functions.Execute("Result_ErrorStr",e,"权限不足") Return "" End If '前端文件是自动上传,所以其实每次只有一个文件会提交Dim hzs As new List(of String) hzs.Add(".jpg") hzs.Add(".bmp") hzs.Add(".gif") hzs.Add(".png") Dim jo As new JObject For Each key As String In e.Files.Keys For Each fln As String In e.Files(key) Dim fileName As String = fln.SubString(0,fln.LastIndexOf(".")) '获取文件名部分,例如 aaa Dim hz As String = fln.SubString(fln.LastIndexOf(".")) '后缀名,例如.jpg Dim saveDir As String = e.Values("saveDir") '例如 商品档案表\5 Dim randID As String = Guid.NewGuid.ToString() '随机码,用于保存目录防止被猜路径 If hzs.Contains(hz) Then Dim MaxSm As Decimal = 2000 '后端限制2000m以下的文件 Dim sm As Decimal = Val(e.Headers("Content-Length"))/1024/1024 If sm <MaxSm Then e.SaveFile(key, fln, ProjectPath & "Api\Upload\" & saveDir & "\" & randID & "\" & fileName & hz) jo("uid") = randID jo("status") = "success" jo("name") = fln jo("url") = CStr(Functions.Execute("GetDownloadUrl",e,"Upload/" & saveDir & "/" & randID & "/" & fileName & hz)) Functions.Execute("Result_SuccJson",e,jo) Else Functions.Execute("Result_ErrorStr",e,"文件不能大于 " & MaxSm & " M" ) End If Else Functions.Execute("Result_ErrorStr",e,"文件类型错误") End If Next Next e.Handled = TrueCOPY
下载封装好的组件
链接:https://pan.baidu.com/s/1E98m6ltCaBr2pEa_NnvKIQ
提取码:a6kw
在你的业务vue页面里,
//js里import wEditor from '@/components/wangEditor/wangEditor.vue'COPY
//html 编辑状态 <wEditor v-model="form.Content" :saveDir="公告内容"/>只读状态 <wEditor v-model="form.Content" :readOnly="true"/>COPY
效果:
服务器接收的文件效果:
推荐狐表里存富文本框的字段,去sql改nvarchar(Max),比nText好,可以搜索
在组件的props代码里,看到预留了几个接口
参数名 | 类型 | 作用 | 参考案例 |
---|---|---|---|
readOnly | Boolean | 是否只读,默认false | :readOnly="true" |
uploadImgMaxSize | Number | 最大图片尺寸MB,默认1m | :uploadImgMaxSize="1" |
uploadImgMaxLength | Number | 最多一次上传图片数量,默认6张,写999就会显示不限制 | :uploadImgMaxLength="1" |
textHeight | String | 文本框高度,默认300px | :textHeight="'400px'" |
saveDIr | String | 图片上传路径,默认 未分类文件富文本框 | :saveDir="'公告内容'" |
//高度案例<wEditor v-model="form.Content" :textHeight="'400px'" />COPY
//只读案例<wEditor v-model="form.Content" :readOnly="true" />COPY