`
fancy205
  • 浏览: 14228 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

在线编辑器 ckeditor3.x的配置使用

    博客分类:
  • js
阅读更多
     好吧,首先祝贺自己在javaeye安家。
     进入正题,由于工作的需要。就在网上找了些在线编辑器,诸如:eWebEditor,FCKeditor,CKeditor等。FCKeditor与CKeditor是一样的,只不过在3.0之后更改了名字,FCKeditor2.x的配置相对于3.x来说,比较麻烦。
     1.FCKeditor配置使用
     首先把fckeditor文件夹放到你的web站点根目录下,在你需要使用的页面导入FCKeditor
     <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
     创建FCKeditor通常有几种方法:
      第一种:嵌入式引用
      在你需要的地方增加一下代码段
   
<script type="text/javascript">
			var oFCKeditor = new FCKeditor("FCKeditor1");
			oFCKeditor.BasePath = "/reg/fckeditor/";
			oFCKeditor.Create();
		
		</script>

    例如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>inline </TITLE>
 
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>

 </HEAD>

 <BODY>
  	<form>
		<script type="text/javascript">
			var oFCKeditor = new FCKeditor("FCKeditor1");
			oFCKeditor.BasePath = "/reg/fckeditor/";
			oFCKeditor.Create();
		
		</script>
	
	</form>
 </BODY>
</HTML>

   第二种:替换textarea
  
<script type="text/javascript">
		window.onload = function(){
			var oFCKeditor = new FCKeditor("exarea");
			oFCKeditor.BasePath = "/reg/fckeditor/";
			oFCKeditor.ReplaceTextarea();
		}
		</script>
		<textarea id="exarea" name="exarea"></textarea>


    上面是对FCKeditor配置使用的介绍,即是ckeditor3.0以前的版本。

    2.ckeditor的配置使用
    相对FCKeditor来说,ckeditor 3.x的安装使用是简单了很多,只需一下简单的几步操作就ok了:
     a、下载最新的ckeditor http://ckeditor.com/download
    b、抽取出editor文件夹放到你所属站点的根目录
     c、在需要使用编辑器的地方引入
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

    加入一下代码就可以了
   
 <textarea class="ckeditor" cols="80" id="editor" name="editor" rows="10">
                这里是内容
    </textarea>

     c、部署好后,还可以查看ckeditor自带的例子
http://你的站点地址<CKEditor installation path>/_samples/index.html
分享到:
评论
2 楼 fancy205 2010-01-12  
xiaoqing20 写道
原来是广州的兄弟啊!跟着你的帖子学着动手试试。

呵呵
1 楼 xiaoqing20 2010-01-10  
原来是广州的兄弟啊!跟着你的帖子学着动手试试。

相关推荐

    CKEditor3.x配置使用教程,支持图片上传其中图片上传支持Ftp

    CKEditor3.x是该编辑器的一个版本,具有良好的稳定性和可扩展性。在这个配置使用教程中,我们将重点关注如何使CKEditor3.x支持图片上传,并且这个上传功能将通过FTP协议实现。 首先,让我们了解一下CKEditor的基本...

    ckeditor3.x 支持自定义上传,媒体预览

    CKEditor 3.x 是一款广泛使用的富文本编辑器,它为用户提供了一种在网页上创建、编辑和格式化文本的便捷方式。在这个特定的主题中,我们关注的是CKEditor 3.x如何支持自定义上传和媒体预览功能。这两个特性使得用户...

    ckeditor_4.x自定义按钮控件详细配置

    CKEditor 是一个功能强大且广泛使用的富文本编辑器,提供了许多功能强大的插件和配置选项。在 CKEditor 4.x 版本中,我们可以通过自定义按钮控件来扩展编辑器的功能。本文将详细介绍如何在 CKEditor 4.x 中自定义...

    CKEditor3x.rar

    它的版本3.x(在本例中称为"CKEditor3x")是该编辑器的一个早期版本,提供了丰富的功能,使用户能够创建和编辑包含多媒体内容的复杂网页文本。 在CKEditor3.x中,用户可以轻松地处理图片管理,这主要体现在以下几个...

    ckeditor3x编辑器word图片粘贴上传

    **ckeditor3x编辑器word图片粘贴上传** 在网页内容编辑中,CKEditor是一个非常流行的富文本编辑器,它提供了丰富的功能,使用户能够像在桌面应用中一样编辑文本。CKEditor3.x版本是该系列的一个重要迭代,它支持...

    CKEditor4x.rar

    CKEditor是一款功能丰富的富文本编辑器,广泛应用于网页内容编辑、论坛、博客和其他需要在线文本编辑的场合。它提供了丰富的文本格式化选项,允许用户在网页上实现类似于桌面文字处理软件的编辑体验。 CKEditor4.x...

    ckeditor 最新版本,含全部插件

    3. **图片处理**:CKEditor 4.x内置了图片上传功能,用户可以直接在编辑器中上传图片并进行简单的编辑,如裁剪、旋转和调整大小。同时,它也支持设置图像的浮动、边距和对齐方式。 4. **链接管理**:用户可以方便地...

    CKeditor 编辑器一键排版

    CKeditor 是一款强大的富文本编辑器,被广泛应用于网页、内容管理系统和其他需要用户输入格式化文本的场景。这款编辑器以其丰富的功能、易用性和高度可定制性而受到开发者的青睐。"一键排版"是CKeditor 提供的一项...

    ckeditor-7.x-1.x-dev.tar.gz

    CKEditor,作为一款备受赞誉的在线文本编辑器,它的7.x-1.x-dev版本的发布,代表了这个项目持续的创新和发展。"ckeditor-7.x-1.x-dev.tar.gz" 是一个压缩包文件,通常用于软件开发过程中的源代码分发,其中包含了...

    asp.net 使用ckeditor5富文本编辑器包含图片上传全部代码

    在ASP.NET应用中,CKEditor5是一款常用的富文本编辑器,它提供了丰富的文本格式化功能,包括图片上传。本文将详细介绍如何在ASP.NET环境中集成CKEditor5并实现图片上传功能。 首先,我们需要在项目中引入CKEditor5...

    Ckeditor,一个在线编辑器

    Ckeditor 是一款广泛应用的开源富文本在线编辑器,主要用于网页内容的创建和编辑。它提供了丰富的文本格式化选项,如字体、字号、颜色、对齐方式等,以及图片上传、链接插入、表格编辑等功能,极大地提升了用户在...

    vueckeditor是一个用于Vuejs2的Ckeditor编辑器

    9. **兼容性**:Vue-ckeditor适用于Vue.js 2.x版本,对于Vue.js 3.x,可能需要查找适配的版本或使用其他解决方案,因为Vue的API在不同版本间有所变化。 10. **扩展功能**:Ckeditor支持许多插件,如图片上传、表格...

    ckeditor_3.5.2在线编辑器

    CKEditor可以通过配置对象来定制编辑器的功能和行为,例如禁用某些工具栏按钮、设定默认样式、设置语言等。例如,`config.toolbar = [['Bold', 'Italic'], ['Link', 'Unlink']]`会创建一个只包含加粗、斜体、链接和...

    ckeditor_ckfinder_php.rar

    CKEditor是一款功能强大的富文本编辑器,而CKFinder则是一个文件管理和上传组件,它们常常搭配使用,为用户提供了一个完善的网页内容创作和管理解决方案。 CKEditor 4.x是这个编辑器的第四代版本,它提供了一个丰富...

    Ckeditor在线编辑器

    **Ckeditor在线编辑器详解** Ckeditor是一款强大的富文本编辑器,广泛应用于网站内容管理系统、论坛、博客等在线文字编辑场景。它为用户提供了一种类似桌面文字处理软件的界面,使得用户在网页上编辑内容时能享受到...

    ckeditor_3.0.1的使用

    - 使用CKEditor的JavaScript API将`&lt;textarea&gt;`替换为富文本编辑器,如`CKEDITOR.replace('textarea_id')`。 3. **CKEditor的功能特性**: - 支持多种文本格式:包括粗体、斜体、下划线、颜色、字体大小和样式等...

    servlet整合ckeditor编辑器

    而CKEditor则是一款流行的富文本编辑器,它为用户提供了一个类似Word的界面来编辑网页内容。在本项目中,我们将讨论如何在使用Maven管理的Servlet应用中整合CKEditor,实现文件上传的功能。 首先,我们需要理解...

    ckeditor4.0富文本编辑器

    3. **初始化编辑器**:在JSP页面的JavaScript代码中,通过调用CKEditor的`CKEDITOR.replace()`或`CKEDITOR.inline()`方法来初始化编辑器,指定编辑区域的DOM元素。 4. **配置编辑器**:根据需求,可以通过配置对象...

    ckeditor_4.1.2_standard+ckeditor_aspnet_3.6.4

    为了在ASP.NET项目中使用CKEditor,开发者通常需要在Web.config中配置CKEditor的路径,然后在ASP.NET页面中添加相应的控件标签,通过JavaScript或C#代码初始化和设置编辑器的属性。 总之,CKEditor 4.1.2 和 ...

    CKEditor for Zen Cart v1.xx

    3. **配置集成**:编辑Zen Cart的后台配置文件,将CKEditor作为默认的文本编辑器。 4. **测试功能**:登录后台,检查商品编辑或其他需要文本编辑的地方,确认CKEditor正常工作并具备预期功能。 通过以上步骤,...

Global site tag (gtag.js) - Google Analytics