fckeditor视频教程
======= fckeditor视频教程 [汤阳光]========
第一课、演示使用了FCKeditor的论坛
a.演示fekeditor使用
第二课、资料下载及介绍
a.官方网站:http://www.fckeditor.net
b.demo的查看、doc文档的查看
c.下载的说明,涉及java还得下个包
d.war工程的查看
第三课、安装与通过JavaScript调用FCKeditor的两种方法
a.部署:拷贝到webroot下
b.fckeditor的调用方式:
.通过javascript调用
.在jsp中通过自定义标签调用
c.参考方式:
.附带的例子 samples里
.文档
d.通过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>
方法三:
e.注意:BasePath要正确的设置 BasePath一定要以“/”结尾
f.fckeditor对象属性
Width 默认100%、Height 默认200、Value、
ToolbarSet 默认default,basic、BasePath 默认/fckeditor/
g.构造器
var FCKeditor = function(instanceName,width,height,toolbarSet,value)
.instanceName为编辑器输出的textarea元素的name属性值,必须指定
.参数会赋值给同名属性
第四课、在jsp中通过自定义标签调用FCKeditor
a.参考
.演示工程
.帮助文档
b.jar文件拷贝
c.步骤:
.拷贝jar文件
.<%@ taglib uri="http://java.fckeditor.net " prefix="FCK" %>
.<FCK:editor instanceName="myEditor" basePath="/fckeditor" value="haha"></FCK:editor>
d.注意:basePath要以“/”开头,/代表当前工程路径
一定要设置value属性的值,并且值不能为空字符串
第五课、配置_使用配置文件
a.webroot下创建myconfig.js文件
b.FCKConfig.AutoDetectLanguage=false; 自动检测语言
FCKConfig.DefaultLanguage="fr";
c.在默认的配置文件里
一、FCKConfig.CustomConfigurationsPath='/test/myconfig.js';
二、在创建编辑器时指定下
oFCKeditor.Config["CustomConfigurationsPath"]="/test/myconfig.js"; 只对当前有效
d.配置FCKeditor三种方式
.直接修改主配置文件 fckconfig.js
.定义单独的配置文件(只需用写需要修改的配置项)
.在页面的调用代码中对FCKeditor的实例进行配置
e.配置加载顺序
1.加载主配置文件fckconfig.js
2.加载自定义的配置文件(如果有),覆盖相同的配置项
3.使用对实例的配置覆盖相同的配置项(只对当前实例有效)
f.提示
.系统会自动侦测并运用适当的界面语言(默认,可以修改)
.不能删除主配置文件fckconfig.js
.修改配置后要清空浏览器缓存,以免影响结果
(或访问时强制刷新也可以) IE:Ctrl+F5 Firefox:Shift+Ctrl+R
第六课、配置_一般需要修改的配置
a.一般需要修改的配置
.自定义ToolbarSet,去掉一些功能
.加上几种常用的字体
.修改"回车"和"Shift+回车"的换行行为
.修改编辑区的样式
.更换表情图片
b.自定义ToolbarSet,去掉一些功能
先自定义工具集再引用该工具集
关于自定义工具集选择的工具看视频 '-'代表分隔符'|' '/'代表换行符
c.加上几种常用的字体
FCKConfig.FontNames = '实体;楷体_GB2312;黑体;隶书;Times New Roman;Arial';
d.修改"回车"和"Shift+回车"的换行行为
FCKConfig.EnterMode = 'br'; // p | div | br
FCKConfig.ShiftEnterMode = 'p';
e.修改编辑区的样式
文件路径 FCKConfig.basePath下 alert()下就知道在哪了
第七课、配置_更换表情图片
a.配置选项
FCKConfig.SmileyPath = ''; //文件路径
FCKConfig.SmileyImages = ['','']; //路径下的图片名称
FCKConfig.SmileyColumns = 8; //每行显示数量
FCKConfig.SmileyWindowWidth = 320; //窗体宽度
FCKConfig.SmileyWindowHeight =210; //窗体高度
b.单个添加更换或整个文件夹更换
想添加滚动条,查看窗体的文件进行修改
c.FCKConfig.CustomConfigurationsPath='/test/myconfig.js';
工程不确定,应该修改为
FCKConfig.CustomConfigurationsPath=FCKConfig.EditorPath+'myconfig.js';
d.注意:
.自定义的配置文件要使用UTF-8编码保存
.FCKConfig.BasePath和调用fckeditor时指定的
BasePath(FCKeditor.BasePath)不是同一个,其值也不一样
第八课、文件上传_基本使用
a.使用看java关联的文档
b.步骤
.在web.xml文件添加一个servlet
.在classpath下创建fckeditor.properties //名字路径不能改变
里面内容connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
第九课、文件上传_问题一_上传中文名的文件会出现乱码
a.使用文件上传会遇到下面问题
.上传中文名的文件会出现乱码
.创建中文名的目录时会出现乱码
.引用的中文名字的图片不能正常显示
b.解决:写个servlet把post方法中setHeaderEncoding("utf-8");
第十课、问题二_创建中文名的目录时会出现乱码
a.解决:在servlet的get方法,当request.getParameter("");之后重新编码
第十一课、问题三_引用的中文名字的图片不能正常显示
a.解决:
方案一:修改tomcat的servlet.xml在<Connector>添加URIEncoding="UTF-8"
不推荐使用,因为将对创建中文文件夹有影响
方案二:避免使用中文名称保存图片,在servlet修改,采用UUID随机设置名称
第十二课、文件上传允许上传的文件类型
a.控制允许上传的文件类型
.FCKeditor把文件的上传分成4类
.File
.Image
.Flash
.Media
b.设置允许上传的文件扩展名列表
禁止上传的文件扩展名列表
只能配置一项
c.修改时除了media客户端不用设置,其它的客户端和服务器端都必须设置,且设置相同
第十三课、文件上传允许上传的文件的大小
a.步骤:
.在服务器端的servlet中,在保存文件之前先判断一下文件的大小,
如果超出限制,就传递一个自定义的错误码,并且不再保存文件
.修改对应界面的回调函数,增加对这个自定义的错误码的处理
第十四课、在表单中使用FCKeditor
a.一般都放在表单中提交,只要放在<form></form>中
b.通过fckeditor提交的中文内容,在服务器端得到的为乱码的解决
这是我没去传智播客之前总结的,那时就没汤老师那具有魅力的声音给吸引了,当在传智播客第一次看见汤老师时,当时很惊讶,哇噻!帅呆了,So young!!而且讲课讲的非常好,关键给与的解答很全面,解决问题而不是直接根据他的经验就指出错误之处,而是先帮我们分析流程,应该怎样去排除错误,在按流程去寻找错误!!