智睿软件_技术交流论坛综合站长Web页面设计 → fckeditor 最新版本ckeditor配置与精简详解


  共有20144人关注过本帖平板打印

主题:fckeditor 最新版本ckeditor配置与精简详解

帅哥哟,离线,有人找我吗?
zhirui
  1楼 个性首页 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:管理员 帖子:520 积分:8740 威望:0 精华:5 注册:2009-07-07
fckeditor 最新版本ckeditor配置与精简详解  发帖心情 Post By:2011-01-04 10:02:30

一、使用方法:

1、在页面<head>中引入ckeditor核心文件ckeditor.js

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

2、在使用编辑器的地方插入HTML控件<textarea>

<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>

如果是ASP.NET环境,也可用服务器端控件<TextBox>

<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>

注意在控件中加上 class="ckeditor" 。

3、将相应的控件替换成编辑器代码

<script type="text/javascript">
CKEDITOR.replace('TextArea1');
//如果是在ASP.NET环境下用的服务器端控件<TextBox>
CKEDITOR.replace('tbContent');
//如果<TextBox>控件在母版页中,要这样写
CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');
</script>

4、配置编辑器

    ckeditor的配置都集中在 ckeditor/config.js 文件中,下面是一些常用的配置参数:

// 界面语言,默认为 'en'

    config.language = 'zh-cn';

// 设置宽高

    config.width = 400;

    config.height = 400;

// 编辑器样式,有三种:'kama'(默认)、'office2003'、'v2'

    config.skin = 'v2';

// 背景颜色

    config.uiColor = '#FFF';

// 工具栏(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js

    config.toolbar = 'Basic';

    config.toolbar = 'Full';

    这将配合:
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];

 


支持(0中立(0反对(0回到顶部