README

为 zgy-dcat/laravel-admin 提供 wangEditor 5 富文本编辑器表单字段扩展。

✨ 特性

一行代码使用：$form->wangeditor('content')
本地 / CDN 两种资源加载方式，默认本地（断网可用）
自定义工具栏、占位文案、编辑器高度、编辑模式
图片 / 视频上传开箱即用；未配置上传地址时自动隐藏上传按钮
HTML / Slate JSON 两种内容存储格式
扩展设置页面全局配置加载方式、上传地址与上传凭证，字段级可覆盖

📦 安装

通过 composer 安装：

composer require zgy-dcat/wangeditor

然后在后台 http://<host>/admin/auth/extensions 将该扩展「启用」即可。

🚀 使用

$form->wangeditor('content')->height(400);

链式方法

use Zgy\WangEditor\Form\Field\WangEditor;

$form->wangeditor('content')
    ->height(400)                          // 编辑器高度，默认 300
    ->placeholder('请输入正文...')           // 占位文案
    ->uploadUrl('/admin/wangeditor/upload') // 图片/视频上传接口；留空则隐藏上传按钮
    ->uploadHeaders(['X-Foo' => 'bar'])     // 额外上传请求头（默认带 X-CSRF-TOKEN）
    ->toolbar([...])                        // 自定义工具栏 keys
    ->valueType('html')                     // 'html' 或 'json'（Slate JSON）
    ->mode('default')                       // 'default' 或 'simple'
    ->cdn(true);                            // 强制 CDN 或本地资源（默认取扩展设置）

uploadUrl 未设置（字段级 + 全局设置都为空）时，工具栏会自动剔除 uploadImage / uploadVideo 按钮，避免出现点击无效的入口；insertImage / insertVideo（网络地址弹窗）保留。

图片/视频上传后端约定

wangEditor 5 通过 MENU_CONF.uploadImage/uploadVideo 的 server + customInsert 上传，本扩展的 customInsert 读取返回 JSON 的 url 字段：

return response()->json([
    'url'  => 'https://.../a.png',
    'alt'  => '',
    'href' => '',
]);

图片上传时会携带请求头 X-CSRF-TOKEN（可叠加字段级 uploadHeaders）。若接口在路由中间件层校验 CSRF，需在 bootstrap/app.php 中对上传地址做豁免，或保证 header 携带有效 token。

内容存储

valueType('html')（默认）：隐藏域保存 HTML 字符串
valueType('json')：隐藏域保存 Slate JSON（JSON.stringify(editor.children)）

展示

$show->content()->unescape();
$grid->column('content')->unescape();

⚙️ 扩展设置

后台「扩展管理 → wangEditor → 设置」：

配置项	说明
`load_from_cdn`	`0`=本地资源（默认），`1`=CDN
`upload_url`	全局上传地址（字段未单独指定时使用；留空不显示上传按钮）

使用本地静态资源

resources/assets/ 已预置 wangEditor dist。扩展启用/更新时，zgy-dcat/laravel-admin 会自动发布到 public/vendor/dcat-admin-extensions/zgy-dcat/wangeditor，本地模式无需外网。

更新 wangEditor 版本：

curl -L https://unpkg.com/@wangeditor/editor@latest/dist/index.js -o resources/assets/js/index.js
curl -L https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css -o resources/assets/css/style.css

🗂 目录结构

├── composer.json                    # composer 包定义（extra.dcat-admin 指向 ServiceProvider）
├── version.php                      # 扩展版本管理
├── resources/
│   ├── assets/                      # 本地静态资源（wangEditor dist，自动发布）
│   │   ├── css/style.css
│   │   └── js/index.js
│   └── views/
│       └── form/editor.blade.php    # 字段视图
└── src/
    ├── WangEditorServiceProvider.php # 扩展服务提供者（注册字段）
    ├── Setting.php                   # 扩展设置表单
    └── Form/Field/WangEditor.php     # 表单字段类（核心）

🧩 实现原理

资源加载：不在 Admin::js()/css()（head）注册，而是视图内直接输出 <link>/<script>，兼容 zgy-dcat/laravel-admin 的 Pjax 局部刷新
编辑器高度：挂载点 height + 2px 补偿边框（dcat 全局 box-sizing:border-box），避免 wangEditor 高度警告
初始化：IIFE 直接初始化，库未就绪时动态注入并重试，兼容整页与 Pjax 两种模式

📄 License

MIT

zgy-dcat / wangeditor

Maintainers

Package info

Statistics

Security