JavaScript 使用Ckeditor+Ckfinder文件上传案例详解

下面是关于 JavaScript 使用 Ckeditor+Ckfinder 文件上传的完整攻略。

什么是Ckeditor和Ckfinder？

首先，我们需要了解一下 Ckeditor 和 Ckfinder。Ckeditor 是一款著名的富文本编辑器，支持多语言、自定义皮肤、插件扩展等功能。Ckfinder 是 Ckeditor 的配套文件管理系统，可以方便地进行文件的上传、浏览和管理。

安装Ckeditor和Ckfinder

在开始进行文件上传之前，我们需要先安装 Ckeditor 和 Ckfinder。

下载 Ckeditor 和 Ckfinder，在官网上可以找到下载地址。
解压下载的文件，并将 Ckeditor 和 Ckfinder 目录拷贝到自己的网站目录下。
创建一个 HTML 页面，并在 head 标签中引入 Ckeditor 和 Ckfinder 的相关文件。

html <head> <script src="/ckeditor/ckeditor.js"></script> <script src="/ckfinder/ckfinder.js"></script> </head>

配置Ckeditor

配置 Ckeditor，使其支持文件上传功能。

初始化 Ckeditor，在 HTML 页面中添加一个 textarea 输入框，并在 js 文件中进行 Ckeditor 的初始化。

html <textarea name="editor1"></textarea>

javascript CKEDITOR.replace( 'editor1', { filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', });
配置 Ckfinder 的上传路径，使其将文件上传到指定的目录。

在 Ckfinder 目录下，找到 config.php 文件，修改以下代码：

php $baseUrl = '/ckfinder/userfiles/'; $baseDir = '/path/to/userfiles/';

将 $baseDir 改为指定的文件上传路径，如 /var/www/html/userfiles/。

实现文件上传功能

现在，我们已经完成了 Ckeditor 和 Ckfinder 的安装和配置工作，下面来实现文件上传功能。

在输入框中插入一个文件上传按钮。

javascript CKEDITOR.config.toolbar = [ { name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Print', '-', 'Templates' ] }, { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] }, { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] }, '/', { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }, { name: 'about', items: [ 'About' ] } ]; CKEDITOR.config.extraPlugins = 'uploadfile,uploadimage'; CKEDITOR.config.uploadUrl = 'upload.php?type=file'; CKEDITOR.config.filebrowserUploadUrl = 'upload.php?type=file'; CKEDITOR.config.filebrowserBrowseUrl = 'browse.php?type=file'; CKEDITOR.config.filebrowserWindowWidth = '1000'; CKEDITOR.config.filebrowserWindowHeight = '700'; CKEDITOR.config.filebrowserWindowFeatures = 'resizable=yes,scrollbars=yes'; CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR; CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_P; CKEDITOR.config.autoGrow_onStartup = true; CKEDITOR.config.autoGrow_minHeight = 150; CKEDITOR.config.autoGrow_maxHeight = 800; CKEDITOR.config.extraAllowedContent = 'div(*){*}(*);'; CKEDITOR.config.uiColor = '#F7B42C'; CKEDITOR.config.language = 'zh-cn'; CKEDITOR.config.toolbarCanCollapse = true; CKEDITOR.config.removePlugins = 'elementspath,doksoft_uploader'; CKEDITOR.config.resize_enabled = false; CKEDITOR.config.dlgTitle = '通用对话框'; CKEDITOR.config.skin = 'office2013'; CKEDITOR.config.templates_files = '/ckeditor/plugins/templates/templates/default.js'; CKEDITOR.config.templates_replaceContent = false; CKEDITOR.config.toolbar_mini = [ { name: 'document', items: ['Print'] }, { name: 'clipboard', items: ['Undo', 'Redo'] }, { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline'] }, { name: 'paragraph', items: [ 'AlignLeft', 'AlignCenter', 'AlignRight'] }, { name: 'links', items: ['Link', 'Unlink', 'Anchor'] }, { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] } ]; CKEDITOR.plugins.addExternal('autogrow', '/ckeditor/plugins/autogrow/'); CKEDITOR.plugins.addExternal('uploadfile', '/ckeditor/plugins/uploadfile/'); CKEDITOR.plugins.addExternal('uploadimage', '/ckeditor/plugins/uploadimage/');
在后台实现文件上传和管理。

```php
<?php
$upload_dir = '/var/www/html/userfiles/';

$allowed_ext = array('jpg', 'jpeg', 'gif', 'png', 'bmp', 'txt', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'zip', 'rar', '7z');

if (isset($_FILES['upload'])) {
$name = $_FILES['upload']['name'];
$ext = strtolower(substr($name, strrpos($name, '.') + 1));
$type = $_FILES['upload']['type'];
$size = $_FILES['upload']['size'];
$tmp_name = $_FILES['upload']['tmp_name'];
if (!in_array($ext, $allowed_ext)) {
echo "";
die();
}
if ($size > 2 * 1024 * 1024) {
echo "";
die();
}
$path = $upload_dir . $name;
if (move_uploaded_file($tmp_name, $path)) {
echo "";
} else {
echo "";
}
}
?>

```

示例说明

示例1：添加图片

在 Ckeditor 的工具栏中，点击“插入”按钮，选择“图像”选项，在弹出的窗口中，点击“浏览服务器”按钮，选择要上传的图片，上传成功后，图片会自动插入到输入框中。
示例2：上传文档

在 Ckeditor 的工具栏中，点击“插入”按钮，选择“链接”选项，在弹出的窗口中，点击“浏览服务器”按钮，选择要上传的文档，上传成功后，文档的链接会自动插入到输入框中。

这样，我们就完成了 JavaScript 使用 Ckeditor+Ckfinder 文件上传的详细攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript 使用Ckeditor+Ckfinder文件上传案例详解 - Python技术站