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 图片和文件上传相关推荐

  1. JS----TinyMCE 富文本编辑器,图片,文件上传

    TinyMCE:功能强大.所见即所得的富文本编辑器 一般使用 官网及文档:https://www.tiny.cloud 官网下载:https://www.tiny.cloud/get-tiny/sel ...

  2. 图片和文件上传js剖析

    /** * 商户资质信息模块js * * 涉及页面组件 { * 上传组件(UploadFileComponent) * } * * * 初始化工具(init) * * @Author:Waver */ ...

  3. java web 上传图片漏洞_Web安全:文件上传漏洞

    原标题:Web安全:文件上传漏洞 一般将文件上传归类为直接文件上传与间接文件上传.直接文件上传就是服务器根本没有做任何安全过滤,导致攻击者可以直接上传小马文件及大马文件(如ASP.ASPX.PHP.J ...

  4. 【上传文件】基于阿里云的视频点播VOD、对象存储OSS实现音视频图片等文件上传

    一.效果演示 a.测试界面初始化 b.点击[上传视频] c.点击[开始上传] d.点击[上传音频]选择音频之后点击[开始上传] c.点击[上传图片],注意图片上传为单按钮,选择文件之后自动完成上传 d ...

  5. UEditor的配置和使用(单独图片与文件上传)

    UEditor配置与使用 一.准备 1.下载 前往UEditor官网下载最新版,分为php,asp,jsp和.net四种版本,当然也可以直接下载完整版,这里以jsp为例 http://ueditor. ...

  6. vue+el-upload组件封装(图片,文件上传至oss阿里云)

    1.安装ali-oss npm install ali-oss --save 2.oss方法封装 新建utils/ali-oss-upload.js文件(代码如下) const OSS = requi ...

  7. html上传文件与后台处理,关于前端html图片和文件上传和后台接收方法

    前些时间项目和h5交互时涉及到了文件上传的一个功能,但是h5在写上传的时候总是上传不上,所以花时间专门看了下web端的文件上传记录下. 第一种是前端写的,拿来修改了下,这种方法在上传的时候需要用到jq ...

  8. Servlet3.0 多图片,文件上传

    1.分析 上传文件的过程:客服端选择一个文件后,写入到服务器端,服务器端使用一个目录来存储该文件--底层IO流操作 2.jsp文件上的表单设计 表单传输格式用multipart/form-data,要 ...

  9. fastadmin 文本框修改为图片或文件上传

    add.html:多图片上传 <div class="form-group"><label class="control-label col-xs-12 ...

最新文章

  1. python用类名直接调用方法_Python类的实例方法、静态方法、类方法详解,附代码示例...
  2. ios滚动条影响父页面 vue_父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案...
  3. 运算符之:5、位运算符(7个)
  4. c++拷贝、赋值和销毁的简单介绍
  5. 在Linux系统下, 可以用一个命令很容易批量删除.svn的文件夹
  6. bootstrap网格系统_如何使用Bootstrap网格系统?
  7. form.html,HTML表单form
  8. mini_magick上传图片
  9. .NET中的异步编程——常见的错误和最佳实践
  10. Boost Graph Library 快速入门
  11. 第五十篇、OC中常用的第三插件
  12. 最牛逼的PHP视频教程115网盘免费下载,嗷嗷给力
  13. 打印机打印时显示选择传真调解器或服务器,惠普打印机选择打印时为什么显示发送传真...
  14. Win10上如何显示本地lrc文件歌词——lrc播放器——《超级lrc播放器》
  15. markdown图片显示
  16. BLC(Black Level Correction)——黑电平校正
  17. 深入理解操作系统实验——bomb lab(secret_phase)
  18. NASA官网信息导航(愚见)
  19. NVIDIA安装驱动不成功的解决方式
  20. ARCGIS 模型 根据字段值批量导出矢量数据

热门文章

  1. 【爬虫】手把手教你写网络爬虫(2)
  2. 从毕业生成为职业人(转载)
  3. xdm学习通的(选择+填空)
  4. Java Lambda 连接字符串
  5. 维生素C主要生理功能
  6. 关于Adobe Photoshop 2021另存为图片找不到JPEG、PNG等格式的解决办法
  7. python-调用图灵AI接口,实现机器人聊天功能
  8. About the special G/L account
  9. double和float的区别
  10. ABC281G Farthest City