CKEditor + CKFinder图像上传
CKEditor + CKFinder image uploads
我在PHP 5.6上使用ckkeditor 4.5.2和CKFinder 3.0.0。通常集成工作良好-当我点击CKEditor图像按钮时,我可以点击"浏览服务器"按钮,CKFinder打开,我可以选择图像,也可以上传。
image2对话框中的"上传"选项卡不起作用。当我点击"发送到服务器"按钮时,我总是得到一个错误,说"请求的资源类型无效"。
在我的CKFinder配置中,我有两个资源类型定义为Images
和Library
;这些本质上是相同的,除了Library
是只读的-我只想允许上传到Images
类型。
有多种方式配置CKEditor和CKFinder之间的集成。我正在使用CKEditor的自定义JS配置文件,并使用setupCKEditor
方法将ckFinder连接到它,按照文档:
CKFinder.setupCKEditor(ckeditor_1, {
'height': '100%',
'jquery': '/js/jquery-1.11.3.min.js',
'skin': 'jquery-mobile',
'swatch': 'a',
'themeCSS': '/themes/mytheme.min.css',
'filebrowserBrowseUrl': '/ckfinder/ckfinder.html',
'filebrowserImageBrowseUrl': '/ckfinder/ckfinder.html?Type=Images',
'filebrowserImageUploadUrl': '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
}, "Images");
我已经尝试在我的CKEDITOR.replace
调用中传递相同的值给CKEditor,并且还将它们设置在我的外部配置文件中的config
属性上,但没有任何变化-我仍然得到相同的错误。
我该怎么做?另外,由于CKFinder上传器工作正常,我如何禁用image2对话框中的上传选项卡?
更新:这是我当前创建CKEditor和CKFinder实例的代码:
var ckeditor_1 = CKEDITOR.replace('html', {
"baseHref":"http://mysite.mac.local/",
"toolbarStartupExpanded":true,
"extraPlugins":"symbol",
"customConfig":"/js/ckconfig.js"
});
CKFinder.setupCKEditor( ckeditor_1, {
'height': '100%',
'jquery': '/js/jquery-1.11.3.min.js',
'skin': 'jquery-mobile',
'swatch': 'a',
'themeCSS': '/themes/mytheme.min.css'
}, { type: "Images" } );
我的CKEditor配置文件:
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.docType = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">';
config.toolbarGroups = [
{name: 'document', groups: ['mode', 'document', 'doctools']},
{name: 'clipboard', groups: ['clipboard', 'undo']},
{name: 'editing', groups: ['find', 'selection', 'spellchecker']},
{name: 'links'},
{name: 'insert'},
{name: 'tools'},
{name: 'others'},
'/',
{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align']},
{name: 'styles'},
{name: 'colors'},
{name: 'about'},
{name: 'symbol'}
];
config.removePlugins = 'templates,save,specialchar,image,flash,scayt,forms,wsc,print,iframe,pagebreak';
CKEDITOR.plugins.addExternal('symbol', '/ckeditorplugins/symbol/', 'plugin.js');
config.extraPlugins = 'symbol';
config.templates_replaceContent = false;
config.templates_files = [
'/ckeditorplugins/templates/templates.js'
];
config.allowedContent = true;
config.toolbarCanCollapse = true;
config.fullPage = true;
config.skin = 'bootstrapck';
config.height = 400;
config.uiColor = '#f9dda0';
config.autoParagraph = false;
config.enterMode = CKEDITOR.ENTER_BR;
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.writer.selfClosingEnd = '>';
});
};
看起来你混合了CKEditor和CKFinder的选项。CKFinder.setupCKEditor()
的第二个参数是CKFinder配置,而您使用的所有filebrowser*
选项都属于CKEditor配置。请查看CKFinder.setupCKEditor()文档。第三个参数允许您定义上传URL参数,因此在这里您可以将上传指向Images
。
请尝试以下代码片段:
CKFinder.setupCKEditor(ckeditor_1, {
'height': '100%',
'jquery': '/js/jquery-1.11.3.min.js',
'skin': 'jquery-mobile',
'swatch': 'a',
'themeCSS': '/themes/mytheme.min.css'
}, {type: "Images"});
当使用CKFinder.setupCKEditor()
时,CKEditor的上传路径将自动设置,因此不需要显式配置。
如果以上不适合您,请提供创建ckeditor_1
的代码。
- 如何使用url加载程序在webpack中导入多个图像
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 角度:在ng重复上切换图像
- 画廊图像未显示
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- Javascript排序的图像弹出窗口..可以't单独弹出
- 画布数据到图像
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 使图像在单击时展开到不大于浏览器
- Html页面上的多个Base64图像和平滑加载
- UIAutomation放大图像
- CKFinder 3为所选文件返回错误的URL
- 使用javascript在Flash中加载外部图像
- 可以在这里为背景图像设置滤镜吗
- Ckfinder在上传之前重命名图像
- CKFinder 如何在选择图像时获取尺寸 URL 和尺寸(宽度/高度)(文件:选择)
- 上传图像后,CKFinder 问题无法获取事件
- CKEditor - CKFinder不会在上传图像后自动创建缩略图
- CKEditor + CKFinder图像上传