laravel-admin 集成富文本编辑器wangEditor教程

本文链接：https://blog.csdn.net/m0_55958115/article/details/117167493

这篇教程介绍了如何在laravel-admin环境下集成富文本编辑器wangEditor，包括运行环境设置、组件类创建、视图文件制作、laravel-admin注册、图片上传处理、路由配置、访问图片地址的方法以及最终的调用步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

laravel-admin 集成富文本编辑器wangEditor教程

运行环境：

系统 win10 ，环境：集成环境 phpstudy8 WNMP

php: >=7.0.0,

barryvdh/laravel-ide-helper: ^2.4,

doctrine/dbal: ~2.3,

encore/laravel-admin: 1.5.*

laravel/laravel: 5.5.*

wangEditor:3.1.1

准备工作

下载wangEditor扩展包，安装到public/vendor/目录下，下载地址：https://www.wangeditor.com/

一、然后新建组件类

app/Admin/Extensions/WangEditor.php

<?php
namespace App\Admin\Extensions;
use Encore\Admin\Form\Field;
class WangEditor extends Field
{
   
    //加载的视图地址：resources/views/admin/wang-editor;
    protected $view = 'admin.wang-editor';
    //加载css,js地址/public/vendor/wangEditor...
    protected static $css = [
        '/vendor/wangEditor-3.1.1/release/wangEditor.min.css',
    ];
    protected static $js = [
        '/vendor/wangEditor-3.1.1/release/wangEditor.min.js',
    ];
    //页面进行渲染
    public function render()
    {
   
        $name = $this->formatName($this->column);

        $this->script = <<<EOT
var E = window.wangEditor
var editor = new E('#{
     $this->id}');
editor.customConfig.uploadFileName = 'mypic[]';
editor.customConfig.uploadImgHeaders = {
    'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
editor.customConfig.zIndex = 0;
editor.customConfig.uploadImgServer = '/uploadFile';
editor.customConfig.onchange = function (html) {
    $('input[name=$name]').val(html);
}
editor.customConfig.uploadImgHooks = {
    customInsert: function (insertImg, result, editor) {
        console.log(result);
        if (typeof(result.length) != "undefined") {
            for (var i = 0; i <= result.length - 1; i++) {
                var j = i;
                var url = result[i].newFileName;
                insertImg(url);
            }
            toastr.success(result[j]['info']);
        }
        switch (result['ResultData']) {
            case 6:
                toastr.error("最多可以上传4张图片");
                break;
            case 5:
                toastr.error("请选择一个文件");
                break;
            case 4:
                toastr.error("上传失败");
                break;
            case 3:
                toastr.error(result['info']);
                break;
            case 2:
                toastr.error("文件类型不合法");
                break;
            case 1:
                toastr.error(result['info']);
                break;
        }
    }
}
editor.create();
EOT;
        return parent::render();