最近在一个OA的项目中,用到了一个编辑器 Fckeditor, 先来看看它的效果图:
FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、
跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB
项目和大型网站均采用了FCKeditor。
FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的
安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程
语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。
目前Fckeditor用于基于ie内核的浏览器,如果要使用于chrome等浏览器,请使用ckeditor。
具体使用方法:
1.将解压后的fckeditor整个文件夹复制到Project的WebRoot路径下
2.在要使用Fckeditor的页面,导入fckeditor.js(在fckeditor文件夹里)文件
因为此处使用Fckeditor用到了jQuery,因此相应的jquery.js也要导入
<span style="font-size:18px;"><script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/fckeditor/fckeditor.js" charset="utf-8"></script> </span>
3.根据需要适当修改以下JS代码,复制到要使用Fckeditor的页面即可
<script type="text/javascript">
$(function(){
var fck = new FCKeditor("content");//content为要替换的textarea的name属性
fck.Width = "99%";
fck.Height = "100%";
fck.ToolbarSet = "bbs";//指定工具栏的配置,bbs为我自己修改过的,如果不使用自定义配置文件,此处有Default,Basic两个选择
fck.BasePath = "${pageContext.request.contextPath}/fckeditor/";
fck.ReplaceTextarea();
});
</script>
替换成Fckeditor的textarea,名字和上面的替换的名字要一致。
<textarea name="content" style="width:650px;height:200px"></textarea>
PS:代码解释
JS代码中各个参数具体作用(使用本js或者上文使用方法步骤3的代码都可以,两段代码大同小异)
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'content' ) ;//此参数会作为提交表单时的参数名
oFCKeditor.BasePath = "/fckeditor/" ;//一定要指定editor文件夹所在的路径,并且要以'/'结尾
oFCKeditor.Height = 300 ;//高度
oFCKeditor.Value = '' ;//默认的初始值
oFCKeditor.ToolbarSet="Basic";//指定工具栏的配置,默认为Default
//oFCKeditor.Create() ;//在当前位置生成并显示Fckeditor
oFCKeditor.ReplaceTextarea();//替换指定id或name属性的textarea为Fckeditor
</script>
使用自定义的配置文件
1.在fckconfig.js里将FCKConfig.CustomConfigurationsPath = ''修改为:FCKConfig.CustomConfigurationsPath=FCKConfig.EditorPath+"myconfig.js"作用:告诉Fckeditor,我有个自定义的配置在该地址下的该文件。
2.在myconfig.js里写想修改的东西,例如:表情,Fckeditor菜单栏的减少等,模版在fckconfig.js里面有,参考着修改即可。没有修改的配置,Fckeditor默认使用自己的默认配置。
分享到:
相关推荐
fckeditor和使用方法,可以上传图片,flash
asp.net文本编辑器FCKeditor使用方法详解
网络上有很多FCKeditor的用法,大多数是互相抄袭,或者...但是这个FCKeditor使用方法详解--图文详解讲解的非常清楚,关键还是附带图片,让人一看就一目了然,很容易看懂。另外还收录了fckeditor的瘦身。很全面的哦--
FCKeditor使用方法详解.doc
FCKeditor使用方法技术详解。 FCKeditor是目前最优秀的可见即可得网页编辑器,本文详细介绍其安装,使用FCKEditor的各项功能,常用设置,配置方法; 另外还提供了FCKEditor API,精简FCKEditor文件控件大小的方法。
FCKeditor 2.4.3详细使用方法
FCKEditor使用帮助文档。FCKEditor使用帮助文档。FCKEditor使用帮助文档。FCKEditor使用帮助文档。
FCKeditor是目前最优秀的可见即可得网页编辑器之一用于文本编辑的工具,支持多种方法调用
asp.net文本编辑器FCKeditor使用方法详解.doc
fckeditor的MVC版及js使用fckeditor的方法,初步的,深入的请自行研究
FCKeditor使用方法技术详解.doc
NULL 博文链接:https://shuaigg-babysky.iteye.com/blog/445698
fckeditor使用手册 fckeditor使用手册
.NET fckeditor编辑器的设置和使用方法
3.1.4 Js中FCKeditor对象的属性(集合)和方法 6 3.1.4.1 属性 6 3.1.4.2 集合 7 3.1.4.3 方法 7 3.1.5 FCKeditor的JS构造器 9 3.1.6 将从后台读取的数据显示在FCKeditor中 9 3.2 在Jsp中通过自定义标签创建: 9 3.3 ...
FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型...
也许你现在看到的已经是更新的版本了,那么可能某些配置办法已经变化了,本文也将跟进以保持最新动态,相反如果你使用的旧版本的控件,其配置和使用方法也有所区别),下载地址:http://www.fckeditor.net/download...