Vue Tinymce富文本粘贴图片时让图片自适应编辑框宽度

修改初始化代码init中的content_type,增加 img {max-width:100%;}

 content_style: "p {margin: 5px 0;} img {max-width:100%;}",

整体代码如下:

init: {
          //menubar: true, // 菜单栏显隐
          language_url: '../static/tinymce/langs/zh_CN.js', // vue-cli2.x
          language: "zh_CN",
          skin_url: '../static/tinymce/skins/ui/oxide', // vue-cli2.x
          content_css: 'src/assets/fonts/FZHei.css,src/assets/fonts/FZXBSJW.css',// vue-cli2.x
          height: 570,
          min_height: 570,
          max_height: 970,
          toolbar_mode: "wrap",
          plugins: this.plugins,
          toolbar: this.toolbar,
          //内容样式
          content_style: "p {margin: 5px 0;} img {max-width:100%;}",
          fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
          font_formats:
            "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;小标宋=FZXiaoBiaoSong;方正黑体=FZHei,sans-serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
          branding: false,
          // 粘贴图片后自动上传
          urlconverter_callback: function(url, node, on_save, name) {
              if (node === 'img' && url.startsWith('blob:')) {
                  tinymce.activeEditor && tinymce.activeEditor.uploadImages()
              }
              return url;
          },
          // 图片上传
          images_upload_handler: (blobInfo, success, failure) => {
            const formData = new FormData()
            formData.append('file', blobInfo.blob())
            formData.append('fileType', 'rich')
            let url = config.configData.api_url  + "/business/common/upFiles";
            this.$showLoading();
            utils.httpFile(url,formData).then((res) => {
                console.log(res.data);
                this.$closeLoading();
                let filePath = config.configData.file_url + "/" + res.data.data[0];
                success(filePath);
            })
          }
        },

这样贴进去的图片就不会过大,超出编辑框

  • 28
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是唐赢

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值