您的位置:首页 > 其它

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>

<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/');

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: