Fckeditor编辑器的的使用方法

程序员文章站 2022-05-26 14:26:44

...

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对象的属性）

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

<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

[size=xx-large]fckeditor.properties[/size]

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
修改其他需要修改的配置
去掉页面中部分功能（浏览服务器按钮等）
设置允许上传的文件的大小，
修改页面的文字和提示语

相关标签： fckeditor 应用服务器浏览器 .net Servlet

上一篇： vscode中使用markdown

下一篇： Python读取Word（.docx）正文信息的方法

Fckeditor编辑器的的使用方法

cad自带的修复命令该怎么使用?cad修复命令的使用方法

PHP下通过file_get_contents的代理使用方法

剪映APP怎么给视频添加咔嚓特效? 剪映咔嚓特效的使用方法

jquery插件lazyload.js延迟加载图片的使用方法

python cx_Oracle的基础使用方法(连接和增删改查)

C4D熨烫工具有什么作用? C4D熨烫工具的使用方法

adobe gamma是什么程序以及它的使用方法

驱动精灵的作用以及使用方法

ueditor编辑器怎么修改复制粘贴文档源代码的字体?

石青微信营销大师软件的使用方法图文教程