Ausführliche Erläuterung der Verwendung der Texteditor-Komponente Summernote von BootStrap

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung der Verwendung der Texteditor-Komponente Summernote von BootStrap. Was sind die Vorsichtsmaßnahmen der detaillierten Erklärung der Verwendung des BootStrap-Textes? Editor-Komponente Summernote Das Folgende ist ein praktischer Fall.

Summernote ist ein supereinfacher WYSIWYG-Online-Editor, der auf JQuery-Bootstrap basiert. Summernote ist sehr leicht, nur 30 KB groß und unterstützt Safari, Chrome, Firefox, Opera und das Internet Explorer 9+ (IE8-Unterstützung folgt in Kürze).

Eigenschaften:

Der weltweit beste WYSIWYG-Online-Editor

Extrem einfach zu installieren

Open Source

Benutzerdefinierte Initialisierungsoptionen

Unterstützt Tastenkombinationen

Anwendbar auf verschiedene Back-End-Programmsprachen

Offizielle Website-Adresse von Summernote: https://summernote.org/

Dies ist ein Beispiel von der offiziellen 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:

Der einfachste Weg, Komponenten standardmäßig zu initialisieren:

Fügen Sie einen Container

in

hinzu:

<p>Hello Summernote</p>

Verwenden Sie dann Jquery, um die Komponente zu initialisieren:

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

Wir können auch Komponenten definieren , wie zum Beispiel die Höhe des Bearbeitungsfelds anpassen:

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

Wir können auch die Symbolleiste anpassen:

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

Einige andere Initialisierungseinstellungen:

lang:'zh-CN', //Um Chinesisch festzulegen, müssen Sie das chinesische Plug-in „summernote-zh-CN.js“ einführen
placeholder: 'write here...', //Placeholder
dialogsInBody : true, / / ​​Soll das Dialogfeld im Bearbeitungsfeld oder im Textkörper platziert werden
dialogsFade: true ,//Dialoganzeigeeffekt
invalidDragAndDrop: true ,//Drag-and-Drop-Funktion deaktivieren
Verknüpfungen: false , //Tastenkombinationen deaktivieren

Es gibt auch Rückruffunktionen :

callbacks: {
 
 }

Zu den Ereignissen in der Rückruffunktion gehören oninit, onenter, onfocus, onblur, onkeyup, onkeydown, onpaste, onImageUpload usw.,

Hier stellen wir hauptsächlich das Ereignis onImageUpload vor, das durch das Hochladen von Bildern ausgelöst wird:

Beim Einfügen eines Bildes zeigt die Summernote-Komponente das Bild standardmäßig in binärer Form an. Wenn der Inhalt des Textfelds auf diese Weise in der Datenbank gespeichert wird, entsteht eine große Menge an Datenbankdaten

Dies ist das Feld, das standardmäßig in der Datenbank gespeichert wird, wenn Summernote Bilder einfügt:

Daher wird hier eine andere Methode verwendet, nämlich das Hochladen des Bildes auf den Server. Nach erfolgreichem Hochladen wird die Zugriffsadresse des Bildes an den eingefügten Bildspeicherort zurückgegeben und das Bild angezeigt Die spezifische Implementierung ist wie folgt:                                          Die Hintergrundverarbeitungsanforderung speichert das Bild auf dem Server. Bei Erfolg wird die Bildzugriffsadresse zurückgegeben:

Hinweis: Ich habe die Zuordnungsbeziehung zwischen der realen Adresse für das Hochladen von Bildern und der virtuellen Bildzugriffsadresse in der server.xml von Tomcat konfiguriert, sodass die virtuelle Zugriffsadresse nach erfolgreichem Hochladen an das Frontend zurückgegeben wird

Empfehlung: Der echte Upload-Root-Pfad sollte in die Eigenschaften

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

Konfigurationsdatei

geschrieben werden, um zukünftige Adressänderungen zu erleichtern. Gleichzeitig sollte der virtuelle Zugriffs-Root-Pfad nicht in der Datenbank gespeichert werden . Der Root-Pfad für den virtuellen Zugriff wird ebenfalls in die Eigenschaftendatei geschrieben.

Methode zum Abrufen des Inhalts des Bearbeitungsfelds:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP-Chinesisch Webseite! Empfohlene Lektüre:

Operationssuchkomponente wird auf der Tastatur angezeigt

Verwenden Sie die statische Methode der Class-Klasse in ES6

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung der Texteditor-Komponente Summernote von BootStrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!