插件 \ image 插入编辑图片
+toolbar按钮+menu项
此页更新时间:2020-03-08 22:29
此页英文文档:https://www.tiny.cloud/docs/plugins/image/
将图片插入到TinyMCE编辑区。基础弹出框包含图片地址、图片描述、宽高及是否保持比例。该插件还提供额外参数以增强功能。
这是一个不带任何额外参数的例子:
tinymce.init({
selector: '#tinydemo',
plugins: "image",
toolbar: "image",
});
额外参数
部分参数在配置参考 \ 图片&文件上传配置中出现过,这里不再赘述。
image_caption 图片标题
在弹出框中增加一个“标题”选项,开启后图片将被包含在figure(HTML5新增)内。
取值:true / false
默认:false
tinymce.init({
selector: '#tinydemo',
plugins: "image code preview",
toolbar: "image code",
image_caption: true,
});
该例子生成的html如下:
<figure class="image"><img src="../static/img/logo.png" alt="" width="256" height="62" />
<figcaption>Caption</figcaption>
</figure>
image_list 可选图片列表
提供一个预先定义好的图片下拉列表,其值为一个数组,每一项都必须含有标题title和图片地址value。
取值:JSON / URL / Function
tinymce.init({
selector: '#tinydemo',
plugins: "image",
toolbar: "image",
image_list: [
{title: '狗', value: 'mydog.jpg'},
{title: '猫', value: 'mycat.gif'}
],
});
也可以使用一个返回json数据的URL。如 image_list: "/mylist.php"
甚至它还支持自定义异步函数。
tinymce.init({
selector: '#tinydemo',
plugins: "image",
toolbar: "image",
image_list: function(success) {
success([
{title: '狗', value: 'mydog.jpg'},
{title: '猫', value: 'mycat.gif'}
]);
},
});
image_advtab 高级参数
为图像属性编辑窗口添加高级属性,可以自定义图片的css样式(内置style)、边距(margin)和边框(border)。
取值:true / false
默认:false
tinymce.init({
selector: '#tinydemo',
plugins: "image",
toolbar: "image",
image_advtab: true,
});
image_class_list
为图片属性对话框提供一个class选择列表
取值:JSON
tinymce.init({
selector: '#tinydemo',
plugins: "image",
toolbar: "image",
image_class_list: [
{title: '无', value: ''},
{title: 'dog', value: 'dog_class'},
{title: 'cat', value: 'cat_class'}
],
});
image_description 显示隐藏图片说明input
为img添加属性alt
取值:true / false
默认:true
image_description: false
image_dimensions 显示隐藏图片尺寸input
取值:true / false
默认:true
image_dimensions: false
image_title 显示隐藏图片标题input
为img添加属性title
取值:true / false
默认:false
image_title: true
image_prepend_url 地址前缀
指定图片URL补齐前缀
tinymce.init({
selector: '#tinydemo',
plugins: "image",
toolbar: "image",
image_prepend_url: "http://tinymce.ax-z.cn/static/img/"
});
译者注:效果就是比如你在地址input中输入1.jpg,改变焦点后,地址自动由1.jpg变为“自定义前缀+1.jpg”,上例则是变为:http://tinymce.ax-z.cn/static/img/1.jpg
typeahead_urls 输入地址时的自动完成
设false就是关闭地址input的自动完成。
取值:true / false
默认:true
typeahead_urls: false
image_uploadtab 图片对话框中上传标签开关
配置了images_upload_url后会在图像对话框中添加“上传”标签用于上传本地图像,此选项设false可关闭该标签。
取值:true / false
默认:true
image_uploadtab: false
a11y_advanced_options
5.2.0新增。
a11y是可访问性的缩写,一般面向残障人士。
开启后,会在对话框中添加role="presentation",该声明用于告诉浏览器这个图片仅作为装饰,无实际意义。
取值:true / false
默认:false
a11y_advanced_options: true
下一节:importcss 引入css