官網網址： http://summernote.org/
初始化 summernote
CODE: $("#summernote").summernote();
高度和焦點設置
CODE:
$('#summernote').summernote({ height: 300, // set editor height minHeight: null, // set minimum height of editor maxHeight: null, // set maximum height of editor focus: true // set focus to editable area after initializing summernote });
編輯器銷毀
CODE： $('#summernote').summernote('destroy');
獲取和設置HTML內容
1、獲取編輯器內容
CODE： var markupStr = $('#summernote').summernote('code')
2、如果初始化了多個編輯器，可以通過jquery的eq方法獲取某個編輯器的HTML內容。eg,獲取第二個編輯器的。
CODE： var markupStr = $('.summernote').eq(1).summernote('code');
3、給指定的編輯器設置HTML內容
CODE：
var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);
isEmpty
返回編輯器中內容是否為空
編輯區域獲取焦點時會自動生成
即使並沒有實際內容。所以summernote提供了這個方法來判斷內容是否真的為空。
CODE: if ($('#summernote').summernote('isEmpty')) { alert('contents is empty'); }
disable, enable
disable使編輯器處於不可用狀態。
CODE: $('#summernote').summernote('disable');
調用enable可以使編輯器從不可以轉換到可用狀態。
$('#summernote').summernote('enable');
onImageUpload
重寫圖片上傳方法
CODE:
// onImageUpload callback $('#summernote').summernote({ callbacks: { onImageUpload: function(files) { // upload image to server and create imgNode... $summernote.summernote('insertNode', imgNode); } } });
PHP-summernote 使用
頁面代碼：
CODE:
<!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>
<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>
PHP - 文件上傳處理
CODE：
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'];
}
}
}
summernote 編輯內容在前端顯示
方法一： htmlspecialchars_decode
方法二：
<textarea type="text" name="content" id="summernote"></textarea>
<input type="hidden" id="article_content" value="{$post.content}">
$(function(){
var innerhtml = $("#article_content").val();
$("#summernote").val(innerhtml);
});
參考：http://www.cnblogs.com/jingmin/p/6592325.html
參考：http://blog.csdn.net/qq_27965129/article/details/52936638