富文本编辑器summernote使用

先看看summernote是个什么东西!

富文本编辑器summernote使用_第1张图片

它有什么好处?

    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>");
});


你可能感兴趣的:(富文本编辑器summernote使用)