summernote.js圖片上傳的使用

這是一個常用的富文本編輯器而已,特別注意(本地圖片上傳后,圖片的寬度會固定,建議編輯一下,否則自適應(yīng)時手機(jī)版會變成)

一、js部分

<script src="{{__PUBLIC__}}/style/js/plugins/summernote/summernote-bs4.js"></script>
<script src="{{__PUBLIC__}}/style/js/plugins/summernote/summernote-zh-CN.min.js"></script>

    $(document).ready(function () {
        $('.summernote').summernote({
            height: 300, 
            lang: 'zh-CN', //如果開啟中文,要導(dǎo)入中文插件
            focus: true,
            callbacks: {
                //圖片上傳
                onImageUpload: function (files, editor, $editable) {
                    sendFile(files[0], editor, $editable);
                }
            }
        });
    });

    //上傳圖片
    function sendFile(file, editor, $editable) {
        var formdata = new FormData();
        formdata.append("file", file);
        $.ajax({
            //圖片上傳出來的url,返回的是圖片上傳后的路徑,http格式
            url: "url",
            type: "post",
            data: formdata,
            cache: false,
            contentType: false,
            processData: false,
            dataType: "json",
            success: function (result) {
                //url:圖片路徑 filename:圖片名稱
                $('.summernote').summernote('insertImage', result.img, 'img');
            },
            error: function () {
                alert("上傳失敗");
            }
        });
    }

二、php后端部分

    /*發(fā)布文章圖片上傳 這個是上傳控制器 因?yàn)?我把 上傳img方法封裝了 upimg*/
    private function upload_img()
    {
        if ($_FILES) {
            $result = $this->upimg($_FILES);
        }
        return json_encode([
            'img' => "/" . $result,
            ***
        ]);
    }


    /*上傳圖片 這里是 上傳到 public/news/img 中*/
    private function upimg($files)
    {
        /*截取后綴*/
        $suffix = substr($files['file']['name'], strrpos($files['file']['name'], '.'));
        $arr = array('.jpg', '.png', '.jpeg', '.gif');
        /*判斷是否為圖片*/
        if (in_array($suffix, $arr)) {
            //生成隨機(jī)名
            $str = date('dHis') . mt_rand(0, 9) . $suffix;
            //上傳文件到img文件
            $path = date('Ym'); // 接收文件目錄
            //判斷有沒有這個文件
            if (!file_exists('upload/' . $path)) {
                mkdir("upload/$path", 0777, true);
            }
            $filename = 'upload/' . $path . '/' . $str;
            //臨時文件移動到文件夾內(nèi)
            move_uploaded_file($files['file']['tmp_name'], $filename);
            return $filename;
        } else {
            return false;
        }
    }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容