`
ljl_xyf
  • 浏览: 636523 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CKEditor图片上传功能开启方法

    博客分类:
  • php
php 
阅读更多

PHP怎么给ckeditor编辑器加上传图片的功能?

ASP同理

    CKEditor官方演示是有上传图片和浏览服务器文件功能的,但是我们自己下载回来的却没有这两个功能…… 其实还需要下载另外一个组件:CKFinder,用它配合CKEditor来实现上传功能。 官方提供了PHP,Asp.Net和Asp三个语言版本的CKFinder,下载地址:http://ckfinder.com/download     http://www.my400800.cn

 

本地下载:CKFinder

 

    将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.

分享到:
评论

相关推荐

    ckeditor 自己实现图片上传功能 和源代码

    然而,原版的CKEditor可能并不包含所有开发者或用户所需的功能,例如内置的图片上传功能。本教程将重点讲解如何为CKEditor添加自定义的图片上传功能,并提供相应的源代码。 首先,我们需要理解CKEditor的工作原理。...

    CKEditor整合上传图片功能,绝对能用

    2. **配置CKEditor**:在CKEditor的配置文件(通常是`config.js`)中,你需要设置图片上传的插件以及CKFinder的路径。例如,你可以添加以下代码: ``` CKEDITOR.editorConfig = function( config ) { config....

    CKEditor实现图片上传(使用Struts2)

    在CKEditor中实现图片上传功能,通常会结合后端框架如Struts2进行处理。本文将深入探讨如何利用CKEditor与Struts2实现图片上传的功能。 首先,我们需要在CKEditor的配置中启用图片上传功能。这可以通过修改CKEditor...

    ckeditor上传截图和图片php

    在CKEditor中集成图片上传功能,可以使用户在编辑文章时直接上传本地图片,增强编辑体验。配置过程通常包括以下步骤: 1. 安装CKEditor:下载并解压CKEditor的安装包,将其放在服务器的合适位置。 2. 集成CKFinder...

    CKEDITOR 编辑器本地上传图片(好)

    要开启图片上传功能,开发者需要在CKEDITOR初始化时进行配置。这通常涉及设置`filebrowserBrowseUrl`、`filebrowserUploadUrl`等参数,指定浏览和上传图片的URL。例如: ```javascript CKEDITOR.replace('editor'...

    CKEditor 上传图片

    首先,我们需要在CKEditor的配置中开启图片上传功能。在CKEditor的配置文件(config.js)中,添加或修改相关配置,例如: ```javascript config.filebrowserBrowseUrl = '/browser/browse.action'; config....

    ckeditor 已经配置开放上传图片接口

    在CKEditor中集成图片上传功能,使得用户可以在编辑文档时方便地添加本地图片,提升用户体验。这一特性是通过CKFinder或自定义上传插件实现的。CKFinder是一个文件管理器,它可以与CKEditor配合使用,让用户能够浏览...

    asp使用ckeditor和ckfinder上传图片设置

    在asp中使用ckeditor开启图片上传功能的设置方法: 1、下载asp版本的ckfinder,放到ckeditor目录下 2、修改ckeditor\config.js,加上如下内容: CKEDITOR.editorConfig = function( config ) { config.scayt_...

    CKEditor4+ckfinder ASP.NET 支持图片上传

    这个ASP.NET项目是关于如何在CKEditor4中集成ckfinder,以实现图片上传功能的示例。 首先,我们需要了解ASP.NET的基础。ASP.NET是由微软开发的一个Web应用程序框架,用于构建动态网站、Web应用和Web服务。它提供了...

    ckeditor5 全功能版(纯手工编译)

    它提供了多种内置工具,包括文本格式化、图片上传、链接创建、表格插入、列表操作等。此外,它支持实时预览,使得用户在编辑时就能看到最终的排版效果。CKEditor 5 还有强大的富媒体集成能力,可以轻松插入视频、...

    限制ckeditor上传图片文件大小的方法

    需要注意的是,这种方法只针对图片上传,其他类型的文件上传限制需要单独处理。 除了CKEditor本身,你还可以查看相关文章,了解CKEditor的更多配置和开发细节,例如CKEditor4的中文说明文档、FCKeditor的精简配置、...

    ckeditor 图片上传

    用户可以插入文本、图片、链接等元素,而图片上传功能就是其中的一部分。CKFinder或CKUploader等插件通常被用于扩展CKEditor,以便支持文件和图片的上传。 在实现CKEditor图片上传时,首先要配置CKEditor实例,设置...

    ckeditor+ckfinder配置实现图片上传实例

    我们将讨论这两个工具的基本概念、配置步骤以及如何将它们集成以实现图片上传功能。 首先,CKEditor是一个JavaScript库,它提供了丰富的富文本编辑功能,如字体样式、颜色调整、插入图片等。它的最新版本为4.0.1,...

    java与ckeditor和ckfinder整合后实现上传图片功能

    3. **整合CKFinder与CKEditor**:在CKEditor中设置图片上传按钮或插件,使其指向CKFinder的URL。当用户点击上传图片时,CKFinder会打开,用户可以选择服务器上的图片或者上传新的图片。 4. **处理文件上传**:在...

    ckeditor和ckfinder实现asp.net图片上传的功能

    6. **测试和调试**:完成以上步骤后,测试CKEditor和CKFinder的图片上传功能是否正常工作。如果遇到问题,可以通过查看浏览器的开发者工具来查看网络请求和错误信息,以便进行调试。 通过以上步骤,你就可以在ASP...

    ckeditor网页编辑器+asp上传图片,FLASH

    外国知名网页编辑器,比国内的其它网页编辑器更稳定,更好用.支持WORD内容复制,图片上传,FLASH上传功能,表格插入等等... 上传图片路径设置 打开UploadFile.asp,修改filepath=filepath & "../../upload/images/

    ckEditor上传到指定ftp上

    本话题主要聚焦于CKEditor如何配置并实现将图片上传到指定的FTP服务器。 首先,CKEditor本身并不直接支持FTP上传,但可以通过扩展其功能来实现这一需求。通常,我们会使用CKFinder这样的文件管理器插件,它与...

    springmc ckeditor ckfinder三者整合

    而CKFinder是一款文件管理器,它与CKEditor配合,允许用户上传、管理和插入到编辑器中的图片和文件。 首先,我们来深入了解Spring MVC。Spring MVC是基于Java的模型视图控制器架构,它简化了Web应用程序的开发。它...

    ckeditor_4.6.2_full

    二、图片上传功能开启 在CKEditor中,图片上传功能默认是关闭的。要开启这一功能,我们需要在CKEditor的配置文件`config.js`中进行设置。首先,确保已安装了`filebrowserUploadUrl`或`filebrowserImageUploadUrl`...

Global site tag (gtag.js) - Google Analytics