知识问答

HTML 编辑器 FCKeditor使用详解

发布时间：2026-05-09 23:41:37 浏览量：0

HTML 编辑器 FCKeditor 使用详解

什么是 FCKeditor

FCKeditor是一个基于浏览器的所见即所得（WYSIWYG）富文本编辑器，可以用于创建和编辑HTML内容。它支持众多浏览器，如Firefox、Internet Explorer、Google Chrome等。

FCKeditor 的安装及配置

1. 下载 FCKeditor

在FCKeditor官网或Github上下载FCKeditor的最新版本压缩包，将其解压缩到你所需的文件夹下。

2. 在 HTML 页面中引用 FCKeditor

在HTML页面的<head>标签内添加以下代码，引用 FCKeditor：

<script type="text/javascript" src="fckeditor/fckeditor.js"></script>

3. 初始化 FCKeditor

在HTML页面中添加以下代码，初始化FCKeditor：

<script type="text/javascript">  var editor = new FCKeditor('editor');  editor.BasePath = "fckeditor/";  // FCKeditor的根目录  editor.Height = 500;   // 编辑器的高度  editor.ReplaceTextarea();   // 用FCKeditor替换HTML页面的<textarea>标签</script>

至此，FCKeditor就已经配置完毕了。

FCKeditor 的使用

创建和编辑内容

在 HTML 页面中，添加一个 <textarea> 标签，并设置其 id 属性为 "editor"。保存页面后，打开该页面，就会出现一个具有工具栏的文本编辑器。您可以在其中创建和编辑HTML内容。

<textarea id="editor"></textarea><script type="text/javascript">  var editor = new FCKeditor('editor');  editor.BasePath = "fckeditor/";  editor.Height = 500;  editor.ReplaceTextarea();</script>

设置编辑器风格

FCKeditor头部工具栏和底部工具栏是可以自定义的。您可以打开 /fckeditor/editor/fckconfig.js 文件，增加或删除相应的按钮，以便让编辑器工具栏更符合您的需求。

编辑器工具栏示例：

FCKConfig.ToolbarSets["Basic"] = [  ['Source', '-','Bold', 'Italic', 'Underline', 'StrikeThrough', '-','Link', '-','Image', 'Flash', 'Table', 'Rule', 'Smiley', 'SpecialChar', 'TextColor', 'BGColor', 'Maximize', 'ShowBlocks', '-', 'Undo', 'Redo', '-', 'About']];FCKConfig.ToolbarSets["Default"] = FCKConfig.ToolbarSets["Basic"];

总结

以下为 FCKeditor 的示例代码：

<!DOCTYPE html><html>  <head>    <title>FCKeditor Example</title>    <script type="text/javascript" src="fckeditor/fckeditor.js"></script>  </head>  <body>    <textarea id="editor"></textarea>    <script type="text/javascript">      var editor = new FCKeditor('editor');      editor.BasePath = "fckeditor/";      editor.Height = 500;      editor.ReplaceTextarea();    </script>    <script type="text/javascript">      var editor2 = new FCKeditor('editor2');      editor2.BasePath = "fckeditor/";      editor2.Height = 250;      editor2.ReplaceTextarea();    </script>  </body></html>