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

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);
    }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值