最新公告
  • 欢迎您光临码巴巴,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • Vditor 富文本的文件/图片上传怎么去做|Vditor 富文本集成使用,以及上传

    1.新框架中使用到了富文本Vditor ,但是上传功能不能够使用,提示没有没有配置options.upload.url这个属性

    2.废话不多说,直接上代码(组件代码)

    <template>
      <div id="vditor" :contentValue="contentValue"></div>
    </template>
    
    <script>
    import Vditor from 'vditor'
    import 'vditor/dist/index.css'
    export default {
      name: 'NoticeVditor',
      props: {
        contentValue: {
          type: String,
          default: ''
        }
      },
      data () {
        return {
          // 内容编辑(富文本)
          contentEditor: ''
        }
      },
      mounted () {
        this.contentEditor = new Vditor('vditor', {
          value: this.contentValue ? this.contentValue : '',
          height: 360,
          width: 650,
          toolbarConfig: {
            pin: true
          },
            preview:{
                theme:{
                    path: `@components/vditor/dist/css/content-theme`
                }
            },
            toolbar: [
                "emoji",
                "headings",
                "bold",
                "italic",
                "strike",
                "link",
                "|",
                "list",
                "ordered-list",
                "check",
                "outdent",
                "indent",
                "|",
                "quote",
                "line",
                "code",
                "inline-code",
                "insert-before",
                "insert-after",
                "|",
                //"upload",
                 "record",
                { //自定义上传
                    hotkey: "",
                    name: "upload",
                    // tipPosition: "s",
                    tip: "上传图片/上传文件",
                    className: "right",
                },
    
                "table",
                "|",
                "undo",
                "redo",
                "|",
                 "fullscreen",
                "edit-mode",
                {
                    name: "more",
                    toolbar: [
                        //"both",
                        "code-theme",
                        "content-theme",
                        "export",
                        "outline",
                        "preview",
                        "devtools",
                         "info",
                        "help",
                    ],
                },
            ],
            //这里写上传
            upload: {
               // accept: 'image/jpg, image/jpeg, image/png',//规定上传的图片格式
                url: "/api/file/upload",//请求的接口
                multiple: false,
                fieldName: 'file',
                max: 2 * 1024 * 1024,//上传图片的大小
                headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }, //为 FormData 添加额外的参数
                linkToImgUrl: "/api/file/upload",//请求的接口
                filename (name) {
                    return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, "")
                        .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, "")
                        .replace("/\\s/g", "");
                },
                validate (files) {
                    const isLt2M = files[0].size / 1024 / 1024 < 2
                    if (!isLt2M) {
                        this.$message.error('"上传图片大小不能超过 10MB!"')
                    }
                },
                //上传图片回显处理
                format (files, responseText) {
                    var data = JSON.parse(responseText)
    
                    //上传图片请求状态
                    if (data.code == 200) {
                        let succ = {}
                        succ[data.data.name] =  data.data.url
                        console.log("上传文件之后:",files, data,succ);
                        //图片回显
                        return JSON.stringify({
                                msg:'',
                                code:0,
                                data:{
                                    errFiles: [],
                                    succMap: succ
                                }
                            });
                    } else {
    
                    }
    
                },
                error (msg) {
                    console.log(msg + "上传失败了")
                },
            },
            cache: {
            enable: false
          },
        })
    
          console.log("富文本",this.contentEditor);
    
      },
      created () {},
      methods: {
        clear () {
          this.contentEditor.setValue('')
          this.$emit('mounted')
        },
        setContent (value) {
          this.contentEditor.setValue(value)
        },
        getContent () {
          return this.contentEditor.getValue()
        },
        getHTML () {
            return this.contentEditor.getHTML();      //获取 HTML 内容
        },
        disabled () {
            return this.contentEditor.disabled();     //设置 只读
        },
      }
    }
    </script>
    

     

    3.使用代码:

    <notice-vditor ref="noticeVditor" @mounted="childrenMounted" :contentValue="form.content" />
    import NoticeVditor from './NoticeVditor'
    components: {
        NoticeVditor
      },

    4.取值

    this.form.content = this.$refs.noticeVditor.getContent()

     

    5.赋值

    this.$refs.noticeVditor.setContent(this.form.content)

     

    6.只读

    this.$refs.noticeVditor.disabled();

     

     

     

     

    1. 本站所有资源来源于用户上传和网络,如有侵权请及时联系站长!

    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!

    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!

    5. 如有链接无法下载、失效或广告,请联系管理员处理!

    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

    7. 如遇到加密压缩包,默认解压密码为"mababa.xin",如遇到无法解压的请联系管理员!


    码巴巴-优质代码创造者 » Vditor 富文本的文件/图片上传怎么去做|Vditor 富文本集成使用,以及上传

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    一个高级程序员模板开发平台
    问问管理员?

    发表评论

    • 27会员总数(位)
    • 71资源总数(个)
    • 2本周发布(个)
    • 0 今日发布(个)
    • 1038稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级