Summernote官网地址 ：https://summernote.org/

这是官网的一个例子：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Summernote</title>

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">

  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>

</head>

<body>

  <div id="summernote"><p>Hello Summernote</p></div>

  <script>

    $(document).ready(function() {

        $('#summernote').summernote();

    });

  </script>

</body>

</html>

效果图：

最简单的默认初始化组件的方式：

在<body>添加一个容器<div>：

<div id="summernote">Hello Summernote</div>

再用Jquery初始化该组件：

$(document).ready(function() {

  $('#summernote').summernote();

});

我们也可以自定义组件，如自定义编辑框的高度：

$('#summernote').summernote({

  height: 300,                 // 定义编辑框高度

  minHeight: null,             // 定义编辑框最低的高度

  maxHeight: null,             // 定义编辑框最高德高度

});

 我们还可以自定义工具栏：

 <!--工具栏-->

              toolbar: [

                <!--字体工具-->

                ['fontname', ['fontname']], //字体系列

                ['style', ['bold', 'italic', 'underline', 'clear']], // 字体粗体、字体斜体、字体下划线、字体格式清除

                ['font', ['strikethrough', 'superscript', 'subscript']], //字体划线、字体上标、字体下标

                ['fontsize', ['fontsize']], //字体大小

                ['color', ['color']], //字体颜色

                <!--段落工具-->

                ['style', ['style']],//样式

                ['para', ['ul', 'ol', 'paragraph']], //无序列表、有序列表、段落对齐方式

                ['height', ['height']], //行高

                <!--插入工具-->

                ['table',['table']], //插入表格

                ['hr',['hr']],//插入水平线

                ['link',['link']], //插入链接

                ['picture',['picture']], //插入图片

                ['video',['video']], //插入视频

                <!--其它-->

                ['fullscreen',['fullscreen']], //全屏

                ['codeview',['codeview']], //查看html代码

                ['undo',['undo']], //撤销

                ['redo',['redo']], //取消撤销

                ['help',['help']], //帮助

              ],

其它的一些初始化设置：

              lang:'zh-CN',  //设置中文，需引入中文插件summernote-zh-CN.js

              placeholder: 'write here...', //占位符

              dialogsInBody: true,  //对话框放在编辑框还是Body

              dialogsFade: true ,//对话框显示效果

              disableDragAndDrop: true ,//禁用拖放功能

              shortcuts: false ,//禁用快捷键

还有回调函数：

callbacks: {

  }

回调函数里面的事件有 oninit，onenter，onfocus，onblur，onkeyup，onkeydown，onpaste,onImageUpload 等等，

这里主要介绍上传图片触发的事件 onImageUpload ：

插入图片的时候，Summernote组件默认是将图片以二进制形式展示的，如果以此方式将文本框的内容存储到数据库时，会导致数据库数据量很大

这是summernote默认方式插入图片时存储到数据库的字段：

所以这里采用另一个方法，就是将图片上传到服务器，上传成功后回传图片的访问地址到插入的图片位置，展示图片；

具体实现如下：

                                  callbacks: {

                                      onImageUpload: function(file) {  //图片默认以二进制的形式存储到数据库，调用此方法将请求后台将图片存储到服务器，返回图片请求地址到前端

                                            //将图片放入Formdate对象中

                                            var formData = new FormData();

                                            //‘picture’为后台获取的文件名，file[0]是要上传的文件

                                            formData.append("picture", file[0]);

                                            $.ajax({

                                                 type:'post',

                                                 url:'请求后台地址',

                                                 cache: false,

                                                 data:formData,

                                                 processData: false,

                                                 contentType: false,

                                                 dataType:'text', //请求成功后，后台返回图片访问地址字符串，故此以text格式获取，而不是json格式

                                                 success: function(picture) {

                                                   $('#summernote').summernote('insertImage',picture);

                                                 },

                                                 error:function(){

                                                    alert("上传失败");

                                                 }

                                            });

                                      }

                                  }

后台处理请求存储图片到服务器，成功则返回图片访问地址：

注意：我这里是将图片上传的真实地址和虚拟的图片访问地址在tomcat的server.xml中配置了映射关系，所以上传成功后返回给前端的是虚拟的访问地址；

@RequestMapping(value="contentFileUpload",method=RequestMethod.POST)

    @ResponseBody

    public String contentFileUpload(MultipartFile picture) {

        if (picture!=null && picture.getOriginalFilename()!=null && picture.getOriginalFilename().trim().length()>0) {  

            /**

             * picture上传路径（+时间文件夹）

             */

            //真实的上传根路径

            String realUploadPath = 'D:/Program Files (x86)/apache-tomcat-8.5.16/webapps/file';

            //虚拟的文件访问根路径

            String fictitiousRoot = '/file'

            //建立以时间命名的文件夹

            SimpleDateFormat sdf=new SimpleDateFormat("/yyyy/MM/dd/");

            String datePath = sdf.format(new Date());

            //最终真实路径

            String realuUploadBrandPath = realUploadPath+"/content"+datePath;

            //最终虚拟访问路径

            String  fictitiousUploadBrandPath =fictitiousRoot +"/content"+datePath;

           // 上传文件原始名称

           String originFileName = picture.getOriginalFilename();

           // 新的文件名称

           String newFileName = UUID.randomUUID()+originFileName.substring(originFileName.lastIndexOf(".")); 

           //如果路径文件夹不存在就创建

           File dir=new File(realuUploadBrandPath);

           if(!dir.exists()){

               dir.mkdirs();

           } 

           // 新文件

           File newFile = new File(realuUploadBrandPath+File.separator+newFileName);  

           // 将内存中的文件写入磁盘

           try {

                picture.transferTo(newFile);

            } catch (IllegalStateException | IOException e) {

                // TODO Auto-generated catch block

                e.printStackTrace();

            }  

           // 文件虚拟地址

           String fictitiousFilePath =  fictitiousUploadBrandPath+newFileName;

           return fictitiousFilePath;

       }

      return "false";    

    }

建议：真实的上传根路径应写在properties配置文件中，方便日后地址的修改，同时虚拟的访问根路径也不应存储到数据库当中，只需存储相对位置就可以，将虚拟的访问根路径也写在properties文件当中。

通过上面的方法处理后，在编辑框里，图片的展示方式：

 

 获取编辑框内容后，通过后台存储到数据库；

获取编辑框内容的方法：

var markupStr = $('#summernote').summernote('code');

基于bootstrap的文本编辑器组件：Summernote的更多相关文章

  1. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  2. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  3. Summernote – 基于 Bootstrap 的文本编辑器

    Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建.Summernote 所有主要的操作都支持快捷键,有一个功能强大的 AP ...

  4. 基于jquery的bootstrap在线文本编辑器插件Summernote （转）

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  5. 基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  6. Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  7. [整理]基于bootstrap的文本编辑器

    http://www.bootcss.com/p/bootstrap-wysiwyg/ http://jhollingworth.github.io/bootstrap-wysihtml5/ http ...

  8. Bootstrap 可视化HTML编辑器，summernote

    Bootstrap 可视化HTML编辑器之summernote,用其官网上的介绍就是"Super Simple WYSIWYG editor",不过在我看来,与bootstrap中 ...

  9. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

随机推荐

  1. Oracle EBS 报错：此责任无可用函数。 更改责任或与您的系统管理员联系。

    解决:修改配置文件        1.FND: Diagnostics (FND:诊断)            启用设为”是”        2.Utilities:Diagnostics (公用程序 ...

  2. 发布MVCIIS报错未能加载文件或程序

    未能加载文件或程序集“System.Web.Http.WebHost, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e3 ...

  3. [控件] LiveChangedImageView

    LiveChangedImageView 效果 说明 切换图片的时候自动根据图片的尺寸进行渐变式切换,效果很不错,使用非常容易. 源码 https://github.com/YouXianMing/U ...

  4. [C++] 用Xcode来写C++程序[5] 函数的重载与模板

    用Xcode来写C++程序[5] 函数的重载与模板 此节包括函数重载,隐式函数重载,函数模板,带参数函数模板 函数的重载 #include <iostream> using namespa ...

  5. UNIX高级环境编程（2）FIle I/O － 原子操作、共享文件描述符和I/O控制函数

    引言: 本篇通过对open函数的讨论,引入原子操作,多进程通信(共享文件描述符)和内核相关的数据结构. 还会讨论集中常见的文件IO控制函数,包括: dup和dup2 sync,fsync和fdatas ...

  6. win7 64 &vs2010 与 opengl配置

    http://blog.csdn.net/lixam/article/details/7618015 http://blog.sina.com.cn/s/blog_7745fc8601017m36.h ...

  7. docker及服务器遇到的坑

    目录 DNS不可用 修改docker查找源 容器保持固定ip 查看docker连接 容器间通信 容器拷贝数据 php连接docker mysql 8.0出错authentication method ...

  8. 3.5星|《硅谷产品》：Facebook网红社区产品经理经验谈

    硅谷产品:36讲直通世界级产品经理 作者是Facebook产品经理,目前负责的具体业务书的扉页上有含糊的介绍,书中没明确说,根据书中内容推测,主要是网红社区. 比较遗憾的是书中作者亲历的案例只有3个. ...

  9. LA 3938 动态最大连续区间 线段树

    思路很清晰,实现很繁琐.分析过程可以参考LRJ,自己的总结晚些放. #include <cstdio> #include <cstring> #include <algo ...

  10. java枚举学习入门

    一.前言  在java编程过程中,我们通常需要定义一些固定数量的常量,在jdk1.5以前,通常的做法是定义一个静态常量类,但自jdk1.5后,java引入了枚举(关键字enum,全称为 enumera ...