FCKeditor xhEditor

施兴言

2023-12-01

FCKeditor

1、下载fckeditor2.6.4，比以前版本更加简化。http://download.csdn.net/detail/yongzhian/7802331

2、将fckeditor_2.6.4.zip中的fckeditor文件夹复制到WebRoot下，将commons-fileupload-1.2.1.jar，commons-io- 1.3.2.jar，fckeditor-java-core-2.4.1.jar，slf4j-api-1.5.6.jar，slf4j- simple-1.5.6.jar或slf4j-jdk14-1.5.6.jar，共5个包导入到项目中。

　　但是要注意，截止到2009-2-4，slf4j官方最新版本是 1.5.6，但是fckeditor提供的slf4j-api却是1.5.2版本，如果两个版本不一样的话，你将会在控制台看到如下的消息：

严重: Servlet /Java threw load() exception
java.lang.IllegalAccessError: tried to access field org.slf4j.impl.StaticLoggerBinder.SINGLETON from class org.slf4j.LoggerFactory

3、web.xml中添加配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
   <servlet-name>Connector</servlet-name>
   <servlet-class>
    net.fckeditor.connector.ConnectorServlet
   </servlet-class>
   <load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
   <servlet-name>Connector</servlet-name>
   <url-pattern>
    /fckeditor/editor/filemanager/connectors/*
   </url-pattern>
</servlet-mapping>
  
</web-app>

4、修改配置文件

修改fckconfig.js组件配置文件一般需要依据FCKConfig.ToolbarSets["Default"]，设置自己风格的工具栏，如basic

<FCK:editor instanceName="content" height="500" toolbarSet="Basic">
        </FCK:editor>

FCKConfig.LinkBrowser 等可以控制是否到服务器

模版样式修改

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;

默认语言修改

FCKConfig.DefaultLanguage = 'zh-cn' ;

文件浏览的路径(FckEditor for java 2.4，旧版本如FckEditor for java 2.3等是需要修改的)

FCKConfig.LinkBrowserURL

FCKConfig.ImageBrowserURL

FCKConfig.FlashBrowserURL

上传文件的路径(新版本FckEditor for java 2.4是不需要修改的，旧版本如FckEditor for java 2.3等是需要修改的)

FCKConfig.LinkUploadURL

FCKConfig.FlashUploadURL

FCKConfig.ImageUploadURL

5、 .新建文件夹（可以不创建）

　WebRoot下面新建　userfiles文件夹，userfiles下面新建file，image，flash，media这4个文件夹文件会自动放入该位置

fckeditor.properties中connector.resourceType.file.path 与connector.userFilesPath等就是配置该文件

<%@ 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>
<base href="<%=basePath%>">

<title>FCK2.6测试</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>
	<form action="result.jsp" method="post">
		<FCK:editor instanceName="content" height="500" toolbarSet="Basic"> 
		</FCK:editor>
		<input type="submit" value="提交">
	</form>
</body>
</html>

直接取内容即可

  <body>
  <%=request.getParameter("content") %> 
  </body>

获取长度

	var contents = FCKeditorAPI.GetInstance("content");  
    var content =  $.trim(contents.GetXHTML(false));

    var checkContent = contents.EditorDocument;  
    var contentLength;  
    if (document.all) {  
        contentLength = $.trim(checkContent.body.innerText).length;  
    }  
    else {  
        var r = checkContent.createRange();  
        r.selectNodeContents(checkContent.body);  
        contentLength = $.trim(r).length;  
    }  
    alert(contentLength);

强烈推荐最新版本，之前的配置十分繁琐

xhEditor

http://download.csdn.net/detail/yongzhian/7802933

/zzzproject/WebRoot/xheditor/wizard.html 是帮助页面

拷贝其中的xhEditor文件夹到你的项目中，最好是根目录！

然后加载需要的js：

具体路径和版本自己把握！

接下来只要需要textarea控件的class名称即可：

<textarea runat="server" id="xheditor" name="content"class="xheditor" rows="20" cols="100">test</textarea>

打开页面就可以看到xhEditor编辑器了。是不是看起来就很小巧，简单，快速好用呢！？

如何获取值呢：xheditor.Value或者xheditor.InnerText都可以。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="xheditor/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="xheditor/xheditor-1.2.1.min.js"></script>
<script type="text/javascript" src="xheditor/xheditor_lang/zh-cn.js"></script><!-- 不加则显示英文 -->
</head> 
<body>
	<form action="result.jsp" method="post"> 
		<textarea runat="server" id="xheditor" name="content1" class="xheditor" rows="20" cols="100"> 
		</textarea>
		<input type="submit" value="提交">
	</form>
</body>
</html>

  <body>
  <%=request.getParameter("content1") %> 
  </body>
</html>

FCKeditor xhEditor

FCKeditor

xhEditor

相关阅读

相关文章

相关问答