ck编辑器没问题，wandEditor显示不出来
分享
收藏
评论
作者 🐼
hh
-
我在系统设置里面选择wandEditor，textarea标签加上editor，编辑器出不来，去系统设置里面选择ck编辑器，编辑器就能出来
你好！遇到这种“切换编辑器后不显示”的情况很常见，通常不是编辑器本身的问题，而是**配置标识、静态资源加载或前端初始化逻辑**没有正确适配所选的编辑器。你提到的 `wandEditor` 大概率是 `wangEditor`（国内常用的富文本编辑器）的笔误，我们先按这个方向排查。
请按照以下顺序逐步检查，一般能定位到根因：
### 🔍 1. 检查配置标识是否一致
- 打开浏览器开发者工具（F12）→ `Elements` 面板，找到你的 `<textarea class="editor">` 元素。
- 查看它周围是否有隐藏的字段或属性，例如：
```html
<input type="hidden" name="system_config_editor" value="wangEditor">
<!-- 或 -->
<div class="editor-wrap" data-editor="ck">
```
- 确认系统设置中填写的值（如 `wang_editor`、`WangEditor`、`custom_wand` 等）与后端返回给前端的值**完全一致**。很多框架对大小写或下划线敏感，值不一致会导致前端跳过初始化。
### 🌐 2. 检查静态资源是否成功加载
- F12 打开 `Network` 面板，勾选 `Disable cache`，刷新页面并将编辑器切为 `wangEditor`。
- 筛选 `JS` 和 `CSS`，观察是否有对应资源请求状态为 `404`、`403` 或 `blocked`。
- 常见原因：
- 模板中动态拼接的 `<script src="/static/editor/wang-editor.min.js"></script>` 路径写死成了 CKEditor 目录。
- 资源包未上传或缺少权限。
### ⚙️ 3. 检查前端初始化逻辑（最关键）
大多数系统会通过一段全局 JS 自动识别 `.editor` 类并替换成富文本框。如果这段代码只写了 CKEditor 的兼容逻辑，wangEditor 就不会触发。
搜索项目中的公共 JS（如 `admin.js`、`app.js`、`common.js` 或模板底部的 `<script>`），查找类似以下代码：
```javascript
// ❌ 错误示例：只支持 CKEditor
$('.editor').each(function() {
CKEDITOR.replace(this);
});
```
**正确做法**应根据当前选择的编辑器类型分支初始化：
```javascript
const currentEditor = window.SYSTEM_CONFIG?.editor || 'ckeditor';
$('.editor').each(function() {
const el = this;
if (currentEditor === 'ckeditor') {
CKEDITOR.replace(el);
} else if (currentEditor === 'wangEditor' || currentEditor === 'wang_editor') {
// wangEditor v4 初始化示例
const editor = new E(el);
editor.config.zIndex = 10;
editor.create();
}
});
```
### 🛠️ 快速自测技巧
在浏览器控制台（Console）依次执行：
```js
// 1. 确认 DOM 是否存在
console.log(document.querySelector('.editor'));
// 2. 查看是否有全局初始化函数被调用
console.log(window.__editorInitialized__); // 如果有自定义标记的话
// 3. 手动触发 wangEditor 初始化（临时验证）
if (window.E) {
const ta = document.querySelector('.editor');
if (ta) new E(ta).create();
}
```
如果第 3 步能弹出编辑器，说明是**自动化逻辑缺失**；如果依然不行，说明 `E` 构造函数或资源根本没加载。
---
💡 **下一步建议**
为了给你提供更精准的修复代码，请补充以下信息：
1. 你使用的是哪个 PHP 框架或后台系统？（如：ThinkAdmin、Laravel-admin、PHPOK、自研 CMS 等）
2. F12 `Console` 面板是否有任何红色报错？（截图或粘贴文字均可）
3. 模板文件中渲染该 textarea 的相关代码片段（隐藏敏感信息即可）
提供后我会直接告诉你改哪一行、怎么改。随时告诉我进展，我们一起搞定它！ 🛠️✨
