wangeditor图片上传回显

最新推荐文章于 2024-04-10 18:46:24 发布

前端小99

最新推荐文章于 2024-04-10 18:46:24 发布

阅读量2.4k

点赞数

分类专栏：插件的使用文章标签： javascript 开发语言 ecmascript 图片回显富文本

本文链接：https://blog.csdn.net/qq_41328247/article/details/121215042

版权

插件的使用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中集成WangEditor富文本编辑器，并利用VueDraggable组件实现图片拖拽上传功能。配置了编辑器的菜单项、图片上传设置，包括显示基础64编码、指定上传服务器、限制图片大小及类型。同时，展示了自定义上传图片的实现方式，通过axios发送POST请求并将返回的图片URL插入编辑器。

摘要由CSDN通过智能技术生成

import E from 'wangeditor'
import draggable from 'vuedraggable'

html
    <div class="editor" id="editor" >
        <p class="editorText" id="text" :value="this.url "></p>
     </div> 



data
 editor: '',
 editorContent: '',  回显的内容

   mounted() {
        this.editor = new E('#editor')
        // 默认情况下，显示所有菜单
        this.editor.config.onchange = html => {
            this.editorContent = html  // 回显内容
        }
        this.editor.config.uploadImgShowBase64 = true  // 转64
        this.editor.config.uploadImgServer = '/upload-img'  // 图片
        this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M // 大小
        this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
        this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
            // resultFiles 是 input 中选中的文件列表
            // insertImgFn 是获取图片 url 后，插入到编辑器的方法
            console.log(resultFiles[0])
            // 上传图片，返回结果，将图片插入到编辑器中
            // insertImgFn(imgUrl)
            let formData = new FormData()
            var instance = axios.create()
            formData.append('file', resultFiles[0])
            /**
             *背景图片上传
             * @params
             */
            instance({
                method: 'post',
                url: 'http://144.2.224.135:8763/litigationservice/uploadNews',
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                data: formData
            }).then(res => {         
                // this.fileUrl = res.data.data.fileUrl
                if (res.status === 200) {         
                  
                  let url = res.data.data.fileUrl  
                   console.log(url) 
                   insertImgFn(url)
                }
            })
        }      
        this.editor.config.menus = [
            'head',
            'bold',
            'fontSize',
            'fontName',
            'italic',
            'underline',
            'strikeThrough',
            'indent',
            'lineHeight',
            'foreColor',
            'backColor',
            'link',
            'list',
            'todo',
            'justify',
            'quote',
            'emoticon',
            'table',
            'code',
            'splitLine',
            'undo',
            'redo',
            'image',
            
        ],
    
        this.editor.create()
         // 富文本内容
       this.editor.txt.html(this.content)
    },