BootStrap的文字編輯器元件Summernote使用詳解

這次帶給大家BootStrap的文字編輯器元件Summernote使用詳解，BootStrap文字編輯器元件Summernote使用詳解的注意事項有哪些，以下就是實戰案例，一起來看一下。

Summernote是一個基於jquery的bootstrap超級簡單WYSIWYG線上編輯器。 Summernote非常的輕量級，大小只有30KB，支援Safari,Chrome,Firefox、Opera、Internet Explorer 9 (IE8支援即將到來)。

特點：

世界上最好的WYSIWYG線上編輯器

極易安裝

開源

自訂初化選項

支援快捷鍵

適用於各種後端程式言語

Summernote官網網址 ：https://summernote.org/

這是官網的例子：

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>

效果圖：

# 最簡單的預設初始化元件的方式：

# 在

新增一個容器

：

<p>Hello Summernote</p>

再用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...', // 佔位符##    placeholder: 'write /對話方塊放在編輯方塊還是Body
              dialogsFade: true ,//對話方塊顯示效果
           shortcuts: false ,//停用快速鍵

還有

回呼函數

：

callbacks: {
 
 }

回呼函數裡面的事件有 oninit，onenter，onfocus，onblur，onkeyup，onkeydown，onpaste,onImageUpload 等等，

# 這裡主要介紹上傳圖片觸發的事件 onImageUpload ：

# 插入圖片的時候，Summernote元件預設是將圖片以二進位形式展示的，如果以此方式將文字方塊的內容儲存到資料庫時，會導致資料庫資料量很大

這是summernote預設方式插入圖片時儲存到資料庫的欄位：

所以這裡採用另一個方法，就是將圖片上傳到伺服器，上傳成功後回傳圖片的存取位址到插入的圖片位置，展示圖片；

內容功能 後台處理請求儲存圖片到伺服器，成功則返回圖片存取位址：

#  注意：我這裡是將圖片上傳的真實位址和虛擬的圖片存取位址在tomcat的server.xml中設定了映射關係，所以上傳成功後回傳給前端的是虛擬的存取位址；

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

建議：真實的上傳根路徑應寫在properties

設定檔

中，方便日後位址的修改，同時虛擬的存取根路徑也不應儲存到資料庫當中，只需儲存相對位置就可以，將虛擬的存取根路徑也寫在properties檔案當中。

 取得編輯框內容的方法：

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

操作search元件在鍵盤顯示

使用ES6中Class類別的靜態方法

以上是BootStrap的文字編輯器元件Summernote使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！