ckeditor ckfinder 集成 ,添加本地上传图片功能
2013-06-13 08:38
399 查看
所需工具文件:ckeditor 和ckfinder js文件,ckeditor-java-core-3.5.3.jar;
解压CKEditor.zip,把解压得到的文件夹全部放到网站根目录下;
解压ckfinder_java_2.3.zip,在WebRoot下新建ckfinder文件夹,在解压后的文件夹中找到ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp\ckfinder文件夹,拷贝到目标文件夹下;
samples文件夹、changelog.txt、install.txt、license.txt、translations.txt可以删掉, lang包中,删掉除en.js和zh-cn.js之外的文件
解压ckeditor-java-3.6.4.war,把CKFinderJava\WEB-INF\lib下的
activation-1.1.jar、CKFinder-2.1.jar、CKFinderPlugin-FileEditor-2.1.jar、
CKFinderPlugin-ImageResize-2.1.jar、Thumbnailator-0.3.10.jar、mail.jar、
commons-fileupload-1.1.1.jar、commons-io-1.1.jar
拷贝到项目的lib下;
把配置文件config.xml、web.xml也拷贝到WebRoot/WEB-INF下,打开config.xml 第二行的<enabled>false</enabled>换成<enabled>true</enabled> 第四行的<baseURL>/CKFinderJava/userfiles/</baseURL> 换成<baseURL>/你的项目名称/userfiles/</baseURL>
配置ckeditor中的config.js 文件:
配置拷入的config.xml文件:
<baseDir></baseDir>
<baseURL>/项目名称/userfiles/</baseURL>
在jsp中引用ckeditor编辑器:
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
解压CKEditor.zip,把解压得到的文件夹全部放到网站根目录下;
解压ckfinder_java_2.3.zip,在WebRoot下新建ckfinder文件夹,在解压后的文件夹中找到ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp\ckfinder文件夹,拷贝到目标文件夹下;
samples文件夹、changelog.txt、install.txt、license.txt、translations.txt可以删掉, lang包中,删掉除en.js和zh-cn.js之外的文件
解压ckeditor-java-3.6.4.war,把CKFinderJava\WEB-INF\lib下的
activation-1.1.jar、CKFinder-2.1.jar、CKFinderPlugin-FileEditor-2.1.jar、
CKFinderPlugin-ImageResize-2.1.jar、Thumbnailator-0.3.10.jar、mail.jar、
commons-fileupload-1.1.1.jar、commons-io-1.1.jar
拷贝到项目的lib下;
把配置文件config.xml、web.xml也拷贝到WebRoot/WEB-INF下,打开config.xml 第二行的<enabled>false</enabled>换成<enabled>true</enabled> 第四行的<baseURL>/CKFinderJava/userfiles/</baseURL> 换成<baseURL>/你的项目名称/userfiles/</baseURL>
<servlet> <servlet-name>ConnectorServlet</servlet-name> <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class> <init-param> <param-name>XMLConfig</param-name> <param-value>/WEB-INF/config.xml</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>false</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>ConnectorServlet</servlet-name> <url-pattern> /ckfinder/core/connector/java/connector.java </url-pattern> </servlet-mapping> <filter> <filter-name>FileUploadFilter</filter-name> <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class> <init-param> <param-name>sessionCookieName</param-name> <param-value>JSESSIONID</param-value> </init-param> <init-param> <param-name>sessionParameterName</param-name> <param-value>jsessionid</param-value> </init-param> </filter> <filter-mapping> <filter-name>FileUploadFilter</filter-name> <url-pattern> /ckfinder/core/connector/java/connector.java </url-pattern> </filter-mapping> <session-config> <session-timeout>10</session-timeout> </session-config>
配置ckeditor中的config.js 文件:
CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: config.language = 'zh-cn'; config.uiColor = '#AADC6E'; config.toolbar = "Full"; config.skin = 'v2'; config.filebrowserBrowseUrl = '/项目名称/ckfinder/ckfinder.html', config.filebrowserImageBrowseUrl = '/项目名称/ckfinder/ckfinder.html?type=Images', config.filebrowserFlashBrowseUrl = '/项目名称/ckfinder/ckfinder.html?type=Flash', config.filebrowserUploadUrl = '/项目名称/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files', config.filebrowserImageUploadUrl = '/项目名称/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images', config.filebrowserFlashUploadUrl = '/项目名称/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash', config.filebrowserWindowWidth = '700', config.filebrowserWindowHeight = '700' ; };
配置拷入的config.xml文件:
<baseDir></baseDir>
<baseURL>/项目名称/userfiles/</baseURL>
在jsp中引用ckeditor编辑器:
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
$(function(){ var editor = CKEDITOR.replace('要替换的textare的名字'); CKFinder.setupCKEditor(editor,'/ckfinder/'); });
相关文章推荐
- asp.net使用ckeditor与ckfinder的集成,有上传图片功能
- 黑马程序员_ckeditor+ckfinder实现本地图片上传
- 结合CKFinder,给CKEditor加上上传图片功能
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
- Django在admin后台集成TinyMCE富文本编辑器添加上传图片功能
- Java 设置添加ckeditor图片上传功能
- ckeditor组合ckfinder的配置使用图片上传功能
- PHP 中配置 ckeditor(fckeditor的新版本)+ckfinder ,实现上传图片功能。
- Ckeditor与Ckfinder整合 上传图片功能(.net版本)
- CKEditor 集成上传功能,不用CkFinder
- Bootstrap-Markdown如何添加本地图片上传功能
- CKEditor和CKFinder实现图片上传
- [ckeditor系列]CKEditor图片上传功能开启方法 (实用)
- 在项目中集成kindeditor图片上传和编辑器功能
- CKeditor如何实现图片上传功能
- CKeditor 图片上传功能 要花钱59$
- CKfinder CKeditor 上传图片 汉字 乱码 解决方法
- CKeditor自定义上传图片功能
- CKEditor3.0在asp.net环境下上传文件的配置,集成CKFinder
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)