FCKeditor html 文本编辑器的配置应用

(1) 下载应用

   ① FCKeditor 下载地址

   ② 把FCKeditor 2.6.5 解压到项目的 WebRoot 下

   ③ 解压fckeditor-java-2.6-bin.zip,把文件夹中的fckeditor-java-core-2.6.jar以及lib中的所有jar包拷贝到你的web程序的lib中,fckeditor-java-demo-2.6.war中的slf4j-simple-1.5.8.jar也要拷进去(注意:slf4j-api和slf4j-simple的版本一定要一致)。如果你觉得麻烦,那么就从fckeditor-java-demo-2.5.war中直接将lib文件夹下的所有jar包复制到项目的lib中,效果是一样的

   ④ 在web.xml中配置相应的Servlet实现应用

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
	<servlet>
		<servlet-name>ConnectorServlet</servlet-name>
		<servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>ConnectorServlet</servlet-name>
		<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
	</servlet-mapping>
</web-app>
   ⑤ 把fckeditor-java-demo-2.6.war 中的fckeditor.properties复制到你项目的src中

   ⑥ 在需要应用的jsp页面添加

<%@taglib uri="http://java.fckeditor.net" prefix="FCK"%>  

   ⑦ 在要显示编辑框的地方加入

<FCK:editor instanceName="content" basePath="/fckeditor" value="valuesDemo"></FCK:editor>

       1.这里的value就是在文本框内要显示的内容,可以利用java从作用域中取得对象放在这里

       2.instanceName 的性质就和input中的name是一样的,利用它进行传值,对应的java类型是String,可以在数据库中存入clob

   ⑧ 通过iframe添加应用

<input id="content" name="content" value="" type="hidden" /><iframe id="content___Frame" frameborder="0" height="200" scrolling="no" width="100%" src="/dsqcb.com/fckeditor/editor/fckeditor.html?InstanceName=content&Toolbar=Default"> </iframe>

   ⑨ 测试页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.fckeditor.net" prefix="FCK"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title></title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

</head>

<body style="text-align:center;"> 
<FCK:editor instanceName="content" basePath="/fckeditor" value="valuesDemo"></FCK:editor>
</body>
</html>
 

   ⑩ 效果


 


(2) 10个免费的javascript富文本编辑器 (jQuery and non-jQuery)

MarkitUp - jQuery

Official Website |Demo

一个轻量级的、可定制的和灵活的富文本编辑器,常用在CMSBlog、论坛等网站上。

markItUp不是一个所见即所得的编辑器,支持一些常用快车键和常用的浏览器。

jWYSIWYG - jQuery

Official Website |Demo

jWYSIWYG是比较常用的Jquery所见即所得编辑器,提供了html代码编辑功能、文字编辑功能,图片连接功能,从而保证了jWYSIWYG的简单的特性。

Lightweight RTE- jQuery

Official Website | Demo

Lightweight RTE是一个非常简单的Jquery富文本编辑器,体积只有7kb。提供了一些基本的文字格式化操作功能。

HTMLBox - jQuery

Official Website |Demo

HTMLBox跨浏览器、交互性非常好、开源的Jquery富文本编辑器,在Mozilla Firefox, Inrernet Explorer, Opera, Netscape and Safari等常用浏览器下测试通过。此编辑器用户手册可以帮住你非常容易地把此编辑器整合到自己的Web系统中

D Small Rich Text Editor - jQuery

Official Website |Demo

D Small Rich Text Editor使用了AjaxFileUpload插件实现图片上传功能。

WYMEditor - jQuery

Official Website |Demo

WYMeditor是一个所建即所得Jquery富文本编辑器。支持插件扩展功能、

TinyMCE - non-jQuery

Official Website |Demo

TinyMCE 国内很多网站都在使用,是一个非常不错的所见即所得编辑器,而且开源。具体功能不再赘述,大家自己发现吧。

fckeditor - Non-jQuery

Official Website |Demo

Fckeditor是一个功能非常强大的富文本编辑器,博客园有使用此编辑器,我做的大部分项目也使用此编辑器,是asp.net网站的首选,提供了weconfig.xml文件用来定制符合自己需求的富文本编辑器。完全可以与MSWord媲美。

Yahoo YUI Rich Text Editor - Non-jQuery

Official Website |Demo

YUI Rich Text Editor是轻量级的富文本编辑器,提供了一些常用的文字编辑功能。

Xinha - Non-jQuery

Official Website |Demo

Xinha是一个所见即所得的富文本编辑器,提供了强大的文字,图片。视频。音频等编辑功能


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值