先看看summernote是个什么东西!
它有什么好处?
1、界面优雅;基于bootstrap的样式,个人感觉比ckeditor要好看;
2、插入图片方便;可以通过Ctrl+V的方式插入粘贴板中的图片;
3、使用方式简便;jquery插件,通俗易懂的使用方法;
4、官方api文档齐全。http://www.yyyweb.com/demo/inner-show/summernote.html
具体怎么使用?
0、需要HTML5支持
<!DOCTYPE html><html lang="en">...</html>
1、引入依赖库;
<!-- include libraries(jQuery, bootstrap, fontawesome) -->
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.min.js"></script>
2、定义div
<div class="summernote" name="fieldName">Hello Summernote</div>
3、初始化
$(document).ready(function() {
$('.summernote').summernote();//jquery选择器,一般用id或者class });
也可以加参数,其他参数可以参考
$('.summernote').summernote({height:400,minHeight:200,maxHeight:10000});
4、设置值
$('.summernote').code('content');
5、取值
var html = $('.summernote').code();
6、一般保存表单前做法(仅供参考)
$('.summernote').each(function(){
var value = $(this).code();
var name = $(this).attr("fieldName");
$("textarea[name='"+name+"']",this).remove();
$(this).append("<textarea style='display:none;' name='"+name+"'>"+value+"</textarea>");
});