新闻中心
消费主张 IT业界 今日观察 消费警示 曝光台 热点专栏 奇闻趣事 一语惊人 专利之窗 动态备忘
领券购
生活必须 吃货优选 学习艺术 旅游出行 手机电脑 电子电器 热血男装 热销女装
图片中心
美女欣赏 风景欣赏 艺术欣赏 实物图片 制作美图 生活图片
下载中心
手机软件 语文数学 常用软件 红绿软件 信息社政 音体美合 科学自然 英语外语
映讯频道
浓缩电影 邻国热剧 一技之长 艺术无界 教育教学 纪录之窗 战争片 动作片 情感片 国内片 喜剧片 恐怖片 科幻片 大陆剧 港澳台剧 动漫片 明星云集 欧美剧集
聚划算
数码产品 服装服饰 家电家具 装潢装饰 商旅游玩 生活必备 二手特色 健康保健
FLASH频道
MTV类 运动游戏 益智游戏 女生游戏 休闲游戏 电脑运用 有声故事 有声艺术
社会专题
美文园地 制作教程 历史天空 游山玩水 美食天下 科技科幻 天文地理 时尚酷玩 健康保健 寻医问药 有书有道 农村特色 幽默笑话 汽车电子 星新一代 教育咨询 天下军事 硬件网络 黑白社会 靓丽女人 代码效果 免费资源 便民服务 办公达人 玄幻奇幻 软件技术
关闭
当前位置:首页 → 社会专题 → 硬件网络
灵活调用ckeditor工具栏

灵活的调用方式——JS代码调用:

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

  2. <textarea cols="80" id="editor1" name="editor1" rows="10"><p>Ckeditor的初始化内容,作为textarea的value值. You are using <a href="http://www.kxss.net/">CKEditor</a>.</p></textarea>

  3. <script type="text/java script">

  4. CK_Editor=CKEDITOR.replace( 'editor1' );

  5. </script>

其实很简单,包含Ckeditor的js文件,生成textarea,用就是语句替换。js预计替换,可以进行更为详细的配置,下文将做详细说明。

二、Ckeditor工具栏自定义设置

1.在Ckeditor根目录的config.js中设置:

  1. config.toolbar = 'Full';

  2. config.toolbar_Full =

  3. [

  4. ['Source','-','Save','NewPage','Preview','-','Templates'],

  5. ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],

  6. ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

  7. ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],

  8. '/',

  9. ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

  10. ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

  11. ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

  12. ['Link','Unlink','Anchor'],

  13. ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],

  14. '/',

  15. ['Styles','Format','Font','FontSize'],

  16. ['TextColor','BGColor'],

  17. ['Maximize', 'ShowBlocks','-','About']

  18. ];

  19. config.toolbar_Basic =

  20. [

  21. ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']

  22. ];

上述代码中第一行,即为设定默认工具栏的,可以改写为:

  1. config.toolbar = 'Basic';

2.在用js代码调用Ckeditor时设置:

  1. CK_Editor=CKEDITOR.replace( 'editor1',

  2. {

  3. toolbar :

  4. [

  5. ['Styles', 'Format'],

  6. ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']

  7. ]

  8. });

3.以上两种方法的综合:

在Ckeditor根目录下的config.js文件中设置好多组toolbar,如方法1示

例代码去掉第一行;调用Ckeditor时的代码如下:

  1. CK_Editor=CKEDITOR.replace( 'editor1',

  2. {

  3. toolbar : 'Full'

  4. });

  5. CK_Editor=CKEDITOR.replace( 'editor2',

  6. {

  7. toolbar : 'Basic'

  8. });

三、Ckeditor语言、字体及皮肤样式自定义

Ckeditor支持多国语言,并提供三种皮肤样式:kama、office2003和v2,可以在Ckeditor根目录下的config.js文件中进行设置:

  1. config.language = 'zh-cn' ;

  2. config.skin = 'office2003';

也可以在js调用Ckeditor时设置:

  1. CK_Editor=CKEDITOR.replace( 'editor1',

  2. {

  3. toolbar : 'Full',

  4. language : 'zh-cn',

  5. skin : 'office2003'

  6. });

  7. CK_Editor=CKEDITOR.replace( 'editor2',

  8. {

  9. toolbar : 'Basic',

  10. language : 'zh-cn';

  11. skin : 'kama'

  12. });

四、Ckeditor添加中文字体

1.在Ckeditor根目录下的config.js文件中添加:

  1. config.font_names = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS';

2.在用js代码调用Ckeditor时添加:

  1. CK_Editor=CKEDITOR.replace( 'editor1',

  2. {

  3. toolbar : 'Full',

  4. language : 'zh-cn',

  5. skin : 'office2003',

  6. config.font_names : '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS'

  7. });

≡ 提示:输入修改代码都可运行!
2
酒精度
79
顶一下
相关阅读
内容加载中……