导航菜单

GitHub

laravel-admin extensionwangEditor 5 富文本编辑器插件仅限于 wangEditor 5 简单使用,满足基本的富文本编辑器需求,复杂的富文本编辑器使用场景,可参考此代码,依据 laravel-admin 文档描述的插件开发流程自行开发插件

仅适用与 laravel-admin 1.* 版本

食用步骤

// 安装扩展composer require jonexyz/wang-editor-v5// 发布静态资源包php artisan vendor:publish --tag=wang-editor-v5编辑器设置,可以一个页面使用多个富文本编辑器

'default' 表示默认配置,当数据表字段与配置键名不一致时,取 default 对应的配置

'article' 表示针对数据表字段 'article' 使用 wangEditor 5 富文本编辑器插件

$form->wangEditor('article', __('文章'));

设置信息参考如下:

'extensions' => ['wang-editor-v5' => ['enable' => true,'default'=>['placeholder'=>'请输入内容...','height'=>'600px','width'=>'100%',// 图片上传相关设置'uploadImage'=>[// 上传接口'server'=> '/api/upload_img',// 10M 以下插入 base64//'base64LimitSize'=> 10 * 1024 * 1024,// form-data fieldName ,默认值 'wangeditor-uploaded-image''fieldName'=> 'your-custom-name',// 单个文件的最大体积限制,默认为 2M'maxFileSize'=> 1 * 1024 * 1024, // 1M// 最多可上传几个文件,默认为 100'maxNumberOfFiles'=> 10,// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []'allowedFileTypes' => ['image/*'],// 自定义上传参数,例如传递验证的 token 等。参数会被添加到 formData 中,一起上传到服务端。'meta'=> ['token'=> 'xxx','otherKey'=> 'yyy'],// 将 meta 拼接到 url 参数中,默认 false'metaWithUrl'=> false,// 自定义增加 http header'headers'=> ['Accept'=> 'text/x-json','otherKey'=> 'xxx'],// 跨域是否传递 cookie ,默认为 false'withCredentials'=> true,// 超时时间,默认为 10 秒'timeout'=> 5 * 1000, // 5 秒],// 上传视频'uploadVideo'=>[// 上传入口api'server'=> '/api/upload_video',// form-data fieldName ,默认值 'wangeditor-uploaded-video''fieldName'=> 'your-custom-name',// 单个文件的最大体积限制,默认为 10M'maxFileSize'=> 5 * 1024 * 1024, // 5M// 最多可上传几个文件,默认为 5'maxNumberOfFiles'=> 3,// 选择文件时的类型限制,默认为 ['video/*'] 。如不想限制,则设置为 []'allowedFileTypes'=> ['video/*'],// 自定义上传参数,例如传递验证的 token 等。参数会被添加到 formData 中,一起上传到服务端。'meta'=> ['token'=> 'xxx','otherKey'=> 'yyy'],// 将 meta 拼接到 url 参数中,默认 false'metaWithUrl'=> false,// 自定义增加 http header'headers'=> ['Accept'=> 'text/x-json','otherKey'=> 'xxx'],// 跨域是否传递 cookie ,默认为 false'withCredentials'=> true,// 超时时间,默认为 30 秒'timeout'=> 15 * 1000, // 15 秒// 视频不支持 base64 格式插入]],'article'=>['placeholder'=>'请输入内容...','height'=>'600px','width'=>'100%',]]],

具体使用参考如下:

protected function form(){$form = new Form(new Post());$form->text('title', __('标题'));// 使用的是默认配置 default $form->wangEditor('content', __('内容'));// 使用的是配置 article $form->wangEditor('article', __('文章'));return $form;}图片上传api返回格式,参考官方文档:https://www.wangeditor.com/v5/menu-config.html#%E5%9B%BE%E7%89%87// 单图{"errno": 0, // 注意:值是数字,不能是字符串"data": {"url": "xxx", // 图片 src ,必须"alt": "yyy", // 图片描述文字,非必须"href": "zzz" // 图片的

相关推荐: