`

CKEditor学习笔记

ckeditordocscksourcejavascript 
阅读更多

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>

 

0
顶
1
踩
分享到：
| JAVA利用dom4j创建和生产XML文件
评论
1 楼 dajian0822 2015-03-18  
问下，那你显示存储CKEditor文本存储后，在用CKEditor显示时候倒是没有之前编辑过的，虽然官方提到CKEDITOR.inline鼠标在标签范围内显示，不过还是有工具栏，但是使用CKEDITOR.instances.标签ID.destroy();后没有样式也没有了，你那边那边显示做的什么处理呢，
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics