FCKeditor 使用方法

封面图 • 2025-12-23 • PHP

FCKeditor（现称为 **CKEditor**）是一个广泛使用的富文本编辑器，用于在网页中实现类似 Word 的编辑功能。以下是 FCKeditor 的基本使用方法和配置步骤。

---

## 一、下载 FCKeditor

你可以从官方网站下载：

- 官网：[https://ckeditor.com/](https://ckeditor.com/)
- 或者历史版本：[https://github.com/ckeditor/ckeditor4](https://github.com/ckeditor4)

注意：FCKeditor 是 CKEditor 的旧名称，现在统一称为 **CKEditor**。

---

## 二、引入 FCKeditor 到 HTML 页面

### 1. 将文件放到项目目录中

将下载的 CKEditor 文件夹（如 `ckeditor`）放到你的项目目录下，例如：

```
your-project/
├── index.html
└── ckeditor/
    ├── ckeditor.js
    ├── lang/
    └── ...
```

### 2. 在 HTML 中引入 CKEditor

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CKEditor 示例</title>
    
    <script src="ckeditor/ckeditor.js"></script>
</head>
<body>

<textarea id="editor1" name="editor1">
    <p>这是默认内容。</p>
</textarea>

</body>
</html>
```

---

## 三、常用配置项

你可以在初始化时设置一些参数：

```javascript
CKEDITOR.replace('editor1', {
    toolbar: 'Full', // 工具栏样式
    height: 300,     // 编辑器高度
    width: '100%',   // 宽度
    skin: 'moono',   // 界面皮肤
    filebrowserImageBrowseUrl: '/images/', // 图片浏览路径
    removePlugins: 'elementspath'     // 移除某些插件
});
```

---

## 四、获取编辑器内容

你可以通过 JavaScript 获取用户输入的内容：

```javascript
var content = CKEDITOR.instances.editor1.getData();
console.log(content);
```

---

## 五、提交表单时获取内容

如果你是用 `<form>` 提交数据，确保在提交前获取内容：

```html
<form action="submit.php" method="post">
    <textarea id="editor1" name="content"></textarea>
    <input type="submit" value="提交">
</form>

---

## 六、常见问题

### 1. 编辑器无法显示？

- 检查路径是否正确（`ckeditor.js` 是否加载）
- 检查是否有 JavaScript 错误（浏览器控制台）

### 2. 中文支持？

- 下载中文语言包（`lang/zh-cn.js`）
- 在初始化时指定语言：

```javascript
CKEDITOR.replace('editor1', {
    language: 'zh-cn'
});
```

---

## 七、CKEditor 5 和 CKEditor 4 的区别

- **CKEditor 4**：传统基于 `<textarea>` 的编辑器，适合大多数传统项目。
- **CKEditor 5**：现代版本，基于 Web Components，更灵活但需要更多配置。

如果你是新项目，建议使用 [CKEditor 5](https://ckeditor.com/docs/ckeditor5/latest/)。

---

## 八、示例代码总结

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CKEditor 示例</title>
    <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
    <textarea id="editor1" name="editor1"></textarea>
    <button onclick="submitForm()">提交</button>

function submitForm() {
            var content = CKEDITOR.instances.editor1.getData();
            alert("内容为：" + content);
            // 这里可以发送到服务器
        }
    </script>
</body>
</html>
```

---

如果你有具体使用场景（比如 PHP、Java、Node.js 集成），我可以提供更详细的教程。欢迎继续提问！