1.summernote富文本編輯器
summernote是一款基於bootstrap的富文本編輯器，是一款十分好用的文本編輯器，還附帶有圖片和文件上傳功能。
那么在我們網站中想吧這個圖片上傳到服務器指定文件夾中，就要在選擇圖片是進行ajax移動圖片。
1.1了解summernote本身圖片保存方式。
summernote默認保存的是圖片的base64數據，並沒有存儲圖片文件。
2.進行summernote圖片的保存
Html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Summernote</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> //這個css和js請到官網進行下載（點擊上面的summernote就可以直達官網） <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script> </head> <body> <form action="{:U(upload/upload)}" method="post"> <div id="summernote"><p>Hello Summernote</p></div> <input type="submit" value="提交"> </form> </body> </html>
從Html代碼中就可以看出怎么使用這個富文本編輯器
直接<div id="summernote"><p>Hello Summernote</p></div>
因為下面代碼的緣故，這里的id最好用summernote（你也可以改，如果不嫌麻煩，官方都是這么用的）
JS代碼：
<script type="text/javascript">
//調用富文本編輯
$(document).ready(function() {
var $summernote = $('#summernote').summernote({
height: 300,
minHeight: null,
maxHeight: null,
focus: true,
//調用圖片上傳
callbacks: {
onImageUpload: function (files) {
sendFile($summernote, files[0]);
}
}
});
//ajax上傳圖片
function sendFile($summernote, file) {
var formData = new FormData();
formData.append("file", file);
$.ajax({
url: "{:U('Upload/upload_img')}",//路徑是你控制器中上傳圖片的方法，下面controller里面我會寫到
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (data) {
$summernote.summernote('insertImage', data, function ($image) {
$image.attr('src', data);
});
}
});
}
});
</script>
Controller控制器
public function upload_img() { if ($_FILES) { if (!$_FILES['file']['error']) { //生成的文件名（時間戳，精確到毫秒） list($usec, $sec) = explode(" ", microtime()); $name = ((float)$usec + (float)$sec) * 1000; $ext = explode('.', $_FILES['file']['name']); $filename = $name . '.' . $ext[1]; $folder = date("Ymd"); $targetDir = C('UPLOAD_PICTURE_URL') . $folder;
//如果上傳的文件夾不存在，則創建之 if ($targetDir) { @mkdir($targetDir); } //文件目錄 $targetDir_url = $targetDir . '/article';
//如果上傳的文件夾不存在，則創建之 if ($targetDir_url) { @mkdir($targetDir_url); } //圖片上傳的具體路徑就出來了 $destination = $targetDir_url . DIRECTORY_SEPARATOR . $filename; //change this directory $location = $_FILES["file"]["tmp_name"]; //將圖片移動到指定的文件夾****核心代碼 move_uploaded_file($location, $destination); echo C('UPLOAD_PICTURE') . $folder . '/article' . DIRECTORY_SEPARATOR . $filename;//change this URL } else { echo $message = 'Ooops! Your upload triggered the following error: ' . $_FILES['file']['error']; } } }
以上就是把用富文本編輯器在選擇圖片的時候，通過ajax傳遞數據，controller把圖片移動到指定服務器文件夾中，並且在編輯器中顯示出來圖片。
效果：
3.提交圖片，將數據插入到數據庫中
上面js和controller配合將圖片移動到指定的服務器文件夾中，然后ajax返回圖片的完整路徑以及保存的圖片名，以<img src="Uploads/..../1.jpg">放入編輯文本中，點擊提交保存到數據庫中。
接下來點擊提交按鈕，進行文本的提交。
public function upload(){ //將form表單提交的內容存入數據庫 }
form表單提交的內容都會保存吧！
4.關於java代碼
關於使用java的方法，上面的html和js代碼基本沒啥改動，就是ajax路徑不同，其他的很好改的，
這里有篇關於官方的java的demo演示，大家可以參考一下：http://wb-mgrigorov.rhcloud.com/summernote
以上就是完整的summernote富文本編輯器保存圖片到服務器指定文件夾，相當完整，99%會解決你的煩惱，如果解決了你的問題，記得幫我點個贊哦！！這是我到國外網站學習到的，很難得，就跟大家一起分享！！！
記得點贊，幫你解決問題，也是對我的肯定！點贊！謝謝！
文本編輯后，我們得到的是帶有html標簽的內容，那么怎么把這些帶有html標簽的內容在文章中顯示出來呢，請觀看續集：http://www.cnblogs.com/jingmin/p/6602658.html