tp5.1整合ckeditor+图片上传阿里云oss

最新推荐文章于 2023-02-18 20:14:47 发布

薛东东

最新推荐文章于 2023-02-18 20:14:47 发布

阅读量584

点赞数

分类专栏： thinkphp php

本文链接：https://blog.csdn.net/qq_28195449/article/details/102543726

版权

php 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

thinkphp

10 篇文章 1 订阅

订阅专栏

1.html代码

<div class="form-group">
    <label for="content" class="col-sm-2 control-label">内容</label>
    <div class="col-sm-10">
        textarea id="editor" name="content" rows="10" cols="80"></textarea>
    </div>
</div>
<script src="/static/res/admin/ckeditor5/ckeditor.js"></script>
<script src="/static/res/admin/ckeditor5/translations/zh-cn.js"></script>
<script>
    let newEditor;
    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            language: 'zh-cn', //设置中文
            ckfinder: {
                uploadUrl : ''
                //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
                //$result = ['uploaded'=>false,'url'=>'','message'=>$msg];
            }
        } )
        .then( editor => {
            newEditor = editor;
        } )
        .catch( err => {
            console.error( err.stack );
        } );

    document.querySelector( '#saveartice' ).addEventListener( 'click', () => {
        const editorData = newEditor.getData();
        $('#editor').val(editorData);
    } );
</script>

2.后台上传代码

    // 单图上传- ckeditor
    public function editorupload()
    {
        $file = request()->file('upload');
        $folder = 'ckeditor';
        // 配置文件
        $alioss = config('alioss.');
        $accessKeyId = $alioss['accessKeyId'];
        $accessKeySecret = $alioss['accessKeySecret'];
        $endpoint = $alioss['endpoint'];
        $bucket = $alioss['bucket'];

        // 文件名称生成
        $file_name = sha1(date('YmdHis',time()).uniqid()).'.'.pathinfo($file->getInfo()['name'],PATHINFO_EXTENSION);
        // 文件路径
        $file_path = config('oss_save_path').'/'.$folder. '/' .date('Ymd');
        $url =  $file_path .'/'. $file_name;
        try{
            $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
            $result =$ossClient->uploadFile($bucket,$url,$file->getInfo()['tmp_name']);
            if ($result['info']['http_code']==200) {
                $result = ['uploaded'=>true,'url'=>$result['info']['url'],'message'=>'上传成功'];
            }else{
                $result = ['uploaded'=>false,'url'=>'','message'=>'上传错误'];
            }
        } catch(OssException $e) {
            $msg = $e->getMessage();
            $result = ['uploaded'=>false,'url'=>'','message'=>$msg];
        }
        return json($result);
    }