Simditor上传图片教程

我曾经说过了,最近有一个项目用了Simditor编辑器,最近我发现网上基本上所有的"Simditor上传图片"都需要修改“simditor.js”里面的代码。但我查找了大量的相关手册,发现没有必要,修改“simditor.js”,纯粹是多此一举。当然,也不排除是Simditor新版本的原因,或者老版本的Simditor也需要修改“simditor.js”。

 

版本:jQuery v3.5.1、Simditor v2.3.27

 

今天,这里主要是分享一下"Simditor上传本地图片"的一个简单原理,其实也非常的简单,我以"实战+PHP示例代码"结合的方式给大家展示一下。

 

在了解Simditor上传图片的时候,前提是你已经熟悉了:Simditor使用方法(快速入门教程),否则,你可能看不明白以下讲解的东西。

 

一、前台

我的前台是一个 upload.php 的文件,主要的代码如下:

......
  <div class="input-group mb-3">
                            <div class="col-md-12">
                                <textarea name="contents" id="editor" autofocus></textarea>
                            </div>

                        </div>
......

<script>
        toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough',
            'color', 'fontScale', 'ol', 'ul', 'blockquote', 'code', 'table',
            'link', 'image', 'hr',  'indent', 'outdent','alignment' ,'html'];
        var editor = new Simditor({
            textarea : $('#editor'),
            placeholder : '',
            pasteImage: true,
            toolbarFloat:true,
            toolbar : toolbar,  //工具栏
            defaultImage : '/public/images/280-210.jpg', //编辑器插入外链图片时使用的默认图片
            cleanPaste:true,
            upload : {
                url : '/admin/?action=image&type=simditor', //文件上传的接口地址
                params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                fileKey: 'upload_file', //服务器端获取文件数据的参数名
                connectionCount: 3,
                leaveConfirm: '正在上传文件'
            }
        });
    </script>
......

 

二、后台

我的后台图片上传提交的接口是:/admin/?action=image&type=simditor,代码如下:

if($action === 'image' && $type === 'simditor'){
    if($_FILES['upload_file']){
        $image_str_json = json_encode([
            "success" =>[
               true
            ],
            "msg" => "上传成功",
            "file_path" => "/public/uploads/images/2020/08/fujieace_com_5f3a3f7aacc62.jpg" // 是否把这些配置加入`initialPreview`。
            // 如果设置为`false`,它会重载初始预览。
            // 如果设置为`true`,它会加入初始预览之中。
            // 如果这个属性没有被设置或者没有传出,它会默认为`true`。
        ],320);
        echo $image_str_json;
        } else{
        $image_str_json = json_encode([
            "success" =>[
                false
            ],
            "msg" => "上传失败",
            "file_path" => "/public/images/280-210.jpg" // 是否把这些配置加入`initialPreview`。
            // 如果设置为`false`,它会重载初始预览。
            // 如果设置为`true`,它会加入初始预览之中。
            // 如果这个属性没有被设置或者没有传出,它会默认为`true`。
        ],320);
        echo $image_str_json;
    }
}else{
    require_once ABSPATH . '/view/404.php';
}

 

注意:

1、这是为了让大家更加的清楚,因此,上传成功或失败后我默认返回的图片是一个绝对的路径。主要是让大家快速看明白一个效果。

 

2、大家只需要在“绿颜色”的代码中写自己的逻辑代码即可!例如:接爱到的图片我通过各种判断处理再存储到磁盘上以及数据库中。

 

3、无论“Simditor上传图片”是成功还是失败,必须学我上面的示例代码,返回一个合格的JSON数据。

    A+
发布日期:2020年08月23日 10:37:14  所属分类:Simditor
最后更新时间:2020-09-24 15:19:29
评分: (6 票;平均数3.67 ;最高评分 5 ;用户总数6;总得分 22;百分比73.33)
付杰
wordpress站群服务 泛解析二级域名 二级目录站群
wordpress站群服务 泛解析二级域名 二级目录站群
  • ¥ 1999.9元
  • 市场价:4800元
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
  • ¥ 6.8元
  • 市场价:8.8元
wp discux 帝国 dedecms phpcms等快速建站
wp discux 帝国 dedecms phpcms等快速建站
  • ¥ 99.9元
  • 市场价:499.9元
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
  • ¥ 9.9元
  • 市场价:49.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  0   博主  0

  1. 头像 科技爱好者 0

    你好 付杰
    Simditor v2.3.27 和 v2.3.28 两个版本我都试过了 依赖库也都加载了
    textarea区域Simditor的富文本编辑器也能正常显示
    但上传本地图片的功能一直不可用

    有两个问题
    1、初始化js里 未配置imageButton参数 则图片工具按钮只支持图片外链
    官方文档说明此参数默认值为[‘upload’, ‘external’] 对应本地图片上传与图片外链
    只有手动配置此参数为[‘upload’, ‘external’] 图片工具栏才支持本地图片上传与图片外链

    2、在1的条件下 即使图片工具栏有本地图片上传的按钮 点击以后也不会有添加本地文件的弹窗 而是直接弹出添加外链图片的窗口

    猜测是upload的js库没起作用 但是已经引用了…
    不知道你有没有遇到这种问题

    代码如下:

    var editor = new Simditor({
      textarea: $('#editor'),
      //optional options
      imageButton: ['upload', 'external'],
    //    defaultImage : '/noi/static/libs/simditor/t.jpg',
        upload :{
            url : 'http://127.0.0.1:8000/noi/api/simditor_upload',
            params: null,
            fileKey: 'upload_file',
            connectionCount: 3,
            leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
                },
        pasteImage:true,
    });
    • 付杰 付杰

      @科技爱好者 你说的这种情况没有遇到过。
      最主要的是:“工具栏有本地图片上传的按钮,点击以后也不会有添加本地文件的弹窗,而是直接弹出添加外链图片的窗口,”这种情况确实不应该出现。本地图片上传怎么会跳转到外链图片?我也想不通,具体只有远程,我看了才知道。
      可以+QQ群:231560525