带有简单图像浏览器插件的 CKEditor

Question

我正在尝试将 CKEditor 与 wampserver 上的简单图像浏览器插件一起使用，但很抱歉，我真的不明白该在这一行中输入什么：

CKEDITOR.config.simpleImageBrowserURL

他在视频里放了一个php文件，这个文件放什么？（视频：https://www.youtube.com/watch?v=WB5Y8XNQlgE）

我想显示变量目录中的图片 'images/$id/'

感谢您的帮助。

插件页面： http://ckeditor.com/addon/simple-image-browser

Answer 1

对于 simpleImageBrowserURL，您需要提供 URL（例如 php 脚本）以 JSON.

形式提供内容

您可以从 URL 开始到静态 .txt 文件，内容如下：

[{"url": "/images/1234/image1.png"},{"url": "/images/1234/image2.png"}]

或者一个非常简单的php脚本：

<?php
header('Content-Type: application/json');
$id = '1234';
echo '[';
echo '{"url": "/images/' . $id . '/image1.png"},';
echo '{"url": "/images/' . $id . '/image2.png"}';
echo ']';
?>

更新

使用上面的 php 脚本，简单的图像浏览器插件不会加载图像。这是由插件使用的 jQuery $.get 函数引起的。虽然 jQuery 已经解析了 JSON 并将对象传递给插件尝试解析对象的函数（这里是 images 变量）：

$.get(CKEDITOR.config.simpleImageBrowserURL, function(images) {
      var json;
      console.log(images);
      json = $.parseJSON(images); // this will not work if the images parameter contains objects

这可能适用于旧版本的 jQuery...

因此，要实现此功能，php 脚本必须提供 text/plain MIME 类型：

<?php
header('Content-Type: text/plain');
$id = '1234';
echo '[';
echo '{"url": "/images/' . $id . '/image1.png"},';
echo '{"url": "/images/' . $id . '/image2.png"}';
echo ']';
?>

Answer 2

    <!doctype html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8" />

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="scripts/ckeditor/ckeditor.js"></script>
    <script src="scripts/ckeditor/plugins/simple-image-browser/plugin.js"></script>

    <link href="styles/knacss.css" rel="stylesheet" type="text/css" />
    <link href="styles/ui.css" rel="stylesheet" type="text/css" />
    <link href="styles/fonts.css" rel="stylesheet" type="text/css" />
    <link href="styles/styles.css" rel="stylesheet" type="text/css" />

    <script>
    $(function () {
        CKEDITOR.config.extraPlugins = 'simple-image-browser';
        CKEDITOR.config.simpleImageBrowserURL = 'images-liste.php';

        CKEDITOR.replace('details');
    });
    </script>
</head>
<body>
    <p><label for="description">Descripção:</label></p>
    <p><textarea class="ckeditor" name="description" id="description"></textarea></p>
</body>
</html>

图片-liste.php:

    <?php header('Content-Type: application/json');
echo '[';
echo '{"url": "http://andrewprokos.com/wp-content/uploads/22346-brasilia-cathedral-night-2.jpg"},';
echo '{"url": "https://upload.wikimedia.org/wikipedia/commons/6/6c/Brazil.Brasilia.01.jpg"}';
echo ']';                                                                   
?>

错误：

ckeditor.js:327 未捕获类型错误：无法读取未定义的属性 'getEditor'
ckeditor.js:610 未捕获的类型错误：无法读取未定义的属性 'title'

带有简单图像浏览器插件的 CKEditor

CKEditor with Simple Image Browser plugin

javascript

json

ckeditor