富文本编辑器哪个好一直是很有争议了，毕竟每人的需求和审美是有差别的。近年来，使用过比较多的是百度编辑器，虽然功能强且适合写文章，不过项目已不再维护，安全问题及本来的BUG较多（如插入表格），只能选择其它的编辑器。
Dcat admin是一个在laravel admin上二次开发的框架，已自带了一个富文本编辑器，功能也是很不错的。不过在试过了wangEditor后，发现这个更简洁易用，且能适配移动端。官网的文档有集成的方法，不过一是版本较老，是3.X的，二是有较多的错误需要修正，三是没有后端代码和代码高亮等功能说明。
下面就开始讲讲怎样集成最新的wangEditor4.x编辑器，并加上代码高亮，图片后端保存等。不足之处敬请见谅。
一、下载源码
链接：https://dj.ydjkt.net/wangpan/7Pa，提取码：1466
将源码下载后，解压到/public/vendor/wangeditor目录上，解压后的目录如下图：
二、在app/Admin/Extensions目录下，新建一个WangEditor.php，代码如下：
namespace App\Admin\Extensions;
use Dcat\Admin\Form\Field;
class WangEditor extends Field
{
protected $view = 'admin.wang-editor';
}
三、编辑app/Admin/bootstrap.php文件，添加如下代码：
use App\Admin\Extensions\WangEditor;
// 注册前端组件别名
Admin::asset()->alias('@wang-editor', [
'js' => ['/vendor/wangeditor/dist/wangEditor.min.js',
'/vendor/wangeditor/highlight/highlight.pack.js'
],
'css' => ['/vendor/wangeditor/highlight/styles/default.css'
]
]);
Form::extend('editor', WangEditor::class);
四、在resources/views/admin目录下，新建一个wang-editor.blade.php模板：
<div class="{{$viewClass['form-group']}}">
<label class="{{$viewClass['label']}} control-label">{{$label}}</label>
<div class="{{$viewClass['field']}}">
@include('admin::form.error')
<div {!! $attributes !!} style="width: 100%; height: 100%;">
<p>{!! $value !!}</p>
</div>
<input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" />
@include('admin::form.help-block')
</div>
</div>
<script require="@wang-editor" init="{!! $selector !!}">
var E = window.wangEditor
var editor = new E('#' + id);
editor.config.zIndex = 0
//editor.config.uploadImgShowBase64 = true
//图片上传端口
editor.config.uploadImgServer = '/admin/uploadimg'
editor.config.uploadImgHeaders = {
'X-CSRF-TOKEN': Dcat.token
};
editor.config.uploadFileName = 'photo'
editor.highlight = hljs
editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'bmp']
editor.config.languageType = ['PHP','Python','Bash','CSS','JavaScript','JSON','Html','SQL']
editor.config.onchange = function (html) {
$this.parents('.form-field').find('input[name={{ $name }}]').val(html);
}
editor.create();
</script>
五、在app/Admin/Controllers目录下新建一个控制器FileController.php：
namespace App\Admin\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
//wangeditor编辑器上传图片接口
class FileController
{
public function handle(Request $request)
{
if ($request->hasFile('photo')) {
$newName = time().'.'.$request->photo->extension();
$path = url('uploads/'.$request->file('photo')->storeAs('images',$newName,'admin'));
}
return $path ? ["errno"=>0,"data"=>[$path]]: ["errno"=>'上传失败'];
}
}
使用方法：$form->editor(‘content’);
接下来可以在后台新建一篇文章，测试看看上传图片，代码高亮等是否正常，正常就可以使用了：
如果要上传至阿里云OSS，首先，安装 OSS 相关工具，然后编写代码：
// 具体值需要去阿里云控制台获取
let client = new OSS({
// // region以杭州为例（oss-cn-hangzhou），其他region按实际情况填写。
// region: '<Your region>',
// // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
// accessKeyId: '<Your AccessKeyId>',
// accessKeySecret: '<Your AccessKeySecret>',
// bucket: 'Your bucket name',
});
editor.config.customUploadImg = function (resultFiles, insertImgFn) {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后，插入到编辑器的方法
client.put('myImg', resultFiles[0])
.then(function (res) {
// 上传图片，返回结果，将图片插入到编辑器中
insertImgFn(res.url)
}).catch(function (err) {
console.log(err)
})
}
记录完毕。
转载自：https://dj.ydjkt.net/blogs/1
提供