Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonexyz/wang-editor-v4
laravel-admin 插件 wangEditorV4版本富文本编辑器
https://github.com/jonexyz/wang-editor-v4
Last synced: about 1 month ago
JSON representation
laravel-admin 插件 wangEditorV4版本富文本编辑器
- Host: GitHub
- URL: https://github.com/jonexyz/wang-editor-v4
- Owner: jonexyz
- License: mit
- Created: 2021-07-17T16:22:17.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-30T15:28:20.000Z (over 2 years ago)
- Last Synced: 2024-09-18T12:48:28.993Z (3 months ago)
- Language: JavaScript
- Size: 520 KB
- Stars: 16
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-laravel-admin - wangEditorV4 - wangEditor 富文本编辑器 v4 (扩展包 / 字段类扩展包)
README
laravel-admin 插件 wangEditor V4 版本富文本编辑器
======
##### 2022-07-30 更新
##### laravel-admin extension wangEditor 5 富文本编辑器插件 beta 版
#### https://github.com/jonexyz/wang-editor-v5
======
首先声明，此插件是参照 https://github.com/laravel-admin-extensions/wangEditor 进行修改而来
其次，在原有基础上做了些改进，同一页面支持多个富文本编辑器，且可单独配置改富文本编辑器的配置项。
laravel-admin 插件的富文本编辑器插件本人相中了 wangEditor ，但是相关的插件好像许久都没人维护了，奈何就自己动手吧，根据 wangEditor 的插件的源码与 laravel-admin 中扩展开发的文档，完成了此V4版本的 wangEditor 富文本编辑器插件。
V4版本与V3相比，还是好用很多了。
---
使用方法，此插件仅使用与 laravel-admin 1.* 版本
1.安装扩展
composer require jonexyz/wang-editor-v4
2.发布静态资源包
php artisan vendor:publish --tag=jonexyz-wangEditorV4
3.配置富文本编辑器配置，参考如下
其中 `default` 表示默认配置，
`title` 表示对字段为 `title` 的表单进行单独的富文本编辑器设置，
```
'extensions' => [
'wang-editor-v4' => [
'enable' => true,
'config' => [
'default'=>[
'uploadImgServer' => '/'.env('ADMIN_ROUTE_PREFIX', 'admin').'/upload',
'uploadImgMaxSize' => 3 * 1024 * 1024, // 将图片大小限制为 3M
'uploadFileName' => 'images[]', //定义上传的filename，即上传图片的名称
'height'=>500
],
'title'=>[
'height'=>100,
'menus' => [
'head',
'bold',
'fontSize',
]
]
]
]
]
```
4.修改 `\app\Admin\bootstrap.php` 中设置删除数组中的 `editor` 字段
5.在form表单中使用它：
```
$form->editor('content');
```
6.图片上传默认使用base64格式化后与文本内容一起存入数据库，如果要上传图片到本地接口，可参照如下代码，另还需设置插件上传路径参数 `uploadImgServer`
```
get('type');
$dir_path = 'uploads/' . config('admin.upload.directory.image'); // 文件存储路径
$rule = ['jpg', 'png', 'gif']; //允许的图片后缀
if ($request->hasFile('images')) {
$files = $request->file('images'); //接前台图片
$path = [];
foreach ($files as $file) {
$clientName = $file->getClientOriginalName();
// $tmpName = $file->getFileName();
// $realPath = $file->getRealPath();
$size = $file->getSize();
$entension = $file->getClientOriginalExtension();
if (!in_array($entension, $rule)) {
continue;
}
$newName = md5(date("Y-m-d H:i:s") . $clientName) . "." . $entension;
$path[] = [
'path' => $file->move($dir_path, $newName),
'file_name' => $clientName,
'size' => $size
];
//$namePath = $url_path . '/' . $newName;
//return $path;
}
$insert_data = [];
foreach ($path as $p) {
$file_path = str_replace("\\", "/", $p['path']->getPathname());
$data[] = config('APP.URL') . '/' . $file_path;
$insert_data[] = [
'file_name' => $p['file_name'],
'path' => $file_path,
'size' => $p['size'],
'created_at' => date('Y-m-d H:i:s'),
'updated_at' => date('Y-m-d H:i:s')
];
}
return $res = ['errno' => 0, 'data' => $data];
}
}
}
```
**水平有限，如有不当支持见谅。**
