基于jQuery和bootstrap的富文本编辑插件—summernote
1、使用HTML5 doctype
2、引入jQuery、bootstrap、font-awesome文件
<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>
<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>3、添加div到body，设置ID=”summernote”; 此目标元素将稍后呈现为summernote编辑工具。
<div id="summernote">div>4、文档准备就绪后运行以下脚本！
// 初始化插件
$(function () {
$("#summernote").summernote();
})5、基本设置
高度和焦点
$('#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
});语言
lang:'zh-CN',自定义工具栏
toolbar: [
// [groupName, [list of button]]
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']]
]6、图片上传
多图上传demo
<html lang="en">
<head>
<meta charset="UTF-8">
<title>summernotetitle>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/summernote.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js">script>
<script type="text/javascript" src="js/bootstrap.min.js">script>
<script type="text/javascript" src="js/summernote.min.js">script>
<script type="text/javascript" src="js/summernote-zh-CN.js">script>
head>
<body>
<div class="summernote">div>
<div class="summernote">div>
<div class="summernote">div>
<script type="text/javascript">
// 初始化插件
$(function () {
$(".summernote").summernote();
})
var $s = $(".summernote")
$s.summernote({
// 语言
lang:'zh-CN',
// 高度与焦点
height:200,
width:200,
// 对话框显示在body而非summernote
dialogsInBody: true,
dialogsFade:true,
// 自定义工具栏
toolbar:[
['picture',['picture']]
],
// 图片上传
callbacks: {
// summernote提供的API：onImageUpload
onImageUpload:function (files) {
img = sendFile(files[0])
}
}
})
function sendFile(file) {
var formData = new FormData()
formData.append('file',file[0])
$.ajax({
url:'upload', //后台文件上传接口
type:'POST',
data:formData,
processData:false,//告诉jQuery不要加工数据
contentType:false,//告诉jQuery,在request head里不要设置Content-Type
success:function (data) {
$("#summernote").summernote('insertImage',data,function ($image) {
$image.css('width','200px')
$image.css('height','200px')
}) //调用内部api——insertImage以路径的形式插入图片到文本编辑区
// 传递回调函数来修改图像——没用！！
},
error:function () {
alert("上传失败")
}
})
}
script>
body>
html>官方文档猛戳这里呀 U•ェ•*U