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

这篇具有很好参考价值的文章主要介绍了【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:最近项目上需要使用富文本编辑器,觉得tinymce很不错就用了,具体怎么在项目中使用参考
【vue】 vue2 中使用 Tinymce 富文本编辑器
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑

这两天又遇到了新的问题,图片上传后是看地址栏发现是base64的,就是下面这样的,
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接,vue2,前端,vue.js,前端,javascript
总体来说呢,这样也没有问题,毕竟图片显示了。但是多个图片上传就会导致响应体太大(后端响应太慢,优化时发现是base64图片太大),所以就想要直接放个链接回显,下面这样

【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接,vue2,前端,vue.js,前端,javascript
如何实现?找了很多文章,参考了很长时间终于弄好了,总结一下。
简介与入门 \ 上传图片和文件
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());

至此,图片渲染就是链接形式了。文章来源地址https://www.toymoban.com/news/detail-623243.html

到了这里,关于【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2+wangEditor5富文本编辑器(图片视频自定义上传七牛云/服务器)

    1、安装使用 安装 在main.js中引入样式 在使用编辑器的页面引入js 模板 js  到这一步编辑器就可以正常显示了 2、上传图片、视频 上传到后台接口的可直接按照文档这个配置就行接口返回格式也要可文档上一致    2)自定义上传(一般上传到别的服务器上,我这边是上传到七

    2024年02月11日
    浏览(70)
  • Vue2 实现内容拖拽或添加 HTML 到 Tinymce 富文本编辑器的高级功能详解

    在 Web 开发中,Tinymce 被广泛应用作为富文本编辑器。除了基础的文本编辑功能,Tinymce 还提供了一系列高级功能,使得文本编辑更加灵活和便捷。本文将介绍如何在 Tinymce 中实现一些高级功能,并深入了解每个工具的使用。 Tinymce 是一款基于 JavaScript 的富文本编辑器,支持丰

    2024年02月03日
    浏览(79)
  • 【NKeditor】富文本编辑器上传图片

    使用NKeditor富文本编辑器上传图片,同时上传到七牛云存储上。后端语言使用ThinkPHP。 下载地址:NKeditor: NKedtior是一款优秀的轻量级Web编辑器,基于 Kindedior 二次开发 里面的文档demo写的比较详细,可以直接使用,不过里面上传七牛云的代码不能用,所以我是自己写的。   把

    2024年02月10日
    浏览(61)
  • wangEditor富文本编辑器图片/视频上传

    wangEditor 有丰富的 API 和足够的扩展性,允许我们自定义开发菜单、模块、插件等。在 Vue、React 中运用也很方便。因此本文介绍下vue中富文本上传图片和视频。 安装引入后富文本有显示上传图片按钮,点击上传后会报 没有配置上传地址 的错误,如下图所示: 所以自定义上传

    2024年02月15日
    浏览(65)
  • 若依框架图片上传、富文本框编辑器功能

    现在的需求是:实现一个项目展示模块,后端管理页面除了需要基础信息外,要加上一个 图片上传和富文本框编辑器功能 。 点击”图片存储地址”:可上传电脑任何位置的图片,并可对图片进行放大,缩小,和旋转。 存入数据库的图片以url地址存放 url直接百度可看到图片

    2024年04月13日
    浏览(79)
  • Tinymce富文本编辑器二次开发电子病历时解决的bug

    本文是在Tinymce富文本编辑器添加自定义toolbar,二级菜单,自定义表单,签名的基础之上进行一些bug记录,功能添加,以及模版的应用和打印 项目描述 建立电子病历模版—录入(电子病历模版和电子病历打印模版)—查看电子病历和打印病历模版 建立电子病历----添加一个电

    2024年04月10日
    浏览(58)
  • Vue3 中vue-quill富文本编辑器图片缩放

     导包   添加配置   注: 该编辑器已经不在维护了,很古老了,打包后如果报错,建议使用其他编辑器

    2024年04月25日
    浏览(56)
  • vue-quill-editor富文本编辑器-扩展表格、图片调整大小

    上篇文章已经讲到、vue-quill-editor的基本配置和图片转成url 这篇文章主要使用插件来完成 图片调整大小 和 表格的插件使用( 这两个目前quill 版本并不兼容 如果有大神解决了还望指点 ) 参考文章: vue-quill-editor 富文本编辑器支持图片拖拽和放大缩小_*且听风吟的博客-CSDN博

    2024年02月04日
    浏览(63)
  • tinymce4/5实现将word中内容(文字图片等)直接粘贴至编辑器中——利用插件tinymce-powerpaste-plugin

    TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 TinyMCE的优势: 开源可商用,基于LGPL2.1 插件丰富,自带插件基本涵盖日常所需功能(示例看下面的Demo-2) 接口丰富,可扩展性强,有

    2024年02月15日
    浏览(46)
  • vue3富文本编辑器vue-quill-editor、图片缩放ImageResize详细配置及使用教程

    官网地址:https://vueup.github.io/vue-quill/ 效果图  1、安装 2、在vue.config.js中添加配置,否则quill-image-resize-module会出现Cannot read property ‘imports‘ of undefined报错问题 3、创建quillTool.js(用于添加超链接、视频) 4、完整代码

    2024年02月04日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包