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

2024-10-22 10:35:35

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

特点：

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

极易安装

开源

自定义初化选项

支持快捷键

适用于各种后端程序言语

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

所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解

本文教大家如何使用bootstrap-wysiwyg文本编辑器,充分发挥编辑器的优势,希望大家可以有所收获. 主要特性: 超小5kb 自动的热键支持(MAC和windows) 拖放的插入图片,支持图片上传(支持手机拍照) 支持声音输入(chrome支持) 允许自定义的工具条,可以使用所有的bootstrap内容,字体不使用任何强制的样式 ---------- 其实不止这些,需要大家自己去探索,加油吧! 使用其实很简单的,倒入bootstrap相关CSS,JS,jQu
超漂亮的Bootstrap 富文本编辑器summernote

Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建.Summernote 所有主要的操作都支持快捷键,有一个功能强大的 API,它提供了大量的自定义选项的设计(宽,高,有效的项目等等)和功能.对于主要的脚本语言或框架(PHP,Ruby,Django,NodeJS),该项目有提供了集成示例. Bootstrap summernote,用其官网上的介绍就是"Super Simple WYSIWYG editor",
基于BootStrap的文本编辑器组件Summernote

Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Opera.Internet Explorer 9 +(IE8支持即将到来). 特点: 世界上最好的WYSIWYG在线编辑器极易安装开源自定义初化选项支持快捷键适用于各种后端程序言语 Summernote官网地址 :https://summernote.org/ 这是官网的一个例子: <!DO
基于Bootstrap的标签页组件及bootstrap-tab使用说明

bootstrap-tab bootstrap-tab组件是对原生的bootstrap-tab组件的封装,方便开发者更方便地使用,主要包含以下功能: tab页初始化关闭tab页新增tab 显示tab页获取tab页ID 使用 Step1 :引入样式 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <
vue富文本编辑器组件vue-quill-edit使用教程

之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便. 近期项目vue单页面,就使用vue-quill-edit这个编辑器组件吧! 一.安装 cnpm install vue-quill-editor 二.引入在main.js引入并注册: import VueQuillEditor from 'vue-quill-editor' // require styles 引入样式 import 'quill/dist/quill.core.css' import 'quill
详解Vue基于vue-quill-editor富文本编辑器使用心得

vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! 那么我们直击正题,在vue中使用quill呢,我们需要npm进行安装,安装命令如下: npm install vue-quill-editor 再安装依赖项 npm install quill 使用: 在main.js中进行引入 import Vue from 'vue' import VueQui
Django集成富文本编辑器summernote的实现步骤

提到Django的富文本编辑器,大家一定会想到ckeditor和tinyMCE.其实还是有一个富文本编辑器同样优秀,它就是summernote,个人认为功能上不逊于ckeditor,比tinyMCE更强大.Summernote 是一个简单灵活的所见即所得的 HTML 富文本编辑器,基于 jQuery 和 Bootstrap 构建,支持图片上传,提供了大量可定制的选项. 展示效果如下所示: 第一步安装django-summernote 首先通过pip安装django-summernote,建议安
Bootstrap富文本组件wysiwyg数据保存到mysql的方法

Bootstrap提供了一个叫wysiwyg的富文本组件,用来显示和编辑富文本数据,但如何将编辑后的数据保存到MySQL数据库,却不得而知.另外,如何将mysql数据库中的数据显示到wysiwyg也不得而知,对于这两个问题,让我来告诉你解决方案! 一.效果展示首先,我们先来看看效果如何: 富文本中有一张图片,还有一个数字列表我们可以看到编辑后的数据保存成功,以及保存后对应的展示. 二.富文本度娘对于富文本的解释如下: 富文本格式(Rich Text Format, 一般简称为RTF)是由微
JQuery组件基于Bootstrap的DropDownList（完整版）

在前文创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆盖菜单右侧的两个圆角.使得下拉菜单左侧有2个圆角,右侧没有,看上去不是很完美.如下图所示: 本文的内容就是如何恢复右侧的圆角先看看原本的下拉菜单的HTML结构: <ul class="dropdown-menu dropdown-menu-right" role="me
基于bootstrap按钮式下拉菜单组件的搜索建议插件

本文实例为大家分享了Bootstrap Search Suggest搜索建议插件的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>Bootstrap 搜索建议插件</title> <meta name="viewport" content
python基于Tkinter库实现简单文本编辑器实例

本文实例讲述了python基于Tkinter库实现简单文本编辑器的方法.分享给大家供大家参考.具体实现方法如下: ## {{{ http://code.activestate.com/recipes/578568/ (r1) from Tkinter import * from tkSimpleDialog import askstring from tkFileDialog import asksaveasfilename from tkMessageBox import askokcance

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

相关推荐

随机推荐