`

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>

 

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

相关推荐

    ckeditor学习笔记

    ### CKEditor 学习笔记:实现自定义按钮与图片上传功能 #### 一、简介 在Web开发过程中,富文本编辑器(Rich Text Editor)是非常常见的需求之一。它能够为用户提供更加直观、友好的文本编辑体验,使得用户无需了解...

    ckeditor_3.2(传智播客中用到的)

    - **学习资源**:可能用于创建和编辑课程笔记、作业或项目,提高学生的学习体验和互动性。 - **教学案例**:通过CKEditor 3.2,学生可以学习到如何在实际项目中集成和使用富文本编辑器。 3. **.NET与CKEditor的...

    ckeditor 网页编辑器源码

    .net环境下ckeditor与ckfinder学习笔记 ckeditor 3.0.1学习笔记 一.ckeditor 3.0.1精简 精简前:4.52M 精简后:853K 1.删除_samples和_source文件夹,分别为示例文件和未压缩源程序 2.删除lang文件夹下除zh-...

    Java学习笔记,spring,hibernate,struts

    Java学习笔记涵盖了多个核心的Java开发技术,包括Spring、Hibernate和Struts,这些都是Java Web开发中的重要框架。让我们深入探讨一下这些技术。 首先,Java是一种广泛使用的编程语言,以其跨平台性和面向对象的...

    CKEditor和CKFinder文本编辑器

    对基本的表情,图片上传,字体等配置进行了处理,该包可以直接在tomcat服务器下运行,如果看了后还不知道的话,可以边看项目边看我的博客笔记中的CKEditor结合CKfinder的学习 地址:...

    FCKEDITOR学习笔记资料.pdf

    1. **下载核心文件**:首先,你需要从FCKeditor的官方网站(http://ckeditor.com/download)下载最新版本的核心文件。 2. **获取Java上传组件**:为了处理文件上传功能,需要从SourceForge...

    Fckeditor学习研究整理笔记

    10. **最新版本与替代品**:FCKeditor已更名为CKEditor,并有多个版本更新,笔记可能会提及这些更新以及新版本的特性。同时,随着技术的发展,可能还提到了其他富文本编辑器的比较,如TinyMCE、Quill等。 以上是...

    php留言板操作笔记加源码

    笔记可以帮助理解代码逻辑,是学习过程中的重要参考资料。 6. **编辑器集成**:layui是一个流行的前端UI框架,可能在`layui1`目录中包含了编辑器组件。编辑器如CKEditor或TinyMCE允许用户以富文本形式输入留言,...

    基于PHP的有道笔记 API (libNote).zip

    5. **笔记内容**:笔记内容可能包含富文本、图片、链接等,需要使用适当的库如TinyMCE或CKEditor来处理和显示。 6. **错误处理**:libNote应包含对API错误的处理机制,如重试、异常捕获等,确保程序的健壮性。 7. ...

    WindyNote:简单的单机笔记本

    1. **笔记创建与编辑**: 用户可以创建新的笔记,利用内置的CKEditor进行富文本编辑,支持文本格式化、插入图片等功能。 2. **笔记存储**: 所有的笔记数据都被保存在SQLite数据库中,确保数据的安全性和持久性。 3. *...

    笔记应用

    《构建个人笔记应用——以JavaScript为核心的技术解析》 在当今数字化时代,笔记应用已经成为我们...通过不断学习和实践,我们可以利用JavaScript的灵活性和强大功能,打造出功能丰富、用户体验优秀的个人笔记应用。

    第14章 项目实训:个人笔记系统笔记管理模块的实现.ppt

    Java Web基础与实例教程的PPT,自己制作的PPT,将近400页,免费分享,童鞋们努力学习吧。

    暑假java问题和笔记(常用版).doc

    2. 学习数据库时,熟悉SQL命令是必要的,如外键用于关联不同表的数据,删除操作涉及`DELETE`命令等。 【文件上传与处理】 3. 文件上传时,HTML表单需设置`enctype`为`multipart/form-data`,且`method`为`POST`,以...

    node_all:node 练习

    最近一点时间学习了Vue,后来在学习中,看了一下nodejs,感觉非常强大,我打算从头开始学习下,以前在简述上做笔记的,后来感觉还是直接在node上面写下自己的心得比较好。 1.目录 [搭建基本服务] 基础功能 富文本...

    notes.app.github.io:笔记应用

    富文本编辑器(如TinyMCE或CKEditor)可能被集成,以支持格式化文本、插入图片和链接等高级功能。 2. **标签系统**:为了方便分类和搜索笔记,应用通常会采用标签系统。HTML的`&lt;meta&gt;`标签可以用来存储和检索这些元...

    secretary:我的笔记、日记、协作白板

    "secretary:我的笔记、日记、协作白板"是一个基于JavaScript技术开发的应用程序,它集成了笔记、日记和协作白板的功能,旨在提供一个一体化的工作和学习平台。在这个平台上,用户可以方便地记录个人想法、制定工作...

    第12章 项目实训:个人笔记系统首页模块的设计与实现.ppt

    Java Web基础与实例教程的PPT,自己制作的PPT,将近400页,免费分享,童鞋们努力学习吧。

    ASP网站实例开发源码——修改过的企业网站源码!! 双语版本.zip

    ASP(Active Server Pages)是一种微软...对于学习ASP开发或者需要搭建多语言企业网站的人来说,这是一个很好的学习和参考资源。源码的分析和理解可以帮助开发者了解ASP编程的基本结构,以及如何处理多语言网站的需求。

    源码非常全的ASP个人网站

    这种编辑器通常基于富文本编辑器如TinyMCE或CKEditor,允许用户在网页中直接编辑文字,插入图片、链接等元素,所见即所得的特性使得操作更加直观。 在实际应用中,ASP源码可能还包括用户注册登录系统、权限控制、...

    OnlineDiary在线日记本源码_onlinediary.zip

    总的来说,OnlineDiary在线日记本源码展示了Web开发的全貌,从用户界面到后端处理,再到数据库交互和安全性保障,都蕴含着丰富的学习资源。对于想要深入理解Web开发的开发者来说,这是一个很好的实践项目。通过研究...

Global site tag (gtag.js) - Google Analytics