Vue-Admim-Element项目中组件Tinymce修改默认上传图片尺寸

原创已于 2022-04-04 22:10:20 修改 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Tinymce #vue

于 2022-04-04 22:09:42 首次发布

vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何在Vue-Admin-Element项目中修改Tinymce插件，解决图片上传后无法设置宽度和高度的问题，通过修改`index.vue`中的代码实现自定义尺寸限制。

原先右上角点击upload上传的图片插入富文本编辑器真的是牛头大。
在这里插入图片描述网上查了一下有一种是修改本地文件(content.min.css.js)的方法。但是Vue-Admim-Element这个项目中此文件并不是在本地，而是引用了网上的url，所以这种方法并没有成功。

最终摸索出来的修改方式：

找到src\components\Tinymce\index.vue
在index.vue文件中搜索img
找到这句话

imageSuccessCBK(arr) {
      arr.forEach(v => window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}"  >`))
    }

将img标签补充上宽高限制<img class="wscnph" src="${v.url}" width="30%" height="30%" >

修改后效果如下：
在这里插入图片描述