Detailed explanation of the use of BootStrap's text editor component Summernote

This time I will bring you a detailed explanation of the use of the text editor component Summernote of BootStrap. What are the precautions and the following are practical cases. Let’s take a look.

Summernote is a super simple WYSIWYG online editor based on jquery bootstrap. Summernote is very lightweight, only 30KB in size, and supports Safari, Chrome, Firefox, Opera, and the Internet Explorer 9 (IE8 support coming soon).

Features:

The world's best WYSIWYG online editor

Very easy to install

Open source

Custom initialization options

Support shortcut keys

Suitable for various back-end program languages

Summernote official website address: https://summernote.org/

This is an example from the official website:

nbsp;html>


 <meta>
 <title>Summernote</title>
 <link>
 <script></script> 
 <script></script> 
 <link>
 <script></script>


 <p></p><p>Hello Summernote</p>
 <script>
 $(document).ready(function() {
 $(&#39;#summernote&#39;).summernote();
 });
 </script>

Rendering:

The simplest way to initialize components by default:

Add a container

in

:

<p>Hello Summernote</p>

Then use Jquery to initialize the component:

$(document).ready(function() {
 $('#summernote').summernote();
});

We can also define components ourselves, such as customizing the height of the edit box:

$('#summernote').summernote({
 height: 300,   // 定义编辑框高度
 minHeight: null,  // 定义编辑框最低的高度
 maxHeight: null,  // 定义编辑框最高德高度
 });

We can also customize the toolbar:

 <!--工具栏-->
  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']], //帮助
  ],

Some other initialization settings:

lang:'zh-CN', //To set Chinese, the Chinese plug-in summernote-zh-CN.js
is required /The dialog box should be placed in the edit box or the Body
         dialogsFade: true,//The dialog box display effect
                                                                                                                                                          
                                                               

There are also

callback functions:

callbacks: {
 
 }

The events in the callback function include oninit, onenter, onfocus, onblur, onkeyup, onkeydown, onpaste, onImageUpload, etc.,

Here we mainly introduce the event onImageUpload triggered by uploading images:

When inserting a picture, the Summernote component displays the picture in binary form by default. If the content of the text box is stored in the database in this way, it will result in a large amount of database data

This is the field stored in the database when summernote inserts pictures by default:

So another method is used here, which is to upload the image to the server. After the upload is successful, the access address of the image will be returned to the inserted image location and the image will be displayed;

The specific implementation is as follows:                                        The background processing request stores the image to the server. If successful, the image access address will be returned:

Note: I configured the mapping relationship between the real address for image upload and the virtual image access address in tomcat's server.xml, so after the upload is successful, the virtual access address is returned to the front end;

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("上传失败");       
       } 
      });
     } 
     }

Suggestion: The real upload root path should be written in properties

Configuration File

to facilitate future address modifications. At the same time, the virtual access root path should not be stored in the database. Just store the relative location. The virtual access root path is also written in the properties file.

Method to get the content of the edit box:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Operation search component is displayed on the keyboard

Use the static method of the Class class in ES6

The above is the detailed content of Detailed explanation of the use of BootStrap's text editor component Summernote. For more information, please follow other related articles on the PHP Chinese website!