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);
            })
          }
        },

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

你可能感兴趣的:(vue.js,自定义组件,vue.js,前端,javascript)