Fckeditor jsp使用实例,自定义Fckeditor的工具栏

jsp页面引入script

1.下载Fckeditor插件,放入项目web目录中

http://pan.baidu.com/s/1bn0DIeb  (下载自互联网)

2.根据自己的路径设置src

<script type="text/javascript" src="fckeditor/fckeditor.js"></script>

3.获取当前项目的网络URL地址

<%
//web URL
String realPath = "http://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath()+request.getServletPath().substring(0,request.getServletPath().lastIndexOf("/")+1);
//out.println("<br>web URL 路径:"+realPath+"fckeditor/");  
%>

4.添加到forn表单中

<script type="text/javascript">
var oFCKeditor = new FCKeditor('content');
        oFCKeditor.BasePath = "<%=realPath%>fckeditor/";
        oFCKeditor.Height=300;
        oFCKeditor.Width='100%';
        oFCKeditor.ToolbarSet='ZqqToolbar';
       //oFCKeditor.Value="111111";//默认值,此处修改时,使用读取出的数据,如: oFCKeditor.Value='<%=content%>';      内容中有html和css之类的标签,建议此处使用单引号,或者转换 content 中的标签符号。
         oFCKeditor.Create();
 </script>

5.自定义插件

Fckeditor默认有三种皮肤:default、office2003和silver。
设置皮肤:
   打开fckeditor下的fckconfig.js
      找到FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
         修改default为office2003或silver。
这样皮肤就修改成功了(注意:skins目录在editor下,配置path的时候不需要加上这个目录)。
自定义工具栏:
同样在fckeditor下找到fckconfig.js
找到FCKConfig.ToolbarSets[""]=[];
在fckconfig中已经存在两个工具栏样式Default和Basic.


Default的功能最全面,代码如下:
 FCKConfig.ToolbarSets["Default"] = [
    ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],       ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
    '/',
    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
    ['OrderedList','UnorderedList','-,'Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Style','FontFormat','FontName','FontSize'],
    ['TextColor','BGColor'],
    ['FitWindow','ShowBlocks','-','About']
] ;


可以把工具栏想象为是一个数组,每一对[]中存放的所一个工具的集合,在工具栏上显示为一个竖立的分割符(看工具栏最前面)。每一对[]之间以逗号(,)分开。在同一个[]中,可以使用'-'形成竖立的分割符(和前面的不一样),每个功能按钮与数组中的''对应。如果工具栏还行,使用'/'符号。
举例如下(下面是定义的一个只处理文字的工具栏):
FCKConfig.ToolbarSets["zjc"] = [
    ['Bold','Italic','Underline','TextColor','Image','Smiley','-,'Link','Unlink'], 
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    '/',
['FontFormat','FontName','FontSize']
] ;


6.按钮自定义说明

EditSource      显示HTML源代码
StrikeThrough 删除线
Save               保存
NewPage        新建空白页面
Superscrīpt    上标
Subscrīpt        下标
Preview          预览
JustifyLeft       左对齐
Cut                 剪切
Copy              复制
Paste             粘贴
JustifyCenter 居中对齐
JustifyRight     右对齐
JustifyFull       两端对齐
PasteText       纯文本粘贴
InsertOrderedList 自动编号
PasteWord    来自Word的粘贴
InsertUnorderedList 项目符号
Print             打印
Outdent        减少缩进
SpellCheck 拼写检查
Indent          增加缩进
Find             查找
ShowTableBorders 显示表格线
Replace       替换
ShowDetails 显示明细
Undo            撤销
Form            添加Form动作
Redo            还原
Checkbox     复选框
SelectAll      全选
Radio          单选按钮
RemoveFormat 去除格式
Input            单行文本框
Link             插入/编辑 链接
Textarea    滚动文本框
RemoveLink 去除连接
Select          下拉菜单
Anchor 锚点
Button         按钮
Image          插入/编辑 图片
ImageButton 图片按钮
Table            插入/编辑 表格
Hidden    隐藏
Rule              插入水平线
Zoom            显示比例
SpecialChar 插入特殊字符
FontStyleAdv 系统字体
UniversalKey 软键盘
FontStyle      字体样式
Smiley          插入表情符号
FontFormat 字体格式
About           关于
Font             字体
Bold             粗体
FontSize      字体大小
Italic            斜体
TextColor     文字颜色
Underline    下划线
BGColor       背景色




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值