插件 \ image 插入编辑图片
+toolbar按钮+menu项

此页更新时间:2019-11-06 19:41

此页英文文档: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

下一节:importcss 引入css