Question

我正在尝试将CKEditor与wampserver上的Simple Image Browser插件一起使用，但对不起，我真的不明白该放在这行：

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提供。

您可以使用以下内容的静态.txt文件的URL开头：

[{"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 Uncaught TypeError：无法读取未定义的属性'getEditor'
ckeditor.js：610 Uncaught TypeError：无法读取undefined的属性'title'

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

2 个答案: