现在的位置: 首页 > 综合 > 正文

毕业设计(十五)—发表文章(1)之- 发表文章和回复博客 的2个简单ckeditor样式

2013年12月04日 ⁄ 综合 ⁄ 共 2011字 ⁄ 字号 评论关闭

ckeditor 使用方法

使用方法:

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>

 

3、将相应的控件替换成编辑器代码  【我发现不写这段js代码,也是可以使用的,关键是第2部,textarea的 class="ckeditor"】

<script type="text/javascript">

CKEDITOR.replace('TextArea1');

</script>

默认样式:

上面的功能项太多,有好多用不到,  若要定义新的样式,自己写一个ckeditor_config.js文件,代替原有文件。

如下:

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

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

一:

ckeditor_config_fabiao.js代码:

CKEDITOR.editorConfig = function( config )
{
	config.width = 870; //宽度      
	config.height = 400; //高度     
	//下面的是工具条的定义,不用的删除,用的留下。  []里在工具栏上显示一块, "/" 换行    "-"代表  "|" d
	config.toolbar_A =
		[
			['Source'],
//			['Cut','Copy','Paste','PasteText','PasteFromWord'],
			['Bold','Underline'],
//			['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
			['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
//			'/',
			['Styles','Format','Font','FontSize'],
			['TextColor','BGColor'],
			['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
		];
	config.toolbar = 'A';
	config.language = 'zh-cn';
	
	
	
	
};

样式:

二:ckeditor_config_huifu.js 代码

:

CKEDITOR.editorConfig = function( config )
{
	config.language = 'zh-cn';
	config.toolbar_A =
		[
			['Source'],
			['Cut','Copy','Paste','PasteText','PasteFromWord'],
			['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
			['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
			['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
			'/',
			['Styles','Format','Font','FontSize'],
			['TextColor','BGColor'],
			['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
		];
	config.toolbar = 'A';
	config.uiColor = '#BFEFFF'; //背景颜色     
	config.width = 700; //宽度      
	config.height = 180; //高度     
	config.skin='kama';      //编辑器主题选择
	//工具栏      
	config.toolbar =      
	[      
	    ['Source','Bold','Italic'],      
	   ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],    
	    ['Smiley'],       
	    ['Styles','Font','FontSize'],      
	    ['TextColor'],      
	    ['Undo','Redo'],
	    ['Image','Flash']
	     
	];    
	
	
};

样式:


抱歉!评论已关闭.