上传图片投掷ckeditor

时间:2017-05-03 09:40:44

标签: javascript ckeditor

我是编辑器的html代码:

<div id="editor">
    <h1>Hello world!</h1>
    <p>I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>
</div>

javascript for it。

if (CKEDITOR.env.ie && CKEDITOR.env.version < 9) {
    CKEDITOR.tools.enableHtml5Elements(document);
}
CKEDITOR.config.height = 150;
CKEDITOR.config.width = 'auto';
CKEDITOR.config.defaultLanguage = 'en';
CKEDITOR.config.language = 'en';
CKEDITOR.config.extraPlugins = 'uploadimage,filebrowser';
CKEDITOR.config.toolbarCanCollapse = true;
function loadEditor(id) {
    if (CKEDITOR.revision === ('%RE' + 'V%') || !!CKEDITOR.plugins.get('wysiwygarea')) {
        CKEDITOR.replace(id);
    } else {
        CKEDITOR.document.getById(id).setAttribute('contenteditable', 'true');
        CKEDITOR.inline(id);
    }
}
loadEditor('editor');

有人可以给我一个简单的解释如何使我可以上传图像直接投掷ckeditor。我已经尝试了一个多星期的时间来做这件事。我下载了插件uploadimage及其依赖插件。否#34;上传&#34;标签出现在&#34;图像属性&#34;窗口。 谢谢

1 个答案:

答案 0 :(得分:1)

UploadImage插件仅适用于已删除或粘贴的图片。如果您只想要图像属性中的上传选项卡,则必须将config.filebrowserImageUploadUrl设置为将处理上传的脚本:

config.filebrowserImageUploadUrl = '/uploader/upload.php?type=Images';

您的upload.php应该是这样的(取自Integrating CKEditor with a Custom File Browser,示例3):

<?php
// Required: anonymous function reference number as explained above.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load a specific configuration file or anything else).
$CKEditor = $_GET['CKEditor'] ;
// Optional: might be used to provide localized messages.
$langCode = $_GET['langCode'] ;

// Check the $_FILES array and save the file. Assign the correct path to a variable ($url).
$url = '/path/to/uploaded/file.ext';
// Usually you will only assign something here if the file could not be uploaded.
$message = '';

echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
?>