Explication détaillée de l'utilisation du composant éditeur de texte de BootStrap Summernote

Cette fois, je vous apporte une explication détaillée de l'utilisation du composant éditeur de texte Summernote de BootStrap Quelles sont les précautions de l'explication détaillée de l'utilisation du texte BootStrap. composant éditeur Summernote. Ce qui suit est un cas pratique.

Summernote est un éditeur en ligne WYSIWYG super simple basé sur jquery bootstrap. Summernote est très léger, ne fait que 30 Ko et prend en charge Safari, Chrome, Firefox, Opera et Internet. Explorer 9+ (support IE8 à venir).

Caractéristiques :

Le meilleur éditeur en ligne WYSIWYG au monde

Extrêmement facile à installer

Open Source

Options d'initialisation personnalisées

Prise en charge des touches de raccourci

Applicable à divers langages de programme back-end

Adresse du site officiel de Summernote : https://summernote.org/

Ceci est un exemple tiré du site officiel :

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>

Rendu :

La manière la plus simple d'initialiser les composants par défaut :

Ajouter un conteneur

dans

 :

<p>Hello Summernote</p>

Utilisez ensuite Jquery pour initialiser le composant :

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

On peut également définir des composants , comme par exemple personnaliser la hauteur de la zone d'édition :

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

Nous pouvons également personnaliser la barre d'outils :

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

Quelques autres paramètres d'initialisation :

lang:'zh-CN', //Pour définir le chinois, vous devez introduire le plug-in chinois summernote-zh-CN.js
placeholder: 'write here...', //Placeholder
dialogsInBody : true, / / ​​La boîte de dialogue doit-elle être placée dans la zone d'édition ou Body
dialogsFade: true ,//Effet d'affichage de la boîte de dialogue
DisableDragAndDrop: true ,//Désactiver la fonction glisser-déposer
raccourcis: false , //Désactiver les touches de raccourci

Il existe également des fonctions de rappel  :

callbacks: {
 
 }

Les événements de la fonction de rappel incluent oninit, onenter, onfocus, onblur, onkeyup, onkeydown, onpaste, onImageUpload, etc.,

Nous présentons ici principalement l'événement onImageUpload déclenché par le téléchargement d'images :

Lors de l'insertion d'une image, le composant Summernote affiche l'image sous forme binaire par défaut. Si le contenu de la zone de texte est stocké dans la base de données de cette manière, cela entraînera une grande quantité de données dans la base de données

. Il s'agit du champ stocké dans la base de données lorsque summernote insère des images par défaut :

Une autre méthode est donc utilisée ici, qui consiste à télécharger l'image sur le serveur. Une fois le téléchargement réussi, l'adresse d'accès de l'image sera renvoyée à l'emplacement de l'image insérée et l'image sera affichée

; La mise en œuvre spécifique est la suivante :                                         La demande de traitement en arrière-plan stocke l'image sur le serveur. En cas de succès, l'adresse d'accès à l'image sera renvoyée :

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

. Remarque : j'ai configuré la relation de mappage entre l'adresse réelle pour le téléchargement de l'image et l'adresse d'accès à l'image virtuelle dans le fichier server.xml de Tomcat, de sorte que l'adresse d'accès virtuelle soit renvoyée au front-end une fois le téléchargement réussi

 ;

Recommandation : le chemin racine de téléchargement réel doit être écrit dans les propriétés

fichier de configuration

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

pour faciliter les futures modifications d'adresse. Dans le même temps, le chemin racine d'accès virtuel ne doit pas être stocké dans la base de données. . Le chemin racine de l'accès virtuel est également écrit dans le fichier de propriétés.

Méthode pour obtenir le contenu de la zone d'édition :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le chinois PHP. site web!

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

Lecture recommandée :

Le composant de recherche d'opération s'affiche sur le clavier

Utilisez la méthode statique de la classe Class dans ES6

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!