Dcat admin后端框架整合最新版wangEditor编辑器的方法

发布于:2020/12/27


富文本编辑器哪个好一直是很有争议了,毕竟每人的需求和审美是有差别的。近年来,使用过比较多的是百度编辑器,虽然功能强且适合写文章,不过项目已不再维护,安全问题及本来的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)
      })
}

2012.12.19日发现,一次性多图上传出错,需要将后端控制器修改如下:

namespace App\Admin\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

//wangeditor编辑器上传图片接口
class FileController
{
    public function handle(Request $request)
    {
        if(count($request->file()) > 0){
            foreach($request->file() as $i=>$flie){
                $newName = time().$i.'.'.$flie->extension();
                $path[] = url('uploads/'.$flie->storeAs('images',$newName,'admin'));
            }
        }
        return $path ? ["errno"=>0,"data"=>$path]: ["errno"=>'上传失败'];
    }
    
}

前台使用代码高亮的话,只需要在views/layoutsviews/layouts的app.blade.php文件中添加:

    <link rel="stylesheet" type="text/css" href="/vendor/wangeditor/highlight/styles/github.css">
    <script src="/vendor/wangeditor/highlight/highlight.pack.js"></script>
    <!-- 引用jquery、highlight.pack.js 之后,再执行如下代码-->
    <script type="text/javascript">
        $(function(){
            $('pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        });
    </script>

记录完毕。

上一篇: 没有更多了
下一篇: 中华人民共和国

  • 最新评论(共0条)

需要登录才能发表评论