You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.0 KiB
70 lines
2.0 KiB
<?php
|
|
|
|
namespace App\Admin\Extensions;
|
|
|
|
use Illuminate\Support\Collection; // 引入集合类
|
|
use Encore\Admin\Form\Field; // 引入表单字段基类
|
|
|
|
class WangEditor extends Field
|
|
{
|
|
protected $view = 'admin.wang-editor'; // 定义视图文件路径
|
|
|
|
// 引入 WangEditor 的 CSS 文件
|
|
protected static $css = [
|
|
'/vendor/wangEditor-3.1.1/release/wangEditor.css',
|
|
];
|
|
|
|
// 引入 WangEditor 的 JS 文件
|
|
protected static $js = [
|
|
'/vendor/wangEditor-3.1.1/release/wangEditor.js',
|
|
];
|
|
|
|
/**
|
|
* 渲染 WangEditor 编辑器.
|
|
*
|
|
* @return string 返回渲染后的 HTML
|
|
*/
|
|
public function render()
|
|
{
|
|
// 格式化字段名称
|
|
$name = $this->formatName($this->column);
|
|
// 获取 CSRF 令牌
|
|
$token = csrf_token();
|
|
// 定义上传图片的服务器地址
|
|
$url = admin_base_path('upload/editor');
|
|
|
|
// 定义 JavaScript 代码，初始化 WangEditor
|
|
$this->script = <<<EOT
|
|
|
|
var E = window.wangEditor; // 获取 WangEditor 对象
|
|
var editor = new E('#{$this->id}'); // 创建编辑器实例，绑定到指定的 HTML 元素
|
|
editor.customConfig.zIndex = 0; // 设置编辑器的 z-index
|
|
editor.customConfig.uploadFileName = 'pictures[]'; // 设置上传文件的名称
|
|
|
|
// 配置服务器端地址
|
|
editor.customConfig.uploadImgServer = '{$url}'; // 设置图片上传的服务器地址
|
|
editor.customConfig.uploadImgParams = {
|
|
_token: '{$token}' // 设置上传参数，包括 CSRF 令牌
|
|
};
|
|
|
|
// 文件改变时，将 HTML 内容添加到隐藏域
|
|
editor.customConfig.onchange = function (html) {
|
|
$('input[name=\'$name\']').val(html); // 更新隐藏域的值为编辑器内容
|
|
}
|
|
|
|
// 监听上传错误
|
|
editor.customConfig.uploadImgHooks = {
|
|
fail: function (xhr, editor) {
|
|
var response = $.parseJSON(xhr.response); // 解析服务器返回的 JSON
|
|
alert(response.msg); // 弹出错误信息
|
|
}
|
|
};
|
|
|
|
editor.create(); // 创建编辑器实例
|
|
|
|
EOT;
|
|
|
|
return parent::render(); // 调用父类的 render 方法，返回最终的 HTML
|
|
}
|
|
}
|