插件 \ 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

▲