laravel富文本编辑器使用&上传图片

最新推荐文章于 2024-06-02 12:50:22 发布

anhaogou8771

最新推荐文章于 2024-06-02 12:50:22 发布

阅读量1k

点赞数

文章标签： php 开发工具 javascript ViewUI

原文链接：http://www.cnblogs.com/mg007/p/11195931.html

版权

wangeditor富文本编辑器： http://www.wangeditor.com/

案例使用laravel框架

1、定义2个路由

// /routes/web.php
Route::get('/test','Test\TestController@index');

// /routes/api.php
Route::post('/editor/upload/picture', 'Test\TestController@editorUploadPicture');
//编辑器上传图片,放到api中可以避免csrf校验

2、控制器

<?php

namespace App\Http\Controllers\Test;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class TestController extends Controller
{
    public function index()
    {
        return view('index');
    }

    //编辑器上传图片
    public function editorUploadPicture(Request $request)
    {
        $directory = $request->input('directory','editor-upload/');

        if(!$request->hasFile('picture')){
            return json_encode(['errno'=>0,'msg'=>'no file','data'=>[]]);
        }

        $picture = $request->file('picture');

        if($picture->isValid()) {
            $extension = $picture->getClientOriginalExtension();//获得上传文件后缀
            $newName = date('YmdH').'-' . mt_rand(1000, 9999) . '.' . $extension;

            $picture->move($directory, $newName);//上传文件到服务器指定目录，并重命名
            $picturePath = '/'.$directory . $newName; //给用户一个相对路径

            return json_encode(['errno'=>0,'msg'=>'ok','data'=>[$picturePath]]);
        }
        return json_encode(['errno'=>0,'msg'=>'error','data'=>[]]);
    }
}

3、视图

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
</head>
<body>
<div class="col-lg-10">
    <div id="ContentHtml"></div>
    <textarea id="Content" name="content" style="display: none;"></textarea>
</div>

<script type="text/javascript">
    $(function(){
        //--富文本编辑器 start
        var E = window.wangEditor;
        var editor = new E('#ContentHtml');
        var $text1 = $('#Content');

        editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
        editor.customConfig.uploadImgServer = '/api/editor/upload/picture?directory=editor-upload/';  // 上传图片到服务器
        editor.customConfig.uploadFileName = 'picture';

        editor.customConfig.onchange = function (html) {
            $text1.val(html);// 监控变化，同步更新到 textarea
        };
        editor.create();
        $text1.val(editor.txt.html());// 初始化 textarea 的值
        //--富文本编辑器 end
    });
</script>
</body>
</html>

4、效果

转载于:https://www.cnblogs.com/mg007/p/11195931.html

anhaogou8771

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
laravel富文本编辑器使用&上传图片

wangeditor富文本编辑器： http://www.wangeditor.com/案例使用laravel框架1、定义2个路由// /routes/web.phpRoute::get('/test','Test\TestController@index');// /routes/api.phpRoute::post('/editor/upload/picture', '...
复制链接

扫一扫