为ckeditor编辑器加上传图片的功能
发布时间:2022-08-11 22:17:50
CKEditor官方演示是有上传图片和浏览服务器文件功能的,但是我们自己下载回来的却没有这两个功能…… 其实还需要下载另外一个组件:CKFinder,用它配合CKEditor来实现上传功能。 官方提供了PHP,Asp.Net和Asp三个语言版本的CKFinder,下载地址:http://ckfinder.com/download
将CKFinder解压缩到网站目录。调用方法如下(假设CKFinder在网站根目录,可以使用相对路径): CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl : '/ckfinder/ckfinder.html', filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images', filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash', filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images', filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash' });
同时默认情况下是禁止上传的,还需要打开CKFinder目录下的config.php,将第32行的return false;修改为return true; 这里就是上传权限的认证了,你可以注意到上面有一大段英文注释,意思是不要简单的将它修改为return true,而是加上例如session验证等等,否则会很危险……
下面是官方文档,关于如何增加文件上传功能,给英文好的同学参考,上面说的方法其实就是下文中的Example 5:
Basic Configuration The filebrowserBrowseUrl setting is the location of an external file browser, that should be launched when "Browse Server" button(1) is pressed. The filebrowserUploadUrl setting is the location of a script that handles file uploads. If set, the "Upload" tab(2) will appear in dialog boxes (only where such functionality is available, i.e. in "Link", "Image" and "Flash" dialog windows). Example 1 CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl : '/browser/browse.php', filebrowserUploadUrl : '/uploader/upload.php', }); It is also possible to set a separate url for a selected dialog box, using the dialog name in file browser settings: filebrowser[dialogName]BrowseUrl and filebrowser[dialogName]UploadUrl. For example to set a special upload url for the image dialog, set the filebrowserImageUploadUrl property: Example 2 CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl : '/browser/browse.php', filebrowserImageBrowseUrl : '/browser/browse.php?type=Images' filebrowserUploadUrl : '/uploader/upload.php', filebrowserImageUploadUrl : '/uploader/upload.php?type=Images' }); In the example above, filebrowserBrowseUrl and filebrowserUploadUrl settings will be used by default, however in the Image dialog box, CKEditor will use filebrowserImageBrowseUrl and filebrowserImageUploadUrl configuration settings instead. File Browser Window Size The default width of file browser window in CKEditor is set to 80% of screen width, the default hight is set to 70% of screen height. If for some reasons, the default values are not suitable for you, you can change it to any other value. Use filebrowserWindowWidth to change width and filebrowserWindowHeight to change height of the window. To set the size of the window in pixels, just set the number value (e.g. "800"). If you prefer to set height and width of the window in percentage of the screen, remember to add percent sign at the end (e.g. "60%"). Example 3 CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl : '/browser/browse.php', filebrowserUploadUrl : '/uploader/upload.php', filebrowserWindowWidth : '640', filebrowserWindowHeight : '480', }); To set the window size of file browser inside of a specific dialog box, use filebrowser[dialogName]WindowWidth and filebrowser[dialogName]WindowHeight settings. For example, to change the file browser window size only in "Image" dialog box, change set the filebrowserImageWindowWidth and filebrowserImageWindowHeight settings. Example 4 CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl : '/browser/browse.php', filebrowserUploadUrl : '/uploader/upload.php', filebrowserImageWindowWidth : '640', filebrowserImageWindowHeight : '480', }); Using CKFinder CKFinder may be easily integrated with CKEditor (see live demo). The integration may be done in two ways: by setting CKEditor configuration options (example below) or using the CKFinder.SetupCKEditor() method available in CKFinder API. Example 5 CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl : '/ckfinder/ckfinder.html', filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images', filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash', filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images', filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash' }); The example above is valid for PHP environment. /ckfinder/ is a base path to the CKFinder installation directory. If your using CKFinder for ASP, ASP.NET or ColdFusion remember to change "php" to the right extension: asp - CKFinder for ASP aspx - CKFinder for ASP.NET cfm - CKFinder for ColdFusion php - CKFinder for PHP Example 6 CKEditor + CKFinder integration with the use of CKFinder.SetupCKEditor() function: var editor = CKEDITOR.replace( 'editor1' ); CKFinder.SetupCKEditor( editor, '/ckfinder/' ); The second parameter of the SetupCKEditor() method is the path to the CKFinder installation. Please check the _samples/js/ckeditor.html sample distributed with CKFinder to see the full working example of this integration method.
猜你喜欢
- adminadmin 是 Django 自带的后台管理组件,你可以在 admin 中执行增删改查等操作。它以可视化的方式让你来操纵模型表,十
- 本文实例讲述了Python实现的ftp服务器功能。分享给大家供大家参考,具体如下:python 具备强大的网络编程功能,而且代码简介,用简单
- 导语:使用 python-plotly 模块来进行压测数据的绘制,并且生成静态 html 页面结果展示。不少小伙伴在开发过程中都有对模块进行
- 本篇文章所编写的代码,已经放到了gitee上了:gitee.com/pdudo/golea…本文所依赖的环境为:在目前
- 有时候你会发现Django数据库API带给你的也只有这么多,那你可以为你的数据库写一些自定义SQL查询。 你可以通过导入django.db.
- 前言可扩展标记语言,是一种简单的数据存储语言,XML被设计用来传输和存储数据存储,可用来存放配置文件,例:java配置文件传输,网络传输以这
- numpy和matlab的几点差异Python numpy和matlab都是便捷灵活的科学计算语言,两者具有很多相似之处,但也有一些混淆的地
- 先看map()函数底层封装介绍:注释中翻译为:map(func, *iterables)——> map对象创建一个迭代器,使用来自的参
- 开发时,通常打开Debug模式会快速定位开发时的一些问题。项目开始部署时,关闭Debug模式,url.py路由静态文件和图片写法:# url
- 1.垂直影像拼接 vconcat# -*- coding: utf-8 -*-import cv2image = cv2.imread(&q
- 在这可以用join()函数'x'.join(y),x可以是任意分割字符,y是列表或元组。以列表为例,可以将列表中的每一个元素
- 如下所示:def read_data(file_name): ''' file_name:文件地址 '
- 1 简介在日常运行程序的过程中常常涉及到循环迭代过程,对于执行时间很短的程序来说倒无所谓,但对于运行过程有明显耗时的涉及循环迭代的程序,为其
- 本文实例讲述了Python实现生成随机日期字符串的方法。分享给大家供大家参考,具体如下:生成随机的日期字符串,用于插入数据库。通过时间元组设
- opencv读取图像为b,g,r方法,比如img = cv2.imread("xx.jpg")cv2.imshow(&q
- 高阶函数是在Python中一个非常有用的功能函数,所谓高阶函数就是一个函数可以用来接收另一个函数作为参数,这样的函数叫做高阶函数。pytho
- Div+CSS+JS组和能够实现很多好看的特殊的效果,这里推荐一款可刷新的下拉菜单:下面是js代码部分:<script type=te
- 在XHTML标签中有一些标签的作用是相似的,当然这里的相似是指语义相似,以至于很多人都不清楚这些相似的标签如何使用,那么今天的主题就是分解相
- 本文实例为大家分享了python3判断url链接是否为404的具体代码,供大家参考,具体内容如下import pymysqlimport t
- 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。以下文章来源于Pyth