FCKeditor资料下载及介绍
官方网站:http://www.fckeditor.net
1.下载FCKeditor *.*.*
2.下载fckeditor-java-*.*.*-bin.zip
3.下载fckeditor-java-demo-*.*.*.war (可作为参考)
demo的查看、doc文档的查看
下载的说明,涉及java还得下个包 war工程的查看
安装与通过JavaScript调用FCKeditor的两种方法
部署:拷贝到webroot下
fckeditor的调用方式:
1.通过javascript调用
2.在jsp中通过自定义标签调用
参考方式: 附带的例子 samples里 文档
通过javascript调用
方法一:
代码如下 | 复制代码 |
<script type="text/javascript" src="fckeditor/fckeditor.js"></script> <script type="text/javascript"><!-- 编辑器创建 --> var oFCKeditor = new FCKeditor("FCKeditor1"); oFCKeditor.BasePath = "/test/fckeditor/";<!-- fckedior绝对路径,/结尾 --> oFCKeditor.Create(); </script> |
方法二:
代码如下 | 复制代码 |
<script type="text/javascript" src="fckeditor/fckeditor.js"></script> <head></head>里添加 <script type="text/javascript"> window.onload=function(){ var oFCKeditor = new FCKeditor("MyTextarea");<!-- 下面指定 --> oFCKeditor.BasePath = "fckeditor/";<!-- fckedior相对路径,/结尾 --> oFCKeditor.ReplaceTextarea(); } < /script> <body></body>里添加 <textarea id="MyTextarea" name="MyTextarea">this is</textarea> |
注意:BasePath要正确的设置 BasePath一定要以“/”结尾
fckeditor对象属性
Width 默认100%
Height 默认200
ToolbarSet 默认default
BasePath 默认/fckeditor/
构造器
var FCKeditor = function(instanceName,width,height,toolbarSet,value)
instanceName为编辑器输出的textarea元素的name属性值,必须指定
参数会赋值给同名属性
在jsp中通过自定义标签调用FCKeditor
参考 演示工程 帮助文档 jar文件拷贝
步骤: 拷贝jar文件
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<FCK:editor instanceName="myEditor" basePath="/fckeditor" value="haha"></FCK:editor>
注意:basePath要以“/”开头,/代表当前工程路径 一定要设置value属性的值,并且值不能为空字符串
配置_使用配置文件
webroot下创建myconfig.js文件
FCKConfig.AutoDetectLanguage=false; 自动检测语言
FCKConfig.DefaultLanguage="fr";
在默认的配置文件里
一、FCKConfig.CustomConfigurationsPath='/test/myconfig.js';
二、在创建编辑器时指定下 oFCKeditor.Config["CustomConfigurationsPath"]="/test/myconfig.js"; 只对当前有效
配置FCKeditor三种方式
直接修改主配置文件 fckconfig.js
定义单独的配置文件(只需用写需要修改的配置项)
在页面的调用代码中对FCKeditor的实例进行配置
配置加载顺序
1.加载主配置文件fckconfig.js
2.加载自定义的配置文件(如果有),覆盖相同的配置项
3.使用对实例的配置覆盖相同的配置项(只对当前实例有效)
提示
系统会自动侦测并运用适当的界面语言(默认,可以修改)
不能删除主配置文件fckconfig.js
修改配置后要清空浏览器缓存,以免影响结果 (或访问时强制刷新也可以) IE:Ctrl+F5 Firefox:Shift+Ctrl+R
配置_一般需要修改的配置
一般需要修改的配置
自定义ToolbarSet,去掉一些功能
加上几种常用的字体
修改"回车"和"Shift+回车"的换行行为
修改编辑区的样式
更换表情图片
自定义ToolbarSet,去掉一些功能
先自定义工具集再引用该工具集
关于自定义工具集选择的工具看 '-'代表分隔符'|' '/'代表换行符
加上几种常用的字体
FCKConfig.FontNames = '实体;楷体_GB2312;黑体;隶书;Times New Roman;Arial';
修改"回车"和"Shift+回车"的换行行为
FCKConfig.EnterMode = 'br'; // p | div | br
FCKConfig.ShiftEnterMode = 'p';
修改编辑区的样式
文件路径 FCKConfig.basePath下 alert()下就知道在哪了
配置_更换表情图片
配置选项
FCKConfig.SmileyPath = ''; //文件路径
FCKConfig.SmileyImages = ['','']; //路径下的图片名称
FCKConfig.SmileyColumns = 8; //每行显示数量
FCKConfig.SmileyWindowWidth = 320; //窗体宽度
FCKConfig.SmileyWindowHeight =210; //窗体高度
单个添加更换或整个文件夹更换 想添加滚动条,查看窗体的文件进行修改
FCKConfig.CustomConfigurationsPath='/test/myconfig.js';
工程不确定,应该修改为 FCKConfig.CustomConfigurationsPath=FCKConfig.EditorPath+'myconfig.js';
注意: 自定义的配置文件要使用UTF-8编码保存
FCKConfig.BasePath和调用fckeditor时指定的 BasePath(FCKeditor.BasePath)不是同一个,其值也不一样
文件上传_基本使用
使用看java关联的文档
步骤 在web.xml文件添加一个servlet
代码如下 | 复制代码 |
<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> |
在classpath下新建fckeditor.properties //名字路径不能改变
里面内容
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
文件上传_问题一_上传中文名的文件会出现乱码
使用文件上传会遇到下面问题
上传中文名的文件会出现乱码
创建中文名的目录时会出现乱码
引用的中文名字的图片不能正常显示 解决:写个servlet把post方法中setHeaderEncoding("utf-8");
代码如下 | 复制代码 |
package com.fck.fckeditor; /* import java.io.File; import javax.servlet.ServletException; import net.fckeditor.connector.Messages; import org.apache.commons.fileupload.FileItem; /** private static final long serialVersionUID = -5742008970929377161L; /** File defaultUserFilesDir = new File(realDefaultUserFilesPath); logger.info("ConnectorServlet successfully initialized!"); /** response.setCharacterEncoding("UTF-8"); String commandStr = request.getParameter("Command"); logger.debug("Parameter Command: {}", commandStr); XmlResponse xr; if (!RequestCycleHandler.isEnabledForFileBrowsing(request)) String typePath = UtilsFile.constructServerSidePath(request, resourceType); File typeDir = new File(typeDirPath); File currentDir = new File(typeDir, currentFolderStr); if (!currentDir.exists()) xr = new XmlResponse(command, resourceType, currentFolderStr, UtilsResponse if (command.equals(CommandHandler.GET_FOLDERS)) File newFolder = new File(currentDir, newFolderStr); if (newFolder.exists()) out.print(xr); /** response.setCharacterEncoding("UTF-8"); String commandStr = request.getParameter("Command"); logger.debug("Parameter Command: {}", commandStr); UploadResponse ur; // if this is a QuickUpload request, 'commandStr' and 'currentFolderStr' if (!RequestCycleHandler.isEnabledForFileUpload(request)) String typePath = UtilsFile.constructServerSidePath(request, resourceType); File typeDir = new File(typeDirPath); File currentDir = new File(typeDir, currentFolderStr); if (!currentDir.exists()) String newFilename = null; List<FileItem> items = upload.parseRequest(request); // We upload only one file at the same time // construct an unique file name if (Utils.isEmpty(newFilename)) // secure image check } } out.print(ur); logger.debug("Exiting Connector#doPost"); } |
问题二_创建中文名的目录时会出现乱码
解决:在servlet的get方法,当request.getParameter("");之后重新编码
问题三_引用的中文名字的图片不能正常显示
解决:
方案一:修改tomcat的servlet.xml在<Connector>添加URIEncoding="UTF-8" 不推荐使用,因为将对创建中文文件夹有影响
方案二:避免使用中文名称保存图片,在servlet修改,采用UUID随机设置名称
文件上传允许上传的文件类型
a.控制允许上传的文件类型
FCKeditor把文件的上传分成4类
File
Image
Flash
Media
b.设置允许上传的文件扩展名列表 禁止上传的文件扩展名列表 只能配置一项
c.修改时除了media客户端不用设置,其它的客户端和服务器端都必须设置,且设置相同
文件上传允许上传的文件的大小
步骤: 在服务器端的servlet中,在保存文件之前先判断一下文件的大小,
如果超出限制,就传递一个自定义的错误码,并且不再保存文件 修改对应界面的回调函数,增加对这个自定义的错误码的处理
在表单中使用FCKeditor a.一般都放在表单中提交,只要放在<form></form>中 b.通过fckeditor提交的中文内容,在服务器端得到的为乱码的解决