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

富文本编辑器哪个好一直是很有争议了，毕竟每人的需求和审美是有差别的。近年来，使用过比较多的是百度编辑器，虽然功能强且适合写文章，不过项目已不再维护，安全问题及本来的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.uploadVideoServer = '/admin/uploadvideo'
    editor.config.uploadVideoAccept = ['mp4']
    editor.config.uploadVideoName = 'video'
    editor.config.uploadVideoHeaders = {
         'X-CSRF-TOKEN': Dcat.token
    }
    
    //editor.config.uploadImgShowBase64 = true
    //图片上传端口
    editor.config.showLinkImg = false
    editor.config.uploadImgServer = '/admin/uploadimg'
    editor.config.uploadImgHeaders = {
         'X-CSRF-TOKEN': Dcat.token
    }
    // 一次最多上传 10 个图片
    editor.config.uploadImgMaxLength = 10
    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.config.linkImgCallback = function (src,alt,href) {
    //     console.log('图片 src ', src)
    //     console.log('图片文字说明',alt)
    //     console.log('跳转链接',href)
    // }
    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: '',
  // // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
  // accessKeyId: '',
  // 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文件中添加：

    <script src="/vendor/wangeditor/highlight/highlight.pack.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //兼容原百度编辑器代码高亮
            var allpre = document.getElementsByTagName("pre");
            for(i = 0; i < allpre.length; i++) 
            {
                var onepre = document.getElementsByTagName("pre")[i];
                var mycode = document.getElementsByTagName("pre")[i].innerHTML;
                onepre.innerHTML = '<code id="mycode">'+mycode+'</code>';
            }
            //代码高亮
            $('pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
            //添加行号，找到'pre code'取得内容并按照换行符split，我们可以得到代码块的行数，构建一个包含从数字1到行数n的行号列表追加到</pre>和</code>的闭合标签之间
            $('pre code').each(function(){
                var lines = $(this).text().split('\n').length;
                var $numbering = $('<ul/>').addClass('pre-numbering');
                $(this).addClass('has-numbering').parent().append($numbering);
                for(i=1;i<=lines;i++){
                    $numbering.append($('<li/>').text(i));
                }
            });
            var audio = document.getElementsByTagName("audio");
            // 暂停函数
            function pauseAll() {
                var self = this;
                [].forEach.call(audio, function (i) {
                    // 将audios中其他的audio全部暂停
                    i !== self && i.pause();
                })
            }
            // 给play事件绑定暂停函数
            [].forEach.call(audio, function (i) {
                i.addEventListener("play", pauseAll.bind(i));
            })
        });
    </script>

记录完毕。