tinymce上传图片php,TinyMCE 图片和文件上传
file_browser_callback
这个选项允许你添加自己的文件或者图片浏览器到TinyMCE中,如果给这个选项设置了一个值,那么编辑器的菜单选项中会多出来一个insert/edit link或者insert/edit image这样的按钮。当然如果你不设置它也就不会显示了。
每次点击这个按钮的时候file_browser_callback函数都会被调用一次。这个回调函数的格式是:fileBrowser(field_name, url, type, win),其中field_name是浏览器应将其URL插入的表单元素的id / name,url参数包含当前位于该字段内的URL值。type参数的类型包含要显示的浏览器类型,它的值可以是``file,image,flash,可以根据编辑器的选择菜单来选择。win`参数包含对执行该功能的对话框/窗口的引用。
类型:JavaScript Function
示例:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
file_browser_callback: function(field_name, url, type, win) {
win.document.getElementById(field_name).value = 'my browser value';
}
});
file_brower_callback_type
该选项可以让你指定文件选择器(file pickesr)的类型,中间使用空格或者逗号隔开:
类型: string
可能的值: file / image / media
示例:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
file_browser_callback_types: 'file image media' // type of file
});
file_picker_callback
这个钩子可以让你在工具栏中添加自己的文件选择器。编辑器已经集成了image / media / link选择框。该选项替换了file_brower_callback,新钩子提供了一种更新对话框中其他字段值的方法。
一旦你定义了一个file_picker_callback,编辑器菜单中就会出现一个对应文件类型的图标。点击这个按钮TinyMCE会自动使用下面三个参数调用这个回调:
callback — 一旦取得问题,就调用这个回调函数,它需要两个参数,第一个为必选参数;第二个为作为附加信息的可选参数;
value — 当前字段的值
meta — 对象包含在指定对话框中其他字段的值
类型:JavaScript Function
示例:下面的例子并没有选择任何真实的文件,只是作为展示file_picker_callback用法使用:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
file_picker_callback: function(callback, value, meta) {
// Provide file and text for the link dialog
if (meta.filetype == 'file') {
callback('mypage.html', {text: 'My text'});
}
// Provide image and alt text for the image dialog
if (meta.filetype == 'image') {
callback('myimage.jpg', {alt: 'My alt text'});
}
// Provide alternative source and posted for the media dialog
if (meta.filetype == 'media') {
callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
}
}
});
file_picker_type
该选项让你指定文件选择器的可以选择的文件类型,使用空格或者逗号隔开。
类型:string
可能的值:file / image / media
示例:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
file_picker_types: 'file image media'
});
automatic_uploads
启用或者禁止上传由 data URL 或者 blob URls表示的图像。例如,通过Image Tools插件进行图像处理,或将图像从桌面拖放到编辑器上之后,生成图像。
注意:images_upload_url没有定义时该选项不起作用。
类型:boolean
默认值:true
可能的值:true / false
示例:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
images_upload_url: 'postAcceptor.php',
automatic_uploads: false
});
images_upload_url
通过该选项可以指定上传到服务器的URL。调用editor.uploaderImages() 或者automatic_uploads值为true的时候才会触发。上传器会返回一个新的文件地址,格式如下:
{ "location": "folder/sub-folder/new-location.png" }
类型:string
示例:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
images_upload_url: 'postAcceptor.php'
});
images_upload_base_path
该选项允许你指定一个basepath作为从images_upoad_url页面返回的URLs前缀。
类型:string
示例:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
images_upload_base_path: '/some/basepath'
});
images_upload_credentials
该选项可以让你配置调用images_upload_url时是否应用cookies等跨域凭证。
类型:boolean
默认值:false
示例:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
images_upload_credentials: true
});
images_upload_handler
该选项允许你使用自己的逻辑自定义一个函数去取代 TinyMCE 默认的 JavaScript上传器。
上传函数包括三个参数:blobInfo,一个success回调和一个failure回调。如果该选项未设置,那么 TinyMCE 将使用XMLHttpResquest将图片以每次一张的形式传到服务器,并使用远程映像的位置调用success回调。
使用该选项的时候,不需要设置其他图片上传器。另外,如果您希望TinyMCE用远程地址替换标签的src属性,请使用images_upload_handler函数中定义的成功回调与返回的JSON对象的location属性。
类型:JavaScript Function
示例:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'postAcceptor.php');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
});
images_dataimg_filter
该选项允许你定义一个过滤器函数,用来禁止在编辑器中将 base64映像装换为blob。这通常用于非常高级的集成,你可以使用自定义逻辑处理所有base64 / blob图像。
示例:JavaScript Function
示例:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
images_dataimg_filter: function(img) {
return img.hasAttribute('internal-blob');
}
});
images_reuse_filename
默认情况下TinyMCE会为每个已经上传的文件指定一个唯一的文件名,但是这样可以回产生一些副作用。比如,automatic_uploads为true的时候,每次使用image Tools插件插入一个图片,文件都会自动上传,并且保存为不同的文件名,虽然可能每次上传的都是同一张图片。
设置images_reuse_filename为true,让TinyMCE使用实际的文件名而不是每次产生一个新的文件名。相应的标签的src属性将被替换为从服务器发回的任何文件名。 它可以是相同的文件名或其他东西,并且该文件名将用于下一次上传文件的文件名。
类型:boolean
默认值:false
示例:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
automatic_uploads: true,
images_upload_url: 'postAcceptor.php',
images_reuse_filename: true
});
tinymce上传图片php,TinyMCE 图片和文件上传相关推荐
- JS----TinyMCE 富文本编辑器,图片,文件上传
TinyMCE:功能强大.所见即所得的富文本编辑器 一般使用 官网及文档:https://www.tiny.cloud 官网下载:https://www.tiny.cloud/get-tiny/sel ...
- 图片和文件上传js剖析
/** * 商户资质信息模块js * * 涉及页面组件 { * 上传组件(UploadFileComponent) * } * * * 初始化工具(init) * * @Author:Waver */ ...
- java web 上传图片漏洞_Web安全:文件上传漏洞
原标题:Web安全:文件上传漏洞 一般将文件上传归类为直接文件上传与间接文件上传.直接文件上传就是服务器根本没有做任何安全过滤,导致攻击者可以直接上传小马文件及大马文件(如ASP.ASPX.PHP.J ...
- 【上传文件】基于阿里云的视频点播VOD、对象存储OSS实现音视频图片等文件上传
一.效果演示 a.测试界面初始化 b.点击[上传视频] c.点击[开始上传] d.点击[上传音频]选择音频之后点击[开始上传] c.点击[上传图片],注意图片上传为单按钮,选择文件之后自动完成上传 d ...
- UEditor的配置和使用(单独图片与文件上传)
UEditor配置与使用 一.准备 1.下载 前往UEditor官网下载最新版,分为php,asp,jsp和.net四种版本,当然也可以直接下载完整版,这里以jsp为例 http://ueditor. ...
- vue+el-upload组件封装(图片,文件上传至oss阿里云)
1.安装ali-oss npm install ali-oss --save 2.oss方法封装 新建utils/ali-oss-upload.js文件(代码如下) const OSS = requi ...
- html上传文件与后台处理,关于前端html图片和文件上传和后台接收方法
前些时间项目和h5交互时涉及到了文件上传的一个功能,但是h5在写上传的时候总是上传不上,所以花时间专门看了下web端的文件上传记录下. 第一种是前端写的,拿来修改了下,这种方法在上传的时候需要用到jq ...
- Servlet3.0 多图片,文件上传
1.分析 上传文件的过程:客服端选择一个文件后,写入到服务器端,服务器端使用一个目录来存储该文件--底层IO流操作 2.jsp文件上的表单设计 表单传输格式用multipart/form-data,要 ...
- fastadmin 文本框修改为图片或文件上传
add.html:多图片上传 <div class="form-group"><label class="control-label col-xs-12 ...
最新文章
- python用类名直接调用方法_Python类的实例方法、静态方法、类方法详解,附代码示例...
- ios滚动条影响父页面 vue_父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案...
- 运算符之:5、位运算符(7个)
- c++拷贝、赋值和销毁的简单介绍
- 在Linux系统下, 可以用一个命令很容易批量删除.svn的文件夹
- bootstrap网格系统_如何使用Bootstrap网格系统?
- form.html,HTML表单form
- mini_magick上传图片
- .NET中的异步编程——常见的错误和最佳实践
- Boost Graph Library 快速入门
- 第五十篇、OC中常用的第三插件
- 最牛逼的PHP视频教程115网盘免费下载,嗷嗷给力
- 打印机打印时显示选择传真调解器或服务器,惠普打印机选择打印时为什么显示发送传真...
- Win10上如何显示本地lrc文件歌词——lrc播放器——《超级lrc播放器》
- markdown图片显示
- BLC(Black Level Correction)——黑电平校正
- 深入理解操作系统实验——bomb lab(secret_phase)
- NASA官网信息导航(愚见)
- NVIDIA安装驱动不成功的解决方式
- ARCGIS 模型 根据字段值批量导出矢量数据