fckeditor的两种基本配置

最新推荐文章于 2025-07-20 14:57:32 发布

原创最新推荐文章于 2025-07-20 14:57:32 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fckeditor

本文介绍如何在项目中集成FCKeditor富文本编辑器，包括下载、配置及使用方法。提供了通过JavaScript创建编辑器实例和替换现有文本区域的示例。

1.Fckeditor官网：http://ckeditor.com/
2.下载地址: http://ckeditor.com/download
3.文档地址: http://docs.cksource.com

一.将下载后的文件解压并放到WebRoot目录下
二.导入JS文件
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
三.使用，有四种方法来调用
1.使用JS直接创建

Js代码
1.<script type="text/javascript">
2.var oFCKeditor = new FCKeditor('FCKeditor1');
3.//1.BasePath表示fckeditor的目录
4.//第一个/表示WEBServer的根目录，所以必须加上工程路径
5.//最后必须以/结尾，否则报错
6.//2.可以使用相对路径如： fckeditor/
7.oFCKeditor.BasePath = "fckeditor/";
//网站上有很多是"/fckeditor/"，在我这个会报错，去掉前面的"/"就可以了
8.oFCKeditor.Width = "100%";
9.oFCKeditor.Height = 400;
10.//默认属性 Width 100%
11.// Height 200
12.// Value ""
13.// ToolbarSet "Default"(Basic或自己定制)
14.// BasePath /fckeditor/
15.oFCKeditor.Create();
16.</script>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
//1.BasePath表示fckeditor的目录
//第一个/表示WEBServer的根目录，所以必须加上工程路径
//最后必须以/结尾，否则报错
//2.可以使用相对路径如： fckeditor/
oFCKeditor.BasePath = "/fckeditor/";
oFCKeditor.Width = "100%";
oFCKeditor.Height = 400;
//默认属性 Width 100%
// Height 200
// Value ""
// ToolbarSet "Default"(Basic或自己定制)
// BasePath /fckeditor/
oFCKeditor.Create();
</script>

2.使用JS替换已有的TextArea

Js代码
1.<script type="text/javascript">
2.window.onload = function()
3.{
4.var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
5.oFCKeditor.BasePath = "fckeditor/" ;
6.oFCKeditor.ReplaceTextarea() ;
7.}
8.</script>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>