当前位置: 开发笔记 > 前端 > 正文

基于BootStrap的文本编辑器组件Summernote

作者：曾吾翰 | 来源：互联网 | 2022-06-22 19:30

Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。这篇文章主要介绍了基于BootStrap的文本编辑器组件Summernote的相关资料,需要的朋友可以参考下

Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。Summernote非常的轻量级，大小只有30KB，支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即将到来)。

特点：

世界上最好的WYSIWYG在线编辑器

极易安装

开源

自定义初化选项

支持快捷键

适用于各种后端程序言语

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

这是官网的一个例子：

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

在添加一个容器

：

Hello Summernote

再用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，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

推荐阅读

html
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59
html
Java实战之电影在线观看系统的实现

本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]

蜡笔小新 2023-12-14 15:52:03
html
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
html
使用jQuery / AJAX实现两个div的动态更新

本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串，可以将不同的文本分别插入到两个div中，从而实现页面的动态更新。 ... [详细]

蜡笔小新 2023-12-11 10:07:32
html
从零基础到精通的前台学习路线

随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ... [详细]

蜡笔小新 2023-12-10 20:05:15
html
Java后台Jsonp处理方法及其应用场景

本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议，它允许在服务器端通过Script tags返回至客户端，并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法，它是一种面向数据结构的分析和设计方法，以活动为中心，将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码，使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]

蜡笔小新 2023-12-10 10:55:21
html
DataTables插件介绍及使用方法

本文介绍了DataTables插件的官方网站以及其基本特点和使用方法，包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性，以及国际化和动态创建表格的功能。此外，还提供了参数初始化和延迟加载的示例代码。 ... [详细]

蜡笔小新 2023-12-09 17:40:33
html
mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决

web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条，因为它主要用途是设置类似于qq界面的那种格 ... [详细]

蜡笔小新 2023-10-17 20:40:03
html
jquery ajax 跨域问题

前言：关于跨域CORS1.没有跨域时，ajax默认是带cookie的2.跨域时，两种解决方案：1）服务器端在filter中配置详情：http:blog.csdn.netwzl002 ... [详细]

蜡笔小新 2023-10-17 17:47:27
html
CSS |网格行结束属性

CSS|网格-行-结束属性原文:https://www.gee ... [详细]

蜡笔小新 2023-10-17 15:21:56
html
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
上传
高校天文共享平台开发过程中的思考与规划

本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面，并总结了项目存在的问题，如前后端未分离、代码混乱等。作者表示希望通过记录和规划，能够理清思路，进一步完善该平台。 ... [详细]

蜡笔小新 2023-12-13 18:08:58
html
图片处理应用：固定容器缩略图实现

本文介绍了一种图片处理应用，通过固定容器来实现缩略图的功能。该方法可以实现等比例缩略、扩容填充和裁剪等操作。详细的实现步骤和代码示例在正文中给出。 ... [详细]

蜡笔小新 2023-12-10 18:52:53
html
Unity3D引擎的体系结构和功能详解

本文详细介绍了Unity3D引擎的体系结构和功能。Unity3D是一个屡获殊荣的工具，用于创建交互式3D应用程序。它由游戏引擎和编辑器组成，支持C#、Boo和JavaScript脚本编程。该引擎涵盖了声音、图形、物理和网络功能等主题。Unity编辑器具有多语言脚本编辑器和预制装配系统等特点。本文还介绍了Unity的许可证情况。Unity基本功能有限的免费，适用于PC、MAC和Web开发。其他平台或完整的功能集需要购买许可证。 ... [详细]

蜡笔小新 2023-12-10 11:01:31
html
工作经验谈之-让百度地图API调用数据库内容及详解

这段时间，所在项目中要用到的一个模块，就是让数据库中的内容在百度地图上展现出来，如经纬度。主要实现以下几点功能：1.读取数据库中的经纬度值在百度上标注出来。2.点击标注弹出对应信息。3 ... [详细]

蜡笔小新 2023-10-17 19:33:18

曾吾翰

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章