富文本编辑器summernote使用

最新推荐文章于 2021-03-25 03:30:04 发布

weixin_34026276

最新推荐文章于 2021-03-25 03:30:04 发布

阅读量128

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2246523/blog/521322

版权

2019独角兽企业重金招聘Python工程师标准>>>

先看看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、引入依赖库；

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

转载于:https://my.oschina.net/u/2246523/blog/521322