FCKeditor学习笔记Word文档下载推荐.docx
- 文档编号:16163398
- 上传时间:2022-11-21
- 格式:DOCX
- 页数:15
- 大小:373.05KB
FCKeditor学习笔记Word文档下载推荐.docx
《FCKeditor学习笔记Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《FCKeditor学习笔记Word文档下载推荐.docx(15页珍藏版)》请在冰豆网上搜索。
(4)可以通过Eclipse的ProjectDeployments窗口、点中某个已经部署的项目,点击Borwse来打开对应的部署目录
3_安装与通过JavaScript调用FCKeditor的两种方法
(1)新建javaweb工程test,同时打开网站文档:
Developer’sGuide
(2)查看Installation,把fckeditor-java-2.4.1-bin.jar解压后的文件夹中的fckeditor文件夹拷贝到工程的webroot文件夹下
(3)Fckeditor的调用方式有两种:
通过JavaScript调用,或者在jsp中通过自定义标签调用
(4)通过JavaScript调用,可以参考附带的例子或者文档:
例子可以在_samples/default.Html中右键查看源代码,文档可以看Integration下的JavaScript。
(5)新建test1.html,测试第1种方法。
引入js文件后,拷贝文档中的代码时注意:
oFCKeditor.BasePath="
/fckeditor/"
;
其中/fckeditor/指的是http:
//localhost:
8080/fckeditor/,应修改为http:
8080/test/fckeditor/,因此修改该句为oFCKeditor.BasePath="
/test/fckeditor/"
或者也可以使用相对路径,oFCKeditor.BasePath="
fckeditor/"
另外"
一定要以斜线结尾,否则出错
(6)新建test2.html,测试第2种方法.引入js文件后,拷贝文档中的代码,同样修改oFCKeditor.BasePath语句,引入<
textareaid="
MyTextarea"
rows="
15"
cols="
4"
name="
abc"
>
thisisthedefault<
/textarea>
要求name或者id属性与varoFCKeditor=newFCKeditor('
MyTextarea'
)中指定的名字一致
(7)结论:
BasePath一定要正确设置,一定要以"
/"
结尾
(8)FCKeditor属性:
(9)通过设置这些属性,在test1.Html中进行测试
(10)varFCKeditor=function(instanceName,width,height,toolbarSet,value),instanceName是为编辑器输出的textarea元素的name属性的值,必须指定;
其他各参数可以指定或不指定,指定则会赋值给同名属性
4_在jsp中通过自定义标签调用FCKeditor
(1)在jsp中通过自定义标签调用FCKeditor
(2)两个地方可以参考:
fckeditor-java-demo-2.4.1.war,以及文档:
fckeditor-java-2.4.1-bin解压后的文件夹中的site/index.html为文档,看Reference下的taglib
(3)注意不要用鼠标点右键方式查看源码,要直接看jsp文件
(4)建立editor.jsp,拷贝jar包到web-inf\lib下:
fckeditor-java-2.4.1-bin\fckeditor-java-2.4.1\fckeditor-java-core-2.4.1.jar,
以及fckeditor-java-2.4.1-bin\fckeditor-java-2.4.1\lib文件夹下的3个jar包:
commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar文件上传用,slf4j-api-1.5.2.jar日志用
(5)Tld文件已经在fckeditor-java-core-2.4.1.jar\META-INF\FCKeditor.tld,不用拷贝
(6)Jsp文件中引入tld文件<
%@tagliburi=””prefix=”FCK”%>
(7)写标签<
FCK:
editorinstanceName=””value=””BasePath=”/fckeditor”/>
,必须要instanceName,各种属性与javascript中的含义一致,BasePath需要以”/”开头,代表工程根目录
(8)访问有异常,少了jar包,来到演示工程的web-inf/lib下,考入了另一个关于日志的jar包,redeploy
(9)注意value属性不能不指定或者为空字符串,必须指定值,可以为一个空格
5_配置_使用配置文件
(1)配置可以参看文档docs下的FCKeditor2.xDevelopers’GuideConfigurationconfigurationfile
(2)文档指出,在fckedior文件夹下存在fckconfig.js文件,修改配置可以直接修改这个文件,但是一般不采取这个方法,文档说明可以采用一个额外的配置文件对默认配置进行覆盖
(3)在fckeditor文件夹之外(便于升级)新建自己的js配置文件。
覆盖部分属性,比如:
FCKConfig.AutoDetectLanguage=false;
FCKConfig.DefaultLanguage="
zh"
;
(4)然后说明自己的配置文件的位置,根据文档有两种方法:
1是在fckconfig.js中说明,但这样修改了原来的文件。
第一个斜线代表当前站点的路径,因此需要在文件名前加上/站点名。
FCKConfig.CustomConfigurationsPath='
/test/myconfig.js'
2是在页面中说明
varoFCKeditor=newFCKeditor("
FCKeditor1"
);
oFCKeditor.Config["
CustomConfigurationsPath"
]="
/myconfig.js"
oFCKeditor.Create();
(5)小结:
(6)注意事项:
6_配置_一般需要修改的配置
(1)自定义ToolbarSet,去掉一些功能
(2)默认字体较少,仅几种英文字体,需要增加
(3)默认回车是分段,需要修改为仅换行
(4)修改编辑区样式文件
(5)更换表情图片
(6)参考资料:
docsFCKeditor2.xDevelopersGuideConfigurationConfigurationOptions
(7)可以看到fckconfig.js中的FCKConfig.ToolbarSets["
Default"
]和FCKConfig.ToolbarSets["
Basic"
]分别定义了工具栏。
根据文档,””中为功能模块,[]可以用于分成不同的区,’-‘用于增加|间隔符,’/’用于换行
(8)在myconfig.js中复制FCKConfig.ToolbarSets["
]的内容,修改名称为”itcastbbs”,和功能项;
然后在javascript中(javascript的第二种方式)设定oFCKeditor.ToolbarSet=”itcastbbs”(注意要指定配置文件,否则报错)。
注意,如果以jsp标签的形式改变ToolbarSet,应在<
FCK:
editor>
标签中用toolbarSet属性指定,而不是在<
config>
中设置
(9)修改增加字体:
FCKConfig.FontNames=‘宋体;
楷体;
黑体;
隶书;
TimesNewRoman;
Arial’;
保存报错,因为默认是ISO-8859-1,需要右击该js文件属性resourceTextfileencoding下的other修改为UTF-8
(10)修改回车和shift+回车的模式:
FCKConfig.EnterMode='
p'
//p|div|br
FCKConfig.ShiftEnterMode='
br'
//p|div|br
‘p’表示段落,’br’表示换行,’div’
进行相应的修改
(11)修改编辑区样式文件:
FCKConfig.EditorAreaCSS=FCKConfig.BasePath+'
css/fck_editorarea.css'
这里的FCKConfig.BasePath不同于页面上的oFCKeditor.BasePath属性,使用alert()方法输出该属性的值,来进行相应的修改。
可以看到值是项目路径下的fckeditor/editor/文件夹,可以找到相应的样式文件进行修改
7_配置_更换表情图片
(1)与表情文件相关的配置项:
FCKConfig.SmileyPath=FCKConfig.BasePath+'
images/smiley/msn/'
FCKConfig.SmileyImages=['
regular_smile.gif'
'
sad_smile.gif'
wink_smile.gif'
teeth_smile.gif'
confused_smile.gif'
tounge_smile.gif'
embaressed_smile.gif'
omg_smile.gif'
whatchutalkingabout_smile.gif'
angry_smile.gif'
angel_smile.gif'
shades_smile.gif'
devil_smile.gif'
cry_smile.gif'
lightbulb.gif'
thumbs_down.gif'
thumbs_up.gif'
heart.gif'
broken_heart.gif'
kiss.gif'
envelope.gif'
];
FCKConfig.SmileyColumns=8;
FCKConfig.SmileyWindowWidth=320;
FCKConfig.SmileyWindowHeight=210
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FCKeditor 学习 笔记