您现在的位置是：首页 >技术交流 >laravel-admin安装wang-Editor3之坑网站首页技术交流

先说坑，一开始不知道哪个步骤配置问题，在富文本中上传图片可以正常传到服务器，但是前端无法回显，一直提示图片上传失败，在admin.php的wang-editor配置项中开启debug后，在浏览器console中也只是显示什么undefined。

后来干脆重写部署一个站点，安装配置完成wang-editor后，可以正常上传图片。于是再将这次的配置原封不动在前面那个站点配置，结果还是跟之前一样报错，折腾许久。后面干脆尝试清理下缓存，执行：php artisan cache:clear ，再上传图片，竟然成功了。很明显之前是因为laravel框架的缓存问题。

具体说下配置过程：
一、准备工作

1、首先安装laravel、laravel-admin，创建数据库，等等不多说，总之，需要先将站点运行起来。

2、我们将在文章（article）模块中使用这个富文本插件，自然需要创建article模块相关控制器、模型、路由等。

2.1、创建数据迁移表：php artisan make:migration create_articles_table --create=articles

2.2、创建数据表：在migrations目录下，进入刚才创建的迁移表，添加字段信息，然后再执行 php artisan migrate

2.3、创建模型：执行 php artisan make:model Article

2.4、创建laravel-admin控制器：执行 php artisan admin:make ArticleController --model=AppModelsArticle
2.5、创建路由：在Admin/routes.php里添加路由 $router->resource('articles', ArticleController::class);
2.6、在admin后台添加文章管理菜单，这个就不多说

二、下载使用wang-editor插件
laravel-admin官方文档中有下载链接：https://github.com/laravel-admin-extensions/wangEditor，里面有安装步骤，基本就按里面进行：
安装

// laravel-admin 1.x
composer require "laravel-admin-ext/wang-editor:1.*"

// laravel-admin 2.x
composer require laravel-admin-ext/wang-editor

然后

php artisan vendor:publish --tag=laravel-admin-wangEditor

配置
在config/admin.php文件的extensions，加上属于这个扩展的一些配置

    'extensions' => [

        'wang-editor' => [
        
            // 如果要关掉这个扩展，设置为false
            'enable' => true,
            
            // 编辑器的配置
            'config' => [
                
            ]
        ]
    ]

编辑器的配置可以到wangEditor文档找到，比如配置上传图片的地址上传图片

    'config' => [
        // `/upload`接口用来上传文件，上传逻辑要自己实现，可参考下面的`上传图片`
        'uploadImgServer' => '/upload'
    ]

在form表单中使用它：

$form->editor('content');

上传图片
图片上传默认使用base64格式化后与文本内容一起存入数据库，如果要上传图片到本地接口，那么下面是这个接口对应的action代码示例：

use IlluminateHttpRequest;
use IlluminateSupportFacadesStorage;

public function upload(Request $request)
{
    $urls = [];

    foreach ($request->file() as $file) {
        $urls[] = Storage::url($file->store('images'));
    }

    return [
        "errno" => 0,
        "data"  => $urls,
    ];
}

Note: 配置路由指向这个action，存储的disk配置在config/filesystem.php中，这个需参考laravel官方文档。
上面的按照步骤操作就行，关键是最后的这个Note提示，这个是需要自己操作的，否则无法使用。

三、配置路由指向这个action
需要创建一个控制器以及路由，用来实现上面config配置项中的'uploadImgServer' => '/upload'接口。
3.1、创建图片上传控制器，执行：php artisan make:controller UploadController，在控制器中写入upload方法：

namespace AppHttpControllers;

use IlluminateHttpRequest;
use IlluminateSupportFacadesStorage;

class UploadController extends Controller
{
    //
    public function upload(Request $request)
    {
        $urls = [];
        foreach ($request->file() as $file) {
            $urls[] = Storage::url($file->store('public/images'));
        }

        return [
            "errno" => 0,
            "data"  => $urls,
        ];
    }
}

3.2、添加路由，在router/web.php里添加路由：

#上面要引入 use AppHttpControllersUploadController;
Route::post('/upload',[UploadController::class,'upload']);

3.3、最后一步很重要，创建从 public/storage 到 storage/app/public 的符号链接。因为只有/public下资源才能公开访问。使用 Artisan 命令 storage:link 来创建符号链接。进入根目录：

php artisan storage:link

安装全部结束

补充说明：
如果回显报错提示无法访问的链接是http://localhost/开头的，需要确认下配置项里有没有配置 'url' => env('APP_URL').'/upload',
如果有，则尝试删除或者修改env(‘APP_URL’)的变量值为你自己的域名