【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接

简介: 【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接

前言:最近项目上需要使用富文本编辑器,觉得tinymce很不错就用了,具体怎么在项目中使用参考

【vue】 vue2 中使用 Tinymce 富文本编辑器

【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑

这两天又遇到了新的问题,图片上传后是看地址栏发现是base64的,就是下面这样的,

总体来说呢,这样也没有问题,毕竟图片显示了。但是多个图片上传就会导致响应体太大(后端响应太慢,优化时发现是base64图片太大),所以就想要直接放个链接回显,下面这样

如何实现?找了很多文章,参考了很长时间终于弄好了,总结一下。

简介与入门 \ 上传图片和文件

vue—tinymce粘贴图片【完美解决】

插件 \ paste 粘贴插件

gitee-wpspaster

tinymce 实现 粘贴图片自动上传

下面具体操作:

我就基于我之前使用tinymce基础上修改了,

第一步:配置粘贴【paste】具体配置项

tinymce.init({
  selector: '#tinydemo',
  plugins: 'paste',
  toolbar: 'paste',
  paste_data_images: true // 默认是false的,记得要改为true才能粘贴
})

第二步:配置图片上传函数

images_upload_handler: (blobInfo, success, failure) => {
  var xhr, formData;
  var file = blobInfo.blob(); //转化为易于理解的file对象
  xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  // 图片上传路由
  xhr.open("POST", process.env.VUE_APP_BASE_API + "/common/upload");
  xhr.onload = () => {
    var json;
    if (xhr.status != 200) {
      // failure("上传失败: " + xhr.status);
      return;
    }
    json = JSON.parse(xhr.responseText);
    // json是后端返回的数据,其中就包含链接
    if (!json || typeof json.location != "string") {
      // failFun("上传成功:");
      // succFun(json.url);
      success(process.env.VUE_APP_BASE_API + json.fileName);
      return;
    }
  };
  formData = new FormData();
  formData.append("file", file, file.name); //此处与源文档不一样
  xhr.setRequestHeader("Authorization", "Bearer " + getToken());
  xhr.send(formData);
},

下面这段代码是完成系统验证的,可以根据项目调整,不需要可以不加

xhr.setRequestHeader("Authorization", "Bearer " + getToken());

至此,图片渲染就是链接形式了。

目录
相关文章
|
5月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
113 0
|
4月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
4月前
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
4月前
|
小程序 API 容器
ProFlow 流程编辑器框架问题之查看ProFlow的开源地址和官网链接如何解决
ProFlow 流程编辑器框架问题之查看ProFlow的开源地址和官网链接如何解决
129 0
|
5月前
|
JavaScript
【vue】 vue2 中使用 Tinymce 富文本编辑器
【vue】 vue2 中使用 Tinymce 富文本编辑器
646 6
|
5月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
5月前
|
JavaScript 前端开发
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
341 0
|
5月前
|
SQL JavaScript
vue 代码编辑器 vue-codemirror
vue 代码编辑器 vue-codemirror
76 0
|
5月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
6月前
|
开发工具
Vim 编辑器:高效文本编辑的瑞士军刀
**Vim 概览:** Vim 是一个功能丰富的文本编辑器,以其高度可定制性著称。文章介绍了 Vim 的高效使用技巧,包括快捷打开文件、命令行模式下的常用命令、查找与替换、删除和复制文本。还讨论了配置 `.vimrc` 文件以自定义设置,如改变 leader 键、设置缩进和高亮,并展示了安装插件如 vim-airline 和 vim-snazzy 的方法。通过这些技巧,用户能提升 Vim 使用效率。
76 5