這是一個常用的富文本編輯器而已,特別注意(本地圖片上傳后,圖片的寬度會固定,建議編輯一下,否則自適應(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ù)。