欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于BootStrap的文本編輯器組件Summernote

 更新時間:2017年10月27日 15:21:04   投稿:mrr  
Summernote是一個基于jquery的bootstrap超級簡單WYSIWYG在線編輯器。這篇文章主要介紹了基于BootStrap的文本編輯器組件Summernote的相關(guān)資料,需要的朋友可以參考下

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

特點:

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

極易安裝

開源

自定義初化選項

支持快捷鍵

適用于各種后端程序言語

Summernote官網(wǎng)地址 :https://summernote.org/

這是官網(wǎng)的一個例子:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Summernote</title>
 <link  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  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']], //幫助
  ],

其它的一些初始化設(shè)置:

              lang:'zh-CN',  //設(shè)置中文,需引入中文插件summernote-zh-CN.js
              placeholder: 'write here...', //占位符
              dialogsInBody: true,  //對話框放在編輯框還是Body
              dialogsFade: true ,//對話框顯示效果
              disableDragAndDrop: true ,//禁用拖放功能
              shortcuts: false ,//禁用快捷鍵

還有回調(diào)函數(shù):

callbacks: {
 
 }

回調(diào)函數(shù)里面的事件有 oninit,onenter,onfocus,onblur,onkeyup,onkeydown,onpaste,onImageUpload 等等,

這里主要介紹上傳圖片觸發(fā)的事件 onImageUpload :

插入圖片的時候,Summernote組件默認是將圖片以二進制形式展示的,如果以此方式將文本框的內(nèi)容存儲到數(shù)據(jù)庫時,會導致數(shù)據(jù)庫數(shù)據(jù)量很大

這是summernote默認方式插入圖片時存儲到數(shù)據(jù)庫的字段:

所以這里采用另一個方法,就是將圖片上傳到服務(wù)器,上傳成功后回傳圖片的訪問地址到插入的圖片位置,展示圖片;

具體實現(xiàn)如下:                                

callbacks: { 
     onImageUpload: function(file) { //圖片默認以二進制的形式存儲到數(shù)據(jù)庫,調(diào)用此方法將請求后臺將圖片存儲到服務(wù)器,返回圖片請求地址到前端
      //將圖片放入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("上傳失敗");       
       } 
      });
     } 
     }

后臺處理請求存儲圖片到服務(wù)器,成功則返回圖片訪問地址:

 注意:我這里是將圖片上傳的真實地址和虛擬的圖片訪問地址在tomcat的server.xml中配置了映射關(guān)系,所以上傳成功后返回給前端的是虛擬的訪問地址;

@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(".")); 
  //如果路徑文件夾不存在就創(chuàng)建 
  File dir=new File(realuUploadBrandPath); 
  if(!dir.exists()){ 
  dir.mkdirs(); 
  } 
  // 新文件 
  File newFile = new File(realuUploadBrandPath+File.separator+newFileName); 
  // 將內(nèi)存中的文件寫入磁盤 
  try {
  picture.transferTo(newFile);
  } catch (IllegalStateException | IOException e) {
  // TODO Auto-generated catch block
  e.printStackTrace();
  } 
  // 文件虛擬地址 
  String fictitiousFilePath = fictitiousUploadBrandPath+newFileName; 
  return fictitiousFilePath;   
 }
 return "false"; 
 }

建議:真實的上傳根路徑應(yīng)寫在properties配置文件中,方便日后地址的修改,同時虛擬的訪問根路徑也不應(yīng)存儲到數(shù)據(jù)庫當中,只需存儲相對位置就可以,將虛擬的訪問根路徑也寫在properties文件當中。

 通過上面的方法處理后,存儲到數(shù)據(jù)庫的字段:

 獲取編輯框內(nèi)容的方法:

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

總結(jié)

以上所述是小編給大家介紹的基于BootStrap的文本編輯器組件Summernote,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 一文詳解GoJs中g(shù)o.Panel的itemArray屬性

    一文詳解GoJs中g(shù)o.Panel的itemArray屬性

    這篇文章主要為大家介紹了一文詳解GoJs中g(shù)o.Panel的itemArray屬性詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-05-05
  • 全屏滾動插件fullPage.js使用實例解析

    全屏滾動插件fullPage.js使用實例解析

    這篇文章主要為大家解析了全屏滾動插件fullPage.js使用實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • OpenCV.js實現(xiàn)喬丹動圖素描效果圖文教程

    OpenCV.js實現(xiàn)喬丹動圖素描效果圖文教程

    這篇文章主要為大家介紹了OpenCV.js實現(xiàn)喬丹動圖素描效果的圖文教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • webpack自動化打包方式詳解

    webpack自動化打包方式詳解

    這篇文章主要介紹了webpack自動化打包的相關(guān)知識,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-02-02
  • document.write()及其輸出內(nèi)容的樣式、位置控制

    document.write()及其輸出內(nèi)容的樣式、位置控制

    document.write(),用于簡單的打印內(nèi)容到頁面上,可以逐字打印你需要的內(nèi)容,既然可以輸出變量,肯定會想要去控制下變量的顯示,比如位置以及樣式
    2013-08-08
  • 使用requestAnimationFrame實現(xiàn)精準倒計時功能

    使用requestAnimationFrame實現(xiàn)精準倒計時功能

    實現(xiàn)精準倒計時對于活動預(yù)告、限時優(yōu)惠和賽事計時等場景非常重要,常用的倒計時方法包括使用JavaScript的setInterval和setTimeout,但這些方法精度有限,為提高精度,本文介紹使用requestAnimationFrame實現(xiàn)精準倒計時功能,感興趣的朋友一起看看吧
    2024-09-09
  • WebGL three.js學習筆記之陰影與實現(xiàn)物體的動畫效果

    WebGL three.js學習筆記之陰影與實現(xiàn)物體的動畫效果

    這篇文章主要介紹了WebGL three.js學習筆記 陰影與實現(xiàn)物體的動畫 ,需要的朋友可以參考下
    2019-04-04
  • js實現(xiàn)卡片式項目管理界面UI設(shè)計效果

    js實現(xiàn)卡片式項目管理界面UI設(shè)計效果

    這篇文章主要介紹了js實現(xiàn)卡片式項目管理界面UI設(shè)計效果,該UI設(shè)計中,將各個項目以卡片的方式堆疊排列在屏幕上,當點擊了其中的某個項目的時候,該項目圖片會全屏放大,向下滾動鼠標可以看到該項目的介紹信息,需要的朋友可以參考下
    2015-12-12
  • webgl實現(xiàn)物體描邊效果的方法介紹

    webgl實現(xiàn)物體描邊效果的方法介紹

    這篇文章主要給大家介紹了關(guān)于webgl實現(xiàn)物體描邊效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用webgl具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-11-11
  • js實現(xiàn)StringBuffer的簡單實例

    js實現(xiàn)StringBuffer的簡單實例

    下面小編就為大家?guī)硪黄猨s實現(xiàn)StringBuffer的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09

最新評論