README

imagebrowser 是一个 CKEditor 插件，允许在服务器上浏览并选择图像，将其包含到编辑器的内容中。

您可以在 这里 查看工作演示。

此插件通过在图像对话框窗口中提供一个 浏览服务器 按钮，与 image 插件（CKEditor 的一部分）集成。

您使用它的方式与 Redactor 中的 imageGetJson 非常相似

• 您只需要提供一张图像的 JSON 格式列表，图像浏览器就会处理其余部分。

实际上，它使用与 Redactor 相同的数据格式，便于在两个编辑器之间进行转换。

安装

将此存储库的全部内容复制到 CKEditor 安装中新的 plugins/imagebrowser 目录。

请确保您使用的是 标准 或 完整 的 CKEditor 包。 基本 包缺少内置的 "文件浏览器" 插件，该插件是此插件所依赖的。如果您在构建时使用了 "文件浏览器" 插件支持，您也可以使用 自定义 CKEditor 包。

使用方法

通过将其添加到 extraPlugins 中来启用插件，并指定 imageBrowser_listUrl 参数

<textarea id="my-textarea-id"></textarea>

<script type="text/javascript">
	CKEDITOR.replace('my-textarea-id', {
		"extraPlugins": "imagebrowser",
		"imageBrowser_listUrl": "/path/to/images_list.json"
	});
</script>

imageBrowser_listUrl 配置参数指向一个 URL，该 URL 以 JSON 格式列出服务器上的图像。 请确保使用绝对路径。

示例

[
	{
		"image": "/image1_200x150.jpg",
		"thumb": "/image1_thumb.jpg",
		"folder": "Small"
	},
	{
		"image": "/image2_200x150.jpg",
		"thumb": "/image2_thumb.jpg",
		"folder": "Small"
	},

	{
		"image": "/image1_full.jpg",
		"thumb": "/image1_thumb.jpg",
		"folder": "Large"
	},
	{
		"image": "/image2_full.jpg",
		"thumb": "/image2_thumb.jpg",
		"folder": "Large"
	}
]

上述内容表示有 2 个图像目录（"Small" 和 "Large"），每个目录中都有 2 个文件。

• image - 图像放入编辑器内容时使用的绝对路径。

• thumb（可选）- 图像缩略图的相对路径（用于预览）。如果省略，则使用 image 的值作为缩略图。

• folder 字段是 可选的。如果省略，则不会将图像列表拆分到文件夹中。

另一种初始化方式

如果您希望图像浏览器插件适用于您所有的 CKEditor 文本框，您可以编辑 CKEditor 的 config.js 并添加以下 2 条配置行

config.extraPlugins = "imagebrowser";
config.imageBrowser_listUrl = "/path/to/images_list.json";