CKEditor学习笔记

CKEditor学习笔记:

 

以下出自官方文档API,正宗E文,都是精华啊...

CKEditor 3 JavaScript API Documentation :http://docs.cksource.com/ckeditor_api/

 

CKEditor 3 Developer's Guide : http://docs.cksource.com/CKEditor_3.x/Developers_Guide

 

1:去官网http://ckeditor.com/download下载相应的版本,我今天下的是官网的最新版本ckeditor_3.6.1.zip版,故以下学习笔记是以ckeditor_3.6.1.zip版本为基础,不保证以下学习笔记在其他的ckeditor的版本上是否允许通过<-_->。

2:下载后,解压缩生成文件夹ckeditor,其下目录文件目录众多,这里我简要介绍几个:

\ckeditor\lang\  文件夹下,是ckeditor的多国语言文件,其中zh-cn.js是中文简体版的

\ckeditor\_samples\  文件夹下,是ckeditor的官方demo,建议懂E文的Developer看下

\ckeditor\ckeditor.js 文件,是以后使用ckeditor时,必须要引用的文件

 

3:看完例子程序后,写了个html页面,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample CKEditor Site</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/config.js"></script>
<!-- <script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor_basic.js"></script> -->

</head>
<body>
 <form method="post">
		<p>
			My Editor:<br />
	<textarea class="editor_sycdemo" cols="80" id="editor_sycdemo" name="editor1" rows="10">
	                	请输入内容......
	</textarea>
	<script type="text/javascript">
	//<![CDATA[
	// This call can be placed at any point after the
	// <textarea>, or inside a <head><script> in a
	// window.onload event handler.
	// Replace the <textarea id="editor"> with an CKEditor
	// instance, using default configurations.
	if (CKEDITOR.instances['editor_sycdemo']) {
	CKEDITOR.instances['editor_sycdemo'].destroy();
	}
	//CKEDITOR.replace( 'editor_sycdemo' );
	//http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
	CKEDITOR.replace( 'editor_sycdemo',
			{
		    toolbar : 'Full',
		    //VALUE:Basic ,Full,
		    uiColor : '#666666',
		    //VALUE:HTML color name,color code
		    width:800,
		    //850,'75%'
		    //contentsLanguage:'zh-cn',
		    language:'zh-cn',
		   // customConfig : 'ckeditor/config.js'

		    //font_names:
			 //   'Arial/Arial, Helvetica;'+' sans-serif;'+
			//	'Times New Roman/ Times New Roman, Times, serif;'+
			//	'Verdana;'+'宋体;'+'楷体;'+'黑体'
			//font_names:
			});
	//]]>
	</script>
<p>
			<input type="submit" />
		</p>

</body>
<script type="text/javascript">
if ( CKEDITOR.instances.editor_sycdemo.getData() == '' )
    alert( 'There is no data available' );
</script>
</html>

 

你可能感兴趣的:(JavaScript,ckeditor,docs,cksource)