`

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文件夹的最简易方法
评论
发表评论

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

相关推荐

    ckeditor富文本编辑器

    CKEditor是一款功能强大的富文本编辑器，被广泛应用于网页、CMS（内容管理系统）以及各种Web应用程序中，为用户提供了一个类似Word的在线编辑环境。这款编辑器支持多种格式的文本输入，包括图片、视频、链接、表格等...

    CKeditor富文本编辑器

    总之，CKeditor作为一款功能强大的富文本编辑器，不仅能满足日常的文本编辑需求，还能通过丰富的插件和API实现高度定制，满足不同类型的网站和应用的需求。无论是初学者还是专业开发者，都能从中找到适合自己的使用...

    CKeditor富文本编辑器插件资源

    总的来说，CKeditor富文本编辑器插件资源提供了构建强大、易用的在线文本编辑功能，无论是简单的文本编辑还是复杂的多媒体内容创作，都能得到很好的支持。开发者可以根据自身项目的需求，灵活地选择和配置CKeditor的...

    CKeditor富文本编辑器的js压缩包

    CKeditor是一款广泛应用于Web开发的开源富文本编辑器，它为用户提供了一种在网页上创建、编辑和格式化文本的强大工具。这个js压缩包包含了CKeditor的核心组件和可能的插件，使得开发者能够轻松地集成到自己的网站或...

    Python 如何在CKEditor富文本编辑器中上传图片 Python源码

    Python 如何在CKEditor富文本编辑器中上传图片 Python源码Python 如何在CKEditor富文本编辑器中上传图片 Python源码Python 如何在CKEditor富文本编辑器中上传图片 Python源码Python 如何在CKEditor富文本编辑器中...

    富文本编辑器ckeditor使用手册

    在“富文本编辑器ckeditor使用手册”中，你将找到关于如何安装、配置、使用以及自定义CKEditor的各种指导。以下是一些关键知识点的详细说明： 1. **安装CKEditor**：首先，你需要从CKEditor的官方网站下载编辑器的...

    CKeditor富文本编辑器使用技巧之添加自定义插件的方法

    本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法。分享给大家供大家参考，具体如下： 首先就是在CKeditor的plugins目录下新建一个目录qchoice： qchoice目录下的结构如下： 然后， images中...

    CKEditor 富文本编辑器 ckeditor-java-core

    CKEditor 是一款非常知名的开源富文本编辑器，广泛应用于网页开发中，为用户提供了一种方便的方式来创建和编辑具有格式化的文本内容。它支持多种语言，包括中文，且提供了丰富的插件和自定义选项，可以满足各种复杂...

    ckeditor富文本编辑器插件下载

    CKEditor是一款广泛应用于网站开发的开源富文本编辑器，它为用户提供了一个功能强大的文本编辑界面，使得非程序员也能轻松编辑和格式化在线内容。这款编辑器以其灵活性、易用性和丰富的特性而备受赞誉，适用于新闻...

    ckeditor富文本编辑器需要引入的js文件

    CKEditor是一款功能强大的富文本编辑器，广泛应用于网页制作、内容管理系统和其他需要用户编辑HTML内容的场景。它提供了丰富的文本格式化选项，如字体、大小、颜色、对齐方式等，以及图片上传、链接插入、表格创建等...

    世上最牛CKEditor富文本编辑器，支持图片粘贴上传，支持Java,PHP,.Net

    当前语言为Asp.Net语言，可直接改Java，PHP等 直接改配置文件的服务端路径，即可修改任何语言的上传。 config.cs里面配置config.filebrowserImageUploadUrl = "服务端url"; //实现上传图片功能 亲测有效。

    CKEditor富文本编辑

    CKEditor是一款广泛使用的开源富文本编辑器，专为创建高质量的Web内容而设计。它提供了丰富的文本格式化选项，使得用户在网页上编辑文本时，能够享受到类似桌面应用程序的体验。CKEditor支持HTML、CSS、图像、链接、...

    Flask项目-集成富文本编辑器CKeditor，实现了图片上传、文件上传、Flash上传等功能

    Flask项目——集成富文本编辑器CKeditor，实现了图片上传、文件上传、Flash上传等功能。方便进行项目集成及应用。代码无需任何修改，可完美执行！！！ Flask项目——集成富文本编辑器CKeditor，实现了图片上传、...

    富文本编辑器

    4. **富文本编辑器库的使用**：市面上有许多成熟的富文本编辑器库，如CKEditor、TinyMCE、Quill、Draft.js等。选择合适的编辑器库可以极大地简化开发工作。开发者需要学习这些库的API，理解其工作原理，并根据需求...

    ckeditor 富文本编辑器

    总的来说，CKEditor是一个功能强大且灵活的富文本编辑器，对于需要在网站上提供高质量文本编辑功能的开发者来说，它是理想的选择。通过深入理解其特性和配置，开发者可以构建出满足特定需求的文本编辑解决方案。

    SSH+ExtJs完成CKEditor富文本编辑器整合

    CKEditor是一款功能丰富的富文本编辑器，常用于网页中的内容编辑。本篇文章将详细介绍如何在SSH框架中整合CKEditor与ExtJS，以实现高效、美观的前端文本编辑功能。 首先，我们需要理解SSH框架的运作原理。Spring...

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