CKEditor5 图片上传（tp5-oss）

最新推荐文章于 2024-03-28 16:12:33 发布

熊 :)

最新推荐文章于 2024-03-28 16:12:33 发布

阅读量1.1k

点赞数 1

分类专栏： CKEditor5

本文链接：https://blog.csdn.net/weixin_42957379/article/details/92973943

版权

本文介绍了如何将CKEditor5编辑器与ThinkPHP5（TP5）框架结合，实现在编辑器中上传图片到阿里云OSS存储服务。包括前端上传插件配置和后端控制器处理，以及config.php配置文件的修改。

摘要由CSDN通过智能技术生成

前端：

<script>

    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
            ckfinder: {
               uploadUrl : '{:url("Api/CkeditorUpload")}'
              //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
            },
            language: 'zh-cn',
        } )
        .then( editor => { window.editor = editor;} ).catch( err => { console.error( err.stack );} );

    ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName );
</script>

后端：

config.php

'local_upload_path'=>ROOT_PATH . 'public' . DS . 'uploads',

'oss'=>[
    'accessKeyId' => "xxx",
    'accessKeySecret' => "xxx ",
    // Endpoint以杭州为例，其它Region请按实际情况填写。