element-tiptap富文本编辑器，上传本地图片

因为通过富文本编辑器上传本地图片，都会直接转成base64格式的，我们可以先上传到服务器，再从服务器返回的URL拿到给富文本框展示(引入我就不说了，直接看我上篇文章有说到过)

data () {// 编辑器的 extensions// 它们将会按照你声明的顺序被添加到菜单栏和气泡菜单中return {extensions: [new Image({// 默认会把图片生成 base64 字符串和内容存储在一起，如果需要自定义图片上传uploadRequest (file) {// 如果接口要求 Content-Type 是 multipart/form-data，则请求体必须使用 FormDataconst formdata = new FormData()//image是后台接口需要参数名formdata.append('file', file)//调用接口进行上传,拿到服务器返回的图片地址return fileUploadImage(formdata).then(res => {// 这个 return 是返回请求成功后拿到的url，赋值给富文本编辑器里面的img中的src属性return res.data})} // 图片的上传方法，返回一个 Promise<url>}), // 图片

还有接口那块代码

// 上传图片
export const fileUploadImage = data => request({url: API_URL.POST_UPLOAD_IMAGE, // path路径method: 'POST', // 请求方法headers: { // 请求头'Content-Type': 'multipart/form-data' // 上传文件所要求的格式formdata},data // 请求体
})

element-tiptap富文本编辑器，上传本地图片相关推荐

编辑器图片上传 linux,summernote 富文本编辑器上传本地图片
jQuery version: 1.12.4 Bootstrap version: 3.3.7 summernote 是基于jQuery 和 Bootstrap 的轻量级富文本编辑器所以在使用sum ...
解决TinyMCE富文本编辑器上传视频后在编辑区域内不能预览视频，被替换成img标签的问题
以前用百度的UE,代码陈旧,有很多定制化的需求改起来很费劲,后来发现国外有个一直在维护的TinyMCE编辑器,功能强大,便转跳到这个坑里了. 目前遇到的坑:富文本编辑器里上传了本地视频之后,会默认给替 ...
KindEditor富文本编辑器上传功能PHP语言报错问题
问题产生过程:项目原本使用的是Ueditor编辑器,由于其中js代码有使用parentNode获取HTML节点,IE浏览器内核不支持parentNode ,会有二次加载富文本编辑器不渲染的问题,所以更 ...
ueditor富文本编辑器上传视频/音频光标显示位置错误
用以下样式拼接视频/音频,路径换成所需路径: //拼接元素样式视频 video_html = `<p><video src='${data.url}' width="32 ...
关于富文本kindeditor中上传本地图片成功后获取到的图片路径是相对路径修改为绝对路径...
找到kindeditor插件kindeditor-all.js,找到urltype的设置, K.options = {designMode : true,fullscreenMode : false, ...
edui 富文本编辑_富文本编辑器wangEditor添加本地上传视频功能
最近做一个考试系统,编辑题目要用到富文本编辑,要求可以添加图片.视频和pdf.此前项目中用的都是wangEditor,使用的时候发现只可以上传本地图片,视频只能添加链接,找了其他插件,也没发现比较好用 ...
富文本框TinyMCE4.8上传本地图片基本配置（前端篇）
最近使用了一下TinyMCE富文本框,感觉是非常不错的一款,配置简单,界面优美,完全免费...推荐大家使用. 官方文档也比较容易阅读,大家有兴趣的可以自己去看看https://www.tiny.clo ...
element ui富文本编辑器的使用(quill-editor)
element ui富文本编辑器的使用(quill-editor) 文章目录 element ui富文本编辑器的使用(quill-editor) 效果展示:(可以上传图片及其视频) 第一步.首先安装富 ...
关于wangEditor5上传本地图片的详细配置
最近在写个人博客用到了富文本编辑器,这里用的是wangEditor5版本,但是浏览了官网并没有发现上传本地图片的详细配置,很是头疼,最终在官方的demo源码中找到了本地上传的详细配置,豁然开朗! co ...

element-tiptap富文本编辑器，上传本地图片

element-tiptap富文本编辑器，上传本地图片相关推荐

最新文章

热门文章