图片编辑器
让用户无需离开编辑器，就能对文档中已有的图片进行裁剪、旋转、翻转、绘制、标注或应用滤镜。保存时，编辑后的图片会经过您的上传处理程序，图片获得新的 URL；没有处理程序时，它会以 PNG data URL 的形式嵌入。
启用
该功能由 imageeditor.js 插件提供（也包含在 plugins/all_plugins.js 中）。编辑工具本身位于 plugins/tui.image-editor/ 中，插件只在对话框打开时，才从 url_base + "/plugins/tui.image-editor/" 把它们加载到对话框中。部署时请让这个文件夹与插件放在一起。
按钮为 imageeditor（"Image Editor"）。它位于默认的图片工具栏（controltoolbar_IMG）中，用户点击图片时出现，因此不需要向主工具栏添加任何东西。在代码中，请先选中图片，然后运行 editor.execCommand("imageeditor")。
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div id="editor"><p><img src="landscape.png" width="320" alt="Hills under a sun"></p></div>
<script>
// Called on Save with the edited picture: (file, callback(url, error)).
function uploadToServer(file, callback) {
fetch("/upload", { method: "POST", headers: { "x-file-name": file.name }, body: file })
.then(function (r) { return r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status)); })
.then(function (data) { callback(data.url); })
.catch(function (err) { callback(null, err.message); });
}
var editor = new RichTextEditor("#editor", { file_upload_handler: uploadToServer });
</script>这与编辑器用于插入和拖放图片的处理程序是同一个；完整的服务器端示例请参阅上传文件。
选项
插件本身没有选项。它会读取以下选项：
| 选项 | 默认值 | 在这里的作用 |
|---|---|---|
file_upload_handler | 无 | 保存时接收编辑后的图片。未设置时使用 window.rte_file_upload_handler。 |
url_base | "/richtexteditor" | 加载 plugins/tui.image-editor/ 的位置。 |
controltoolbar_IMG | 包含 imageeditor | 从中删除 imageeditor 即可隐藏该按钮。 |
text_ie_title、text_ie_save、text_ie_saving、text_ie_uploadfailed、text_ie_nourl | 英文 | 对话框标题、Save 按钮和上传消息。语言包会设置它们。 |
使用方法
对话框占窗口的 90%。底部的工具依次为 Undo、Redo、Reset、Delete、Delete all、Crop（Custom、Square、3:2、4:3、5:4、7:5、16:9）、Flip、Rotate、Draw、Shape、Icon、Text、Mask 和 Filter。Save 位于右上角；它旁边的框显示上传错误。
Save 的行为取决于上传处理程序：
- 有处理程序时。图片以名为
image-<timestamp>.png、类型为image/png的File传入。在您调用回调之前，Save 显示 "Saving..."。callback(url)会把图片的src设置为该 URL 并关闭对话框。callback(null, "File too large")会让对话框保持打开、编辑内容保持不变，并显示 "Upload failed: File too large"，以便用户重试。抛出异常的处理程序会以同样的方式显示其错误消息。 - 没有处理程序时。图片的
src变成一个data:image/png;base64,...URL，对话框关闭。
只有 src 会改变。图片的 width、alt 和其他属性保持原样，因此裁剪为 16:9 的图片会保留原来的 width 属性，其高度随新的形状变化。上面运行中保存的 HTML（id 是编辑器为每张图片添加的，而不是这个插件）：
<p><img src="/uploads/image-1793772809490.png" width="320" alt="Hills under a sun" id="rte-fig-cl2s5j0"></p>注意事项
- 结果始终是 PNG。JPEG 照片会以 PNG 的形式返回，通常更大：在我们的测试中，一张 640×400 的 JPEG 返回为 78 KB 的 PNG。如果您的服务器只接受部分扩展名，请允许
.png。 - 没有处理程序时，即使
allowBase64Images为false，图片也会被嵌入。在 2.6.12 中，图片编辑器不检查这个设置。如果您关闭了 base64（请参阅图片存储），请同时设置上传处理程序，或者从controltoolbar_IMG中删除imageeditor。 - 来自其他网站的图片需要 CORS。图片会被绘制到 canvas 上，因此其他源上的图片必须带有
Access-Control-Allow-Origin标头。如果没有，图片不会出现在对话框中，而且在 2.6.12 中，Save 会把它替换为一张空白的 300×150 PNG。请只编辑来自您自己域名或发送 CORS 标头的 CDN 上的图片。 - 滤镜。在 2.6.12 中，勾选滤镜之后，对话框中的图片不会重新绘制；滤镜会应用到保存的图片上。在我们的测试中，Grayscale 和 Invert 的结果正确；Sepia 给出了错误的（紫色）颜色。保存之后请检查结果。
- 键盘。工具面板无法完全用键盘操作。无障碍声明把这一点列为已知的不足。
- 没有外部请求。打开编辑器和保存时，只加载了页面自身主机上
plugins/tui.image-editor/中的文件；插件关闭了该库的使用统计。