Summernote是一个简单，灵活，所见即所得（所见即所得)的编辑器，基于框架和引导程序构建总结笔记所有主要的操作都支持快捷键，有一个功能强大的原料药，它提供了大量的自定义选项的设计（宽，高，有效的项目等等)和功能。对于主要的脚本语言或框架(PHP，Ruby，Django，NodeJS)，该项目有提供了集成示例。

Bootstrap summernote，用其官网上的介绍就是"超简单所见即所得编辑器",不过在我看来，与引导程序中文官网上提供的"引导-所见即所得"要更简单，更漂亮，更好用！

虽然我之前尝试过使用自举-所见即所得，可参照引导所见即所得富文本数据如何保存到mysql，但事后诸葛亮的经验告诉我，summernote绝对是更佳的富文本编辑器，这里对其工作组点三十二个赞！

经过一天时间的探索，对summernote有所掌握，那么为了更广大前端爱好者提供便利，我将费劲一番心血来介绍一下summernote，超级福利啊。

一、官方应用程序接口和源码下载

工欲善其事必先利其器，首先把summernote的源码拿到以及对应官方应用程序接口告诉大家是首个任务！

官网（演示和api)

开源代码库源码下载，注意下载开发版

二、效果图

效果图一

效果图2

效果图3

三、开讲内容

大的方向为以下三个内容：

summernote的页面布局（资源引入、初始参数)summernote从本地上传图片方法（前端图像上传方法、后端学习笔记一文件保存)summernote所在形式表单的数据提交

、总结笔记的页面布局

！DOCTYPE html html lang=' zh-CN ' % @ include file='/components/common/taglib。JSP ' % hearta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0，maximum-scale=1.0，user-scalable=no '/title summer note-bs3fa 4/title！-include jquery-脚本类型=' text/JavaScript ' src=' http : $ { CTX }/components/jquery/jquery。js '/脚本！-包含激光诱导击穿光谱仪样式表-链接类型='text/css' rel='样式表href=' $ { CTX }/组件/bootstrap/CSS/bootstrap。CSS '/脚本类型=' text/JavaScript ' src=' http : $ { CTX }/组件/bootstrap/js/bootstrap。量滴js /脚本！-包含夏季注释-链接类型=' text/CSS ' rel='样式表href=' $ { CTX }/组件/夏季笔记/夏季笔记。CSS/script type=' text/JavaScript ' src=' http : $ { CTX }/components/summer note/summer note。js '/script script type=' text/JavaScript ' src=' http : $ { CTX }/components/summer note/lang/summer note-zh-cn。js /每个(function(){ var $ this=$(this)；定义变量占位符=$this.attr('占位符')| | ' ';var URL=$ this。attr(' action ')| | ' '；这个。夏注({郎： ' zh-CN '，占位符：占位符，闵黑