jQuery version: 1.12.4

Bootstrap version: 3.3.7

summernote 是基于jQuery 和 Bootstrap 的轻量级富文本编辑器

所以在使用summernote之前必须先引入 jquery 和 Bootstrap

html 部分

javascript代码

let summer = $('#summernote');

summer.summernote({

callbacks: {

onImageUpload: function (files) {

sendFile(files);

}

}

});

/** * 发送图片文件给服务器端 */

function sendFile(files) {

let imageData = new FormData();

imageData.append("imageData", files[0]);

$.ajax({

url: '/create/uploads', // 图片上传url

type: 'POST',

data: imageData,

cache: false,

contentType: false,

processData: false,

dataType: 'json', // 以json的形式接收返回的数据

// 图片上传成功

success: function ($result) {

let imgNode = document.createElement("img");

imgNode.src = $result.img;

summer.summernote('insertNode', imgNode);

},

// 图片上传失败

error: function () {

console.log('图片上传失败');

}

});

}

php代码( laravel)

namespace App\Http\Controllers;

use App\Note;

use Illuminate\Http\Request;

class NotesController extends Controller {

// 上传图片

public function uploads(Request $request) {

// 接收数据

$file = $request->file('imageData');

// 判断是否上传成功

if (!$file->isValid() ) {

return json_encode(['status' => 0,'message' => '文件上传失败']);

}

// 获取文件扩展名

$ext = $file->getClientOriginalExtension();

// 判断文件类型是否允许

if (! in_array($ext,['jpg','png','gif'])) {

return json_encode(['status' => 0,'message' => '文件类型不允许']);

}

// 为避免一个文件夹中的文件过多和文件名重复,所以需要设置上传文件夹和文件名

$fileName = $this->setFilePath(_UPLOADS_.'/'.date('Y_m_d'),$ext);

// 上传文件并判断

if ( move_uploaded_file($file->getRealPath(),$fileName) ) {

return json_encode([

'status' => 1,

'message' => '文件上传成功',

'img' => $fileName

]);

}

}

/**

* 设置文件路径和文件名称

* @param string $path 文件要上传的目标文件夹

* @param string $ext 文件后缀名

* @return strint 返回完整的路径+文件名称

*/

public function setFilePath ($path,$ext) {

// 修正路径和文件后缀名

$path = rtrim($path,'/').'/';

$ext = '.'.trim($ext,'.');

// 设置文件名

if (! file_exists($path)) {

@mkdir($path);

}

// 设置文件名

do{

$fileName = time().mt_rand();

}while( file_exists($path.$fileName.$ext) );

return $path.$fileName.$ext;

}

}