Fckeditor使用方法

简介: 本文主要讲Fckeditor使用方法

测试Fckeditor版本为:2.6.3

目前Fckeditor只能用于基于ie内核的浏览器,如果要使用于chrome等浏览器,请使用ckeditor。

具体使用方法:

1.将解压后的fckeditor整个文件夹复制到ProjectWebRoot路径下

2.在要使用Fckeditor的页面,导入fckeditor.js(在fckeditor文件夹里)文件

因为此处使用Fckeditor用到了jQuery,因此相应的jquery.js也要导入

<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>

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默认使用自己的默认配置。


相关文章
|
编译器
在HTML页面中引用Markdown编辑器(Editor.md)
在HTML页面中引用Markdown编辑器(Editor.md)
在HTML页面中引用Markdown编辑器(Editor.md)
|
JavaScript 前端开发
ueditor代码高亮实现方法
实现的方法也很简单 1:页面引用以下资源文件(均位于ueditor目录中) <script type="text/javascript" src="/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <link rel="stylesheet" type="text/css" href="/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css"> 2:增加如下js脚本使高亮生效: SyntaxHighlighter.all();
224 0
ueditor代码高亮实现方法
|
Java 应用服务中间件 数据库
在线文本编辑器FCKeditor在JSP项目开发中的使用方法
以下均在tomcat服务器下操作(不是开发环境下的操作) 首先下载两个包: FCKeditor_2.6.4.zip,(FCKeditor主文件) FCKeditor-2.3.zip,(jsp,FCKeditor整合包)
154 0
|
Web App开发 移动开发 前端开发
|
前端开发 JavaScript Java
关于富文本编辑器—UEditor(java版)的使用,以及如何将UEditor的文件/图片上传路径改成绝对路径
突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行。既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题。 大家可能经常会用到富文本编辑器,今天我要说的是UEditor的使用,这是一个简单易用的开源富文本编辑器。
3338 0