0简介

国产东西，看得懂，容易用，文档简单

1. 支持粗体、斜体、字体颜色、表情等等之类，比较常见的word编辑
2. 支持图片多张上传
3. 支持图片直接从粘贴Ctrl+V，就像你用微信截图那样，截图完了就能直接发，不用特意再存本地！
4. 图片上传直接自动转base64存数据（代码简单但不推荐，很快会压死你的数据库），也支持传服务器，也支持传七牛云等网盘
5. 支持视频iframe插入，很简单无脑的
6. 支持js、jquery、vue、react等bs模式。不支持狐表的CS模式，不是我不想支持，这富文本框从诞生就是给bs用的，很多js和css方法，压根无法拿到cs用。不要在cs里折腾富文本框，坑你坑到家，转BS吧
7. 必须ie10+或谷歌浏览器之类的现代浏览器
8. 富文本框非常多坑…非刚需别折腾…

官方体验地址：http://www.wangeditor.com/
官方手册：https://www.kancloud.cn/wangfupeng/wangeditor3/332599

1安装：

npm install wangeditor –save

2狐表接受图片代码

记得开异步。这里的代码是配合我之前发的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

3建立组件

下载封装好的组件

链接：https://pan.baidu.com/s/1E98m6ltCaBr2pEa_NnvKIQ
提取码：a6kw

4开始使用组件

在你的业务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好，可以搜索

5增加可选参数

在组件的props代码里，看到预留了几个接口

//高度案例<wEditor v-model="form.Content" :textHeight="'400px'" />COPY

//只读案例<wEditor v-model="form.Content" :readOnly="true" />COPY