React 前端导航

TinyMCE 实现图片上传

 TinyMCE可以通过添加插件实现图片上传功能,同时可以在插件中设置图片大小限制。详情可查看Tinymce 中文文档

以下是一个示例代码:

1. 添加插件

在TinyMCE的初始化代码中添加以下内容:

plugins: 'image',
toolbar: 'image',

这样就启用了TinyMCE的图片插件,并在工具栏中添加了插入图片的按钮。

2. 配置图片上传路径

在TinyMCE的初始化代码中添加以下配置:

image_upload_url: 'your_upload_url',

将“your_upload_url”替换为图片上传的路径,这是服务器端处理上传图片的地址。

3. 配置图片大小限制

在TinyMCE的初始化代码中添加以下配置:

image_dimensions: false,
image_max_dimensions: [600, 400],

这样就禁用了用户手动调整图片大小的功能,并限制了上传的图片大小不超过600x400像素。

完整的示例代码:

tinymce.init({
  selector: 'textarea',
  plugins: 'image',
  toolbar: 'image',
  image_upload_url: 'your_upload_url',
  image_dimensions: false,
  image_max_dimensions: [600, 400],
});

注意,以上示例代码仅适用于TinyMCE 5.x版本。如果是其他版本的TinyMCE,可能需要稍作修改。

 

声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。邮箱:farmerlzj@163.com。 本站原创内容未经允许不得转载,或转载时需注明出处: 内容转载自: React前端网:https://qianduan.shop/blogs/detail/103

#TinyMCE#富文本#图片上传

相关推荐

React 中使用 TinyMCE 富文本编辑器

React 中使用 TinyMCE 入门介绍