2018年1月25日 星期四

關於 HTML EDIT Trumbowyg 的使用

官方網站 
   HTML 元件 
   
        <script src="自訂位置/trumbowyg.min.js"></script> //主要的功能
        <script src="自訂位置/plugins/upload/trumbowyg.cleanpaste.min.js"></script> //乾淨的黏貼功能 
        <script src="自訂位置/plugins/upload/trumbowyg.pasteimage.min.js"></script> //貼上圖片功能 
        <script src="自訂位置/langs/zh_tw.min.js"></script> //在地化元件
        <body>
        <div id="htmEdit"></div>

   簡單的文件 自訂化

$('#htmEdit').trumbowyg(
   {
    lang : 'zh_tw', //設定繁體中文 需要另外引入 /TrumbowygHtmlEditorSrc/langs/zh_tw.min.js.....
    btns : [
      [ 'undo', 'redo' ], // 設定按鈕 
      [ 'formatting' ],
      [ 'strong', 'em', 'del' ],
      [ 'superscript', 'subscript' ],
      [ 'link' ],
      [ 'insertImage' ],
      [ 'justifyLeft', 'justifyCenter', 'justifyRight',
        'justifyFull' ],
      [ 'unorderedList', 'orderedList' ],
      [ 'horizontalRule' ], [ 'removeformat' ],
      [ 'fullscreen' ] ]
   //Focus on editor: tbwfocus 焦點  
   //Blur on editor: tbwblur 離開 焦點  
   }).on('tbwinit', function() { // 若是修改 內文 的update 使用 INIT EVENT
  //Keep 當前輸入的值 。  
  $('#htmEdit').trumbowyg('html', '${vo.content}'); //有資料 則顯示 
 });
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)