您的位置：首页 > Web前端 > BootStrap

基于jQuery和bootstrap的富文本编辑插件—summernote

2017-03-12 15:36 543 查看

1、使用HTML5 doctype

2、引入jQuery、bootstrap、font-awesome文件

<!-- include libraries(jQuery, bootstrap) -->
<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>

<!-- include summernote css/js-->
<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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>summernote</title>
<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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 富文本编辑器 summernote 插件 bootstrap jquery

相关文章推荐

新的分享

章节导航