插件 \ image tools 图片编辑工具

此页更新时间：2020-10-27 09:05

此页英文文档：https://www.tiny.cloud/docs/plugins/imagetools/

图片编辑工具（imagetools）插件提供了一个在内容区对图片进行简单编辑的快捷菜单，单击内容区的图像，可以显示一组上下文菜单。

如果单击图像没有显示工具栏，可能你的图片存在跨域问题，需要参考本文后面的两个参数：imagetools_cors_hosts 或 imagetools_proxy。

这是一个仅仅引入该插件，未做任何其它配置的例子：

tinymce.init({
    selector: '#tinydemo',
    plugins: "image imagetools",
    toolbar: "image",
});
基于安全上的考虑，TinyMCE不支持编辑SVG图像。

云安装

Tiny Cloud服务基于该插件提供了一套完整的解决方案，详情参见原文，原文中凡是涉及到Tiny Cloud的部分均不在本页中赘述。

本地部署

使用该插件只需简单两步：

  1. plugins: "image imagetools"
  2. 使用 imagetools_cors_hosts 开启跨域白名单，及使用 imagetools_proxy 配置图片代理。
tinymce.init({
    selector: '#tinydemo',
    plugins: "image imagetools",
    toolbar: "image",
    imagetools_cors_hosts: ['mydomain.com', 'otherdomain.com'],
    imagetools_proxy: 'proxy.php',
});

配置说明

imagetools_cors_hosts 图片来源跨域白名单

由于浏览器的同源策略（不同域名/不同端口/不同的协议不允许共享资源），当js在页面中访问其它域名下的数据时会被浏览器阻止，也就是常说的跨域问题。

当存在跨域问题时，imagetools插件无法处理来自其它域的图片数据。为了克服这些限制，必须在来源域中指定Cross-Origin为当前引用域。即为在来源域中将引用域设为白名单。

在保障上述设置的前提下，使用此参数，即可令该插件处理来自不同域下的图片文件。

取值：数组

默认：[]

使用方法，见上例。

imagetools_credentials_hosts 发送图片跨域请求凭据

此配置需与imagetools_cors_hosts一起使用，作用是发送跨域凭据。默认情况下,标准的跨域请求是不会发送cookie等用户认证凭据的，配置此项会将cookie一同发送。一般情况下无需配置该参数。

取值：数组

默认：[]

tinymce.init({
    selector: '#tinydemo',
    plugins: "image imagetools",
    toolbar: "image",
    imagetools_cors_hosts: ['mydomain.com', 'otherdomain.com'],
    imagetools_credentials_hosts: ['mydomain.com', 'otherdomain.com'],
});

imagetools_fetch_image 自定义获取图像

此配置可实现自定义获取图像数据，入参是要获取的图像的HTML元素，基于promise返回一个Blob对象。

取值：Function

例子：

tinymce.init({
    selector: '#tinydemo',
    plugins: "image imagetools",
    toolbar: "image",
    imagetools_fetch_image: function(img) {
        return new tinymce.util.Promise(function (resolve) {
            // Fetch the image and return a blob containing the image content
            ...
            resolve(new Blob(...));
        });
    }
});

imagetools_proxy 图片文件代理

简单说就是用后端来解决跨域问题，因为同源策略是浏览器的限制，后端没有这种限制，所以当来源服务端不可控时，可以使用代理的方式获取图片。

使用该配置很简单，只需指定一个代理URL：

tinymce.init({
    selector: '#tinydemo',
    plugins: "image imagetools",
    toolbar: "image",
    imagetools_proxy: 'proxy.php',
});

PHP实现后端图片代理的例子：

<?php
// 此文件没有实现权限效验
// 此代理接口推荐只授权给特定用户使用
$validMimeTypes = array("image/gif", "image/jpeg", "image/png");

//判断GET过来的url参数是否存在
if (!isset($_GET["url"]) || !trim($_GET["url"])) {
    header("HTTP/1.0 500 Url parameter missing or empty.");
    return;
}

//拿到协议类型
$scheme = parse_url($_GET["url"], PHP_URL_SCHEME);
//协议必须是http或https
if ($scheme === false || in_array($scheme, array("http", "https")) === false) {
    header("HTTP/1.0 500 Invalid protocol.");
    return;
}
//php读取远程图片，其它语言换成自己的写法
$content = file_get_contents($_GET["url"]);
$info = getimagesizefromstring($content);

//如果拿不到或者不是图片就退出
if ($info === false || in_array($info["mime"], $validMimeTypes) === false) {
    header("HTTP/1.0 500 Url doesn't seem to be a valid image.");
    return;
}
//输出文件头及图片数据
header('Content-Type:' . $info["mime"]);
echo $content;
?>

imagetools_toolbar 图片快速工具栏出现的按钮

当单击内容区图片时，希望快速工具栏出现的图标，可以为以下值：

  • rotateleft 逆时针旋转
  • rotateright 顺时针旋转
  • flipv 垂直翻转
  • fliph 水平翻转
  • editimage 编辑图片
  • imageoptions 图片选项

取值：Dtring

默认：'rotateleft rotateright | flipv fliph | editimage imageoptions'

可用于编辑器主工具栏的按钮

同上。

该插件提供的命令行

  • mceEditImage 打开该插件提供的编辑图片的窗口
  • mceImageRotateRight 顺时针旋转90度
  • mceImageRotateLeft 逆时针旋转90度
  • mceImageFlipVertical 垂直翻转
  • mceImageFlipHorizontal 水平翻转
tinymce.activeEditor.execCommand('mceEditImage');
tinymce.activeEditor.execCommand('mceImageRotateRight');
tinymce.activeEditor.execCommand('mceImageRotateLeft');
tinymce.activeEditor.execCommand('mceImageFlipVertical');
tinymce.activeEditor.execCommand('mceImageFlipHorizontal');

下一节：importcss 引入css

▲