Vue Tinymce富文本粘贴图片时让图片自适应编辑框宽度
2023-12-18 15:54:47
修改初始化代码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);
})
}
},
这样贴进去的图片就不会过大,超出编辑框
文章来源:https://blog.csdn.net/gdgztt/article/details/135062593
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!