这是一个常用的富文本编辑器而已，特别注意(本地图片上传后，图片的宽度会固定，建议编辑一下，否则自适应时手机版会变成)

一、js部分

$(document).ready(function () {

$('.summernote').summernote({

height: 300,

lang: 'zh-CN', //如果开启中文，要导入中文插件

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后端部分

/*发布文章图片上传 这个是上传控制器 因为 我把 上传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)) {

//生成随机名

$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;

//临时文件移动到文件夹内

move_uploaded_file($files['file']['tmp_name'], $filename);

return $filename;

} else {

return false;

}

}