`

Fckeditor编辑器的的使用方法

fckeditor应用服务器浏览器.netServlet 
阅读更多
Fckeditor编辑器的的使用方法Fckeditor编辑器的的使用方法：细看http://www.fckeditor.net/官方网站
Javascript有三种的形式
第一种 
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');//表单的name 
//http://127.0.0.1:8080/fckeditor
//http://127.0.0.1:8080/项目名/fckeditor
oFCKeditor.BasePath = "/ fckeditor /";
oFCKeditor.Create();
</script>

第二种 
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>

<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
basePath要正确的设置，   basePath一定要以‘/’结尾
FCKeditor （fckeditor对象的属性）

  • 属性名 描述                                          默认值
  • Width 宽度                                          100%
  • Height 高度                                           200
  • Value 编辑器初始化内容                        （空字符串）
  • ToolbarSet   工具条集合的名称
    •                 （内置有default和Basic，也可以自己订制） default
  • BasePath 编辑器的基路径                               /fckeditor/ 


<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = " fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
oFCKeditor.width=“50”；
oFCKeditor.height=“400”；
oFCKeditor.Value=“this is value”；
oFCKeditor.ToolbarSet=”Basic”;
oFCKeditor.Create();
}</script>


构造器： 

var FCKeditor=function(instanceName,width,height,toolbarSet,value)


1. 其中instanceName为编辑器输出的textarea元素的那么属性值，必须制定
2. 参数会赋值给同名属性



第三种
这个CreateHtml()方法(AJAX):为AJAX应用程序,你将会设定的内部html动态;例如: 
var div = document.getElementById("myFCKeditor");
var fck = new FCKeditor("myFCKeditor");
div.innerHTML = fck.CreateHtml();


Sample code 1 
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
<form>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "/fckeditor/";
oFCKeditor.Create();
</script>
</form>
</body>
</html>


Sample code 2 
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>



在JSP种通过自定义标签
引用
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>


<FCK:editor instanceName="EditorDefault">
    <jsp:attribute name="value">This is some <strong>sample text</strong>.
      You are using <a href="http://www.fckeditor.net">FCKeditor</a>.
</jsp:attribute> 
</FCK:editor>



1. BasePATH以“/”开头并且这个“/”代表当前工程的路径
2. 一定要设置VALUE属性的值，并且值不能是空字符串

配置fckeditor
编辑有丰富的配置,使其能够定制外观、特征和行为。
主要的配置文件被命名为“fckconfig.js”。你能找到这个文件在根的FCKeditor安装文件夹。（直接修改主配置文件fckconfig.js）
定义单独的配置文件（只需要修改的配置项）
在页面的调用代码中对fckeditor的实例进行配置

配置加载顺序
1. 加载主配置文件fckconfig.js
2. 加载自定义的配置文件（如果有），覆盖相同的配置项
3. 使用对实例的配置覆盖相同的配置项（只对当前实例有效）

一般要需要修改的配置
自定义ToolBarSet ,去掉一些功能
加上几种常用的字体
修改“回车”和“shift + 回车”的换行行为
修改编辑区样式文件
跟换表情图片

在editor/dialog/fck_smiley.html中修改
/dialog.SetAutoSize( true ) ;//不设置图片的宽度
<body style=" overflow: hidden ">
overflow: hidden改成 auto

提示
要使用UFT-8 编码保存配置文件
FCKConfig. BasePath和调用fckeditor时指定的BasePath（FCKConfig. BasePath）不是同一个，其值也不一样


FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath + 'myconfig.js';

使用文件上传
上传文件名为中文的文件时会出现乱码
常见中文目录名会出现乱码
引用中文名的图片不能正常显示
修改Tomcat中URIEncoding（不宜使用）
避免出现引用中文名字图片的情况


//保存文件名
filename=UUID.randomUUID().toString()+"."+extension;


设置允许上传的文件类型 
Flie   image  flash  media









fckeditor.properties 

fckeditor.toolbarSet = Basic
connector.userActionImpl = net.fckeditor.requestcycle.impl.UserActionImpl


注意：
你必须知道如何使用PropertiesHolder。像普通属性文件用法一样,你应该使用它只有在你的网络应用程序启动。,建议你自己写一个ServletContextListener调用初始化servlet的PropertiesLoader类 。所以你应该保证, PropertiesLoader ConnectorServlet之前是不是初始化了。 

package com.companyweb.fckeditor.connector;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.fckeditor.connector.Messages;
import net.fckeditor.handlers.CommandHandler;
import net.fckeditor.handlers.ConnectorHandler;
import net.fckeditor.handlers.ExtensionsHandler;
import net.fckeditor.handlers.RequestCycleHandler;
import net.fckeditor.handlers.ResourceTypeHandler;
import net.fckeditor.response.UploadResponse;
import net.fckeditor.response.XmlResponse;
import net.fckeditor.tool.Utils;
import net.fckeditor.tool.UtilsFile;
import net.fckeditor.tool.UtilsResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FilenameUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

public class ConnectorServlet extends HttpServlet {

	private static final long serialVersionUID = -5742008970929377161L;
	private static final Logger logger = LoggerFactory.getLogger(ConnectorServlet.class);

	
	public void init() throws ServletException, IllegalArgumentException {
		String realDefaultUserFilesPath = getServletContext().getRealPath(
		        ConnectorHandler.getDefaultUserFilesPath());

		File defaultUserFilesDir = new File(realDefaultUserFilesPath);
		UtilsFile.checkDirAndCreate(defaultUserFilesDir);

		logger.info("ConnectorServlet successfully initialized!");
	}

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
	        throws ServletException, IOException {
		logger.debug("Entering ConnectorServlet#doGet");

		response.setCharacterEncoding("UTF-8");
		response.setContentType("application/xml; charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out = response.getWriter();

		String commandStr = request.getParameter("Command");
		String typeStr = request.getParameter("Type");
		String currentFolderStr = request.getParameter("CurrentFolder");

		logger.debug("Parameter Command: {}", commandStr);
		logger.debug("Parameter Type: {}", typeStr);
		logger.debug("Parameter CurrentFolder: {}", currentFolderStr);

		XmlResponse xr;

		if (!RequestCycleHandler.isEnabledForFileBrowsing(request))
			xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.NOT_AUTHORIZED_FOR_BROWSING);
		else if (!CommandHandler.isValidForGet(commandStr))
			xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.INVALID_COMMAND);
		else if (typeStr != null && !ResourceTypeHandler.isValid(typeStr))
			xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.INVALID_TYPE);
		else if (!UtilsFile.isValidPath(currentFolderStr))
			xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.INVALID_CURRENT_FOLDER);
		else {
			CommandHandler command = CommandHandler.getCommand(commandStr);
			ResourceTypeHandler resourceType = ResourceTypeHandler.getDefaultResourceType(typeStr);

			String typePath = UtilsFile.constructServerSidePath(request, resourceType);
			String typeDirPath = getServletContext().getRealPath(typePath);

			File typeDir = new File(typeDirPath);
			UtilsFile.checkDirAndCreate(typeDir);

			File currentDir = new File(typeDir, currentFolderStr);

			if (!currentDir.exists())
				xr = new XmlResponse(XmlResponse.EN_INVALID_FOLDER_NAME);
			else {

				xr = new XmlResponse(command, resourceType, currentFolderStr, UtilsResponse
				        .constructResponseUrl(request, resourceType, currentFolderStr, true,
				                ConnectorHandler.isFullUrl()));

				if (command.equals(CommandHandler.GET_FOLDERS))
					xr.setFolders(currentDir);
				else if (command.equals(CommandHandler.GET_FOLDERS_AND_FILES))
					xr.setFoldersAndFiles(currentDir);
				else if (command.equals(CommandHandler.CREATE_FOLDER)) {
					
					//设定创建的文件夹的名称为中文文件夹
					String tempStr=request.getParameter("NewFolderName");
					
					tempStr =new  String(tempStr.getBytes("ISO8859-1"),"UTF-8");
					
					String newFolderStr = UtilsFile.sanitizeFolderName(tempStr);
					
					logger.debug("Parameter NewFolderName: {}", newFolderStr);

					File newFolder = new File(currentDir, newFolderStr);
					int errorNumber = XmlResponse.EN_UKNOWN;

					if (newFolder.exists())
						errorNumber = XmlResponse.EN_ALREADY_EXISTS;
					else {
						try {
							errorNumber = (newFolder.mkdir()) ? XmlResponse.EN_OK
							        : XmlResponse.EN_INVALID_FOLDER_NAME;
						} catch (SecurityException e) {
							errorNumber = XmlResponse.EN_SECURITY_ERROR;
						}
					}
					xr.setError(errorNumber);
				}
			}
		}

		out.print(xr);
		out.flush();
		out.close();
		logger.debug("Exiting ConnectorServlet#doGet");
	}

	
	@SuppressWarnings("unchecked")
	public void doPost(HttpServletRequest request, HttpServletResponse response)
	        throws ServletException, IOException {
		logger.debug("Entering Connector#doPost");

		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out = response.getWriter();

		String commandStr = request.getParameter("Command");
		String typeStr = request.getParameter("Type");
		String currentFolderStr = request.getParameter("CurrentFolder");

		logger.debug("Parameter Command: {}", commandStr);
		logger.debug("Parameter Type: {}", typeStr);
		logger.debug("Parameter CurrentFolder: {}", currentFolderStr);

		UploadResponse ur;

		// if this is a QuickUpload request, 'commandStr' and 'currentFolderStr'
		// are empty
		if (Utils.isEmpty(commandStr) && Utils.isEmpty(currentFolderStr)) {
			commandStr = "QuickUpload";
			currentFolderStr = "/";
		}

		if (!RequestCycleHandler.isEnabledForFileUpload(request))
			ur = new UploadResponse(UploadResponse.SC_SECURITY_ERROR, null, null,
			        Messages.NOT_AUTHORIZED_FOR_UPLOAD);
		else if (!CommandHandler.isValidForPost(commandStr))
			ur = new UploadResponse(UploadResponse.SC_ERROR, null, null, Messages.INVALID_COMMAND);
		else if (typeStr != null && !ResourceTypeHandler.isValid(typeStr))
			ur = new UploadResponse(UploadResponse.SC_ERROR, null, null, Messages.INVALID_TYPE);
		else if (!UtilsFile.isValidPath(currentFolderStr))
			ur = UploadResponse.UR_INVALID_CURRENT_FOLDER;
		else {
			ResourceTypeHandler resourceType = ResourceTypeHandler.getDefaultResourceType(typeStr);

			String typePath = UtilsFile.constructServerSidePath(request, resourceType);
			String typeDirPath = getServletContext().getRealPath(typePath);

			File typeDir = new File(typeDirPath);
			UtilsFile.checkDirAndCreate(typeDir);

			File currentDir = new File(typeDir, currentFolderStr);

			if (!currentDir.exists())
				ur = UploadResponse.UR_INVALID_CURRENT_FOLDER;
			else {

				String newFilename = null;
				FileItemFactory factory = new DiskFileItemFactory();
				ServletFileUpload upload = new ServletFileUpload(factory);
				//设置上传图片的中编码
				upload.setHeaderEncoding("UTF-8");
				try {

					List<FileItem> items = upload.parseRequest(request);

					// We upload only one file at the same time
					FileItem uplFile = items.get(0);
					String rawName = UtilsFile.sanitizeFileName(uplFile.getName());
					String filename = FilenameUtils.getName(rawName);
					String baseName = FilenameUtils.removeExtension(filename);
					String extension = FilenameUtils.getExtension(filename);
					//保存文件名
					filename=UUID.randomUUID().toString()+"."+extension;
					
					
					//如果这个文件的扩展名不允许上传
					if (!ExtensionsHandler.isAllowed(resourceType, extension))
						ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
					
					//如果文件大小超出限制 2M
					else if (uplFile.getSize()> 2 * 1024 * 1024){
						ur = new UploadResponse(204);
					}
					//如果不存在以上情况，则保存文件
					else {

						// construct an unique file name
						File pathToSave = new File(currentDir, filename);
						int counter = 1;
						while (pathToSave.exists()) {
							newFilename = baseName.concat("(").concat(String.valueOf(counter))
							        .concat(")").concat(".").concat(extension);
							pathToSave = new File(currentDir, newFilename);
							counter++;
						}

						if (Utils.isEmpty(newFilename))
							ur = new UploadResponse(UploadResponse.SC_OK, UtilsResponse
							        .constructResponseUrl(request, resourceType, currentFolderStr,
							                true, ConnectorHandler.isFullUrl()).concat(filename));
						else
							ur = new UploadResponse(UploadResponse.SC_RENAMED,
							        UtilsResponse.constructResponseUrl(request, resourceType,
							                currentFolderStr, true, ConnectorHandler.isFullUrl())
							                .concat(newFilename), newFilename);

						// secure image check
						if (resourceType.equals(ResourceTypeHandler.IMAGE)
						        && ConnectorHandler.isSecureImageUploads()) {
							if (UtilsFile.isImage(uplFile.getInputStream()))
								uplFile.write(pathToSave);
							else {
								uplFile.delete();
								ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
							}
						} else
							uplFile.write(pathToSave);

					}
				} catch (Exception e) {
					ur = new UploadResponse(UploadResponse.SC_SECURITY_ERROR);
				}
			}

		}

		out.print(ur);
		out.flush();
		out.close();

		logger.debug("Exiting Connector#doPost");
	}

}

 










<script type="text/javascript" src="${pageContext.request.contextPath}/fckeditor/fckeditor.js">	</script>
	<script type="text/javascript">
	var myEditor=new FCKEditor("content");
	myEditor.BasePath="${pageContext.request.contextPath}/fckeditor/";
	myEditor.ReplaceTextarea();
</script>


引用样式 
@import url（../../../css/ccs_all.css）;

加入的论坛和其他的应用主要设置的：
给编辑区增加CSS样式
使用自定义ToolbarSet
修改其他需要修改的配置
去掉页面中部分功能（浏览服务器按钮等）
设置允许上传的文件的大小 ，
修改页面的文字和提示语

分享到：
| log4j.properities的配置
评论
发表评论

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

相关推荐

    fckeditor编辑器使用方法

    ### fckeditor编辑器使用方法详解 fckeditor，现在更名为了CKEditor，是一款功能强大、易于集成的富文本编辑器，广泛应用于各种Web应用程序中，为用户提供了一个接近于桌面编辑软件的在线编辑体验。本文将从...

    FCKeditor编辑器hwp363

    FCKeditor编辑器hwp363FCKeditor编辑器hwp363FCKeditor编辑器hwp363 FCKeditor编辑器hwp363FCKeditor编辑器hwp363 FCKeditor编辑器hwp363

    FCKeditor 网页在线编辑器的使用方法

    FCKeditor是一个支持所见即所得（WYSIWYG，即What You See Is What You Get）功能的网页在线文本编辑器，它使得网页内容的编辑更加直观便捷，类似于在使用微软Office软件时编辑文档的感觉。FCKeditor允许用户在网页...

    fckeditor编辑器文件及dll打包

    fckeditor编辑器文件及dll打包 fckeditor编辑器文件及dll打包 fckeditor编辑器文件及dll打包

    最新FCKeditor_2.6 版本 FCKeditor编辑器和控件

    在页面中，使用的是FCKeditor控件，该控件需要知道FCKeditor编辑器文件组的路径。有两种配置方法。 （1）配置web.config 在appSettings配置节中加入 &lt;add key="FCKeditor:BasePath" value="~/PathOfFCKeditor/" ...

    php中使用fckeditor编辑器

    通过本文的详细介绍，相信读者已经掌握了如何在PHP项目中安装和使用FCKeditor编辑器的方法。FCKeditor的强大之处在于其灵活性和扩展性，用户可以根据项目需求自定义编辑器的各种设置。此外，由于FCKeditor是开源软件...

    fckeditor 编辑器 和使用说明

    **fckeditor编辑器详解** fckeditor是一款开源的Web富文本编辑器，它为网页开发者提供了一个强大而便捷的工具，允许用户在浏览器端编辑HTML内容，就像在桌面应用中一样。这款编辑器以其丰富的功能、良好的兼容性和...

    asp.net文本编辑器FCKeditor使用方法详解

    ASP.NET 文本编辑器 FCKeditor 使用方法详解 FCKeditor 是一个功能强大且流行的 ASP.NET 文本编辑器，提供了许多实用的功能，如格式化文本、插入图片、上传文件、创建表格等。下面将详细介绍如何使用 FCKeditor 在 ...

    fckeditor编辑器插件

    《fckeditor编辑器插件深度解析与应用》 在网页内容编辑领域，fckeditor是一款备受开发者青睐的开源富文本编辑器。它提供了丰富的文本格式化功能，使得用户可以在浏览器端进行类似于Word般的文本编辑操作。本文将...

    文本编辑器FCKeditor使用方法详解--图文详解

    【FCKeditor使用方法详解】 FCKeditor是一款强大的开源文本编辑器，主要用于在网页中创建和编辑富文本内容。它的功能强大，支持多种语言，并且提供了丰富的API供开发者进行自定义扩展。以下是对FCKeditor使用方法的...

    fckeditor编辑器 （已配置好）

    **FCKeditor编辑器简介** FCKeditor是一款开源的网页文本编辑器，它允许用户在浏览器端进行富文本编辑，提供了类似Word的编辑界面，支持多种格式的文本内容输入，如HTML、CSS样式等。这款编辑器在Web开发中被广泛...

    fckeditor文档编辑器插件

    **fckeditor文档编辑器插件详解** ...虽然现在已经有了更先进的替代品，但理解它的运作原理和使用方法对于理解富文本编辑器的工作机制仍然十分有益。在实际项目中，可以根据需求选择合适的编辑器，提升用户体验。

    fckeditor在线编辑器

    4. 使用`ReplaceTextarea()`方法将原有的多行文本框替换为FCKeditor编辑器。 如果需要实现图片上传功能，还需要以下步骤： 1. 引入必要的Java库文件，包括fckeditor-java-core-2.4.1.jar（FCKeditor核心）、commons...

    FCKeditor编辑器

    **FCKeditor编辑器**是曾经非常流行的一款开源富文本编辑器，主要用于网页内容的创建和编辑。它提供了丰富的文本格式化选项，如字体、大小、颜色调整，以及插入图片、链接、表格等功能，使得非程序员也能轻松创建...

    fckeditor编辑器上传文件（含视频音频）详细配置

    在页面中，使用的是FCKeditor控件，该控件需要知道FCKeditor编辑器文件组的路径。有两种配置方法。 （1）配置web.config 在appSettings配置节中加入 &lt;add key="FCKeditor:BasePath" value="~/PathOfFCKeditor/" /&gt; ...

    FCKeditor编辑器2.63(解决无法上传文件)

    FCKeditor是一款经典的开源富文本编辑器，广泛应用于ASP.NET平台。版本2.63针对之前版本中的上传文件问题进行了修复，确保用户可以顺畅地在编辑器中上传各种文件，如图片、文档等，这对于网站内容管理和用户交互具有...

    FckEditor在线编辑器

    FckEditor是一款强大的开源在线文本编辑器，广泛应用于网站建设和内容管理系统中，为用户提供类似桌面文字处理软件的编辑体验。它的全称为“FCKeditor”，最初由Fernando Goycoolea创建，后来更名为CKEditor。这款...

    ThinkPHP中FCKeditor编辑器的使用

    ThinkPHP中FCKeditor编辑器的使用 前段时间一直为TP寻找好用的在线编辑器而苦恼，经过多次尝试与修改后，终于成功地将编辑器集成到Thinkphp里面。 而且可以用直接上传和ajax两种方式处理内容。为了给一些还没能成功...

    HTML 文本编辑器FCKeditor

    **FCKeditor：一个强大的HTML文本编辑器** ...了解并掌握其使用方法和API，可以帮助开发者构建更高效、更友好的在线编辑环境。尽管FCKeditor已经不再更新，但它的设计理念和技术思路仍然值得学习和借鉴。

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