`

ckeditor富文本编辑器使用

ckedit富文本编辑器 
阅读更多

说到富文本编辑器，ckeditor无疑是做的最好的。

以前一直用旧的2.3版本，不支持chrome，因为2.3那会chrome还没出来。

今天在网上看到新的版本支持chrome了，试用了下，比以前的界面好看多了，配置也少了很多。

和大家分享下过程

1.下载ckeditor，地址请自行搜索之。

2.下载完后，将ckeditor拷贝到项目目录中，然后拷贝ckeditor-java-core-3.5.3.jar到项目的lib目录下，然后就可以使用了

 

  1. <!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>  
  3. <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>  
  4. <html>  
  5.     <body>  
  6.         <form action="sample_posteddata.jsp" method="get">  
  7.             <p>  
  8.                 <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>  
  9.             </p>  
  10.             <p>  
  11.                 <input type="submit" value="Submit" />  
  12.             </p>  
  13.         </form>  
  14.     <ckeditor:replace replace="editor1" basePath="/ckeditor/" />  
  15.     </body>  
  16. </html>  

 

当然，你也可以不适用标签，使用js脚本来加载编辑器 

  1. <script type="text/javascript">  
  2.     var editor = CKEDITOR.replace( 'editor1' );  
  3. </script>

 

要使用以上js，你需要添加以下代码，引用ckeditor的js 

  1. <script type="text/javascript" src="ckeditor/ckeditor.js"></script>  

 

大功告成？ 
no！因为你发现你的编辑器不能上传图片，这当然不是你想要的。难道ckeditor不知道么？ 
他们当然知道，这个功能目前已经被独立成一个项目，叫ckfinder 
那么，看看ckfinder如何使用吧 
1.仍然是下载，地址请自行搜索 
2.拷贝ckfinder到项目根目录下，拷贝config.xml到WEB-INF下，拷贝所有的lib包到项目lib目录 
3.然后还需要在web.xml里进行以下配置 

 

  1. <servlet>  
  2.         <servlet-name>ConnectorServlet</servlet-name>  
  3.         <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>  
  4.         <init-param>  
  5.             <param-name>XMLConfig</param-name>  
  6.             <param-value>/WEB-INF/config.xml</param-value>  
  7.         </init-param>  
  8.         <load-on-startup>1</load-on-startup>  
  9.     </servlet>  
  10.     <servlet-mapping>  
  11.         <servlet-name>ConnectorServlet</servlet-name>  
  12.         <url-pattern>  
  13.             /ckfinder/core/connector/java/connector.java  
  14.         </url-pattern>  
  15.     </servlet-mapping> 

 

4.大功告成，可以使用了 

  1. <script type="text/javascript" src="ckfinder/ckfinder.js"></script>  
  2. <script type="text/javascript">  
  3.     var editor = CKEDITOR.replace( 'editor1' );  
  4.     CKFinder.setupCKEditor( editor, '/ckfinder/' ) ;  
  5. </script>

 

刷新下页面，刚才没有上传功能的编辑器，已经可以上传图片了，就这么简单。

 

转载：http://mushme.iteye.com/blog/1104646

 

 

 

 

 

 

 

 

 

 

分享到：
| Windows下删除.svn文件夹的最简易方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics