IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> wangeditor:一个页面使用多个wangeditor编辑器,并对wangeditor进行组件封装以及上传图片到自己的服务器 -> 正文阅读

[开发工具]wangeditor:一个页面使用多个wangeditor编辑器,并对wangeditor进行组件封装以及上传图片到自己的服务器

wangeditor使用文档:https://www.kancloud.cn/wangfupeng/wangeditor3/332599
这里记录两个地方
1.如何在富文本编辑器中上传图片到自己的服务器
2.对富文本编辑器进行组件封装,并在一个页面使用多个编辑器
一、如何在富文本编辑器中上传图片到自己的服务器(只需要两步绝对可以解决问题)
①.首先,关闭网络上传接口

editor.config.showLinkImg = false;

②.完全的控制图片的上传过程,需要使用以下方法

// 自定义上传图片(根据服务端要求,我这里需要把文件流转换成base64格式,这个地方按照自己的接口要求调取接口就可以。)
                editor.config.customUploadImg = async (
                    files,
                    insertImgFn
                ) => {
                    // 调接口上传图片
                    let reader = new FileReader();
                    reader.readAsDataURL(files[0]);
                    reader.onload = function (e) {
                        console.log(e, 'e-------------------')
                        let base64String = e.target.result;
                        // 此处可对该base64进行获取赋值传入后端
                        console.log("bese64编码:", base64String);
                        imguploading1001({
                            breakdownId: '2c90a7247f6c936801815adac7600143',//故障id
                            imageType: '1',
                            imageBase64: base64String
                        }).then((res) => {
                            console.log(res.data.reportedImage, 'res==>> img upload')
                            this.bdimgurl = res.data.reportedImage.imageUrl
                            insertImgFn(this.bdimgurl)

                        })
                    }

                }

二、组件封装以及一个页面使用多个富文本编辑器
①、我们知道获取编辑器对象是通过ref来获取的,所以在父组件中使用子组件的时候。需要动态的把ref传递到子组件。

let editor = new wangEdit(this.$refs.ref1);

②、父传子
父组件:

<template>
    <div>
        <button type="button" @click="submit">提交</button>
        <div>
            <Edit :refmsg="ref1" ref="ref1"></Edit>
            <Edit :refmsg="ref2" ref="ref2"></Edit>
            <Edit :refmsg="ref3" ref="ref3"></Edit>
        </div>
    </div>

子组件:

<template>
    <div style="width: 100%;height: 500px">
        <div class="mo-wang-editor" :ref="refmsg" ></div>
    </div>
</template>

子组件用props接收后,在mounted钩子中获取wangeditor对象。调取自定义的上传接口,进行图片上传,并插入图片到编辑器中。
③、监听数据变化,给editor对象上添加value属性,并把当前值绑定上去。

//监听数据变化
            editor.config.onchange = (newHtml) => {
                this.$emit('change', newHtml);
                editor.config.value = newHtml
            };

④、在父组件中就可以拿到了
在这里插入图片描述
当点击提交时,通过refs获取子组件的vue对象,就能拿到我们刚刚绑定的值了,我这里一个页面使用了三个富文本组件。

 submit() {
            console.log(this.$refs.ref1.editor.config.value)
            console.log(this.$refs.ref2.editor.config.value)
            console.log(this.$refs.ref3.editor.config.value)
        },

在这里插入图片描述
⑤、拿到所有的值了,就可以定义字段给服务端传参了。

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-06-29 19:17:52  更:2022-06-29 19:18:07 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/14 15:17:03-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码