Skip to content

Latest commit

 

History

History
815 lines (720 loc) · 30.7 KB

README.md

File metadata and controls

815 lines (720 loc) · 30.7 KB
Raw

Summernote Plugins

打包 Plugins

打包 src/plugin 檔案到 plugin 目錄

cd src\plugin
node .\bundle-plugins.js

Contents

import plugins

require('react-summernote/plugin/lang/summernote-zh-TW')

require('react-summernote/plugin/custom/summernote-comment-popover')
require('react-summernote/plugin/custom/summernote-copy-formatting')
require('react-summernote/plugin/custom/summernote-custom-cleaner')
require('react-summernote/plugin/custom/summernote-custom-contextmenu')
require('react-summernote/plugin/custom/summernote-custom-font')
require('react-summernote/plugin/custom/summernote-custom-specialchars')
require('react-summernote/plugin/custom/summernote-custom-style')
require('react-summernote/plugin/custom/summernote-custom')
require('react-summernote/plugin/custom/summernote-fontsize-input')
require('react-summernote/plugin/custom/summernote-imagemap')
require('react-summernote/plugin/custom/summernote-pastehtml')
require('react-summernote/plugin/custom/summernote-toc')
require('react-summernote/plugin/custom/summernote-view-classlist')

require('react-summernote/plugin/formatting/summernote-addclass')
require('react-summernote/plugin/formatting/summernote-case-converter')
require('react-summernote/plugin/formatting/summernote-image-attributes')
require('react-summernote/plugin/formatting/summernote-image-captionit')
require('react-summernote/plugin/formatting/summernote-image-shapes')
require('react-summernote/plugin/formatting/summernote-list-styles')
require('react-summernote/plugin/formatting/summernote-list-styles.css')
require('react-summernote/plugin/formatting/summernote-pagebreak')
// require('react-summernote/plugin/formatting/summernote-video-attributes')
require('react-summernote/plugin/formatting/summernote-video-attr-setter')

require('react-summernote/plugin/insert/summernote-at-mention')
require('react-summernote/plugin/insert/summernote-file')
require('react-summernote/plugin/insert/summernote-element-template')

require('react-summernote/plugin/misc/summernoteDrafts')  // see summernote-drafts to install store
require('react-summernote/plugin/misc/summernote-ext-print')
require('react-summernote/plugin/misc/summernote-text-findnreplace')
require('react-summernote/plugin/misc/summernote-ext-table')
require('react-summernote/plugin/misc/summernote-ext-table.css')

require('react-summernote/plugin/special_characters/summernote-ext-specialchars')

//require('react-summernote/plugin/syntax/summernote-ext-highlight')  // require run_prettify
//require('react-summernote/plugin/syntax/run_prettify')

Example

options = {{
  lang: `zh-TW`,
  toolbar: [
    [`icon`, [`emoji`, `specialChar`]],
    [`style`, [`style`, `addclass`, `customStyle`]],
    [`font`, [`caseConverter`, `bold`, `underline`, `clear`]],
    [`fontname`, [`fontname`, `customFont`]],
    ['fontsize', ['fontsizeInput']],
    ['color', ['color']],
    [`para`, [`customUL`, `ol`, 'listStyles', `paragraph`]],
    [`table`, [`jTable`, `jInsertTableDialog`, `jMerge`, `jBackcolor`, `jBorderColor`, `jAlign`, `jAutoFit`, `jTableInfo`, `jWidthHeightReset`, `jAddDeleteRowCol`]],
    ["tableRow", ["jRowHeight"]],
    ["tableCol", ["jColWidth"]],
    [`insert`, [`link`, `picture`, 'imageMap', 'videoAttributes', 'audio', 'file', 'template']],
    [`print`, [`pagebreak`, `print`]],
    ['misc', ['sDraftsLoad', 'sDraftsSave', 'findnreplace']],
    //['syntax', ['highlight']],
    ['toc', ['anchor', 'toc', 'editAnchor', 'markAnchor']],
    [`view`, [`fullscreen`, `codeview`]],
  ],
  popover: {
    image: [
      ['custom', ['imageAttributes', 'captionIt', 'imageShapes', 'imageMap']],
      ['resize', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
      ['float', ['floatLeft', 'floatRight', 'floatNone']],
      ['remove', ['removeMedia']],
    ],
    link: [
      ['link', ['linkDialogShow', 'unlink']],
    ],
    table: [
      ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
      ['delete', ['deleteRow', 'deleteCol']],
      ['color', ['jBackcolor', 'jBorderColor' ]],
      ['style', ['jAlign', 'jMerge' ]],
      ['info', ['jAutoFit', 'jTableInfo']],
      ['delete', ['jWidthHeightReset', 'deleteTable']],
    ],
    air: [
      ['color', ['color']],
      ['font', ['bold', 'underline', 'clear']],
      ['para', ['ul', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture']],
      ['view', ['fullscreen', 'codeview']],
    ],
  },
  tableClassName: 'jtable table-bordered',
  callbacks: {
    onFileUpload: (file) => {}, // 自行處理上傳的檔案
    onFileLinkInsert: (url) => {}, // 自行處理插入的網址
    onFileUploadError: () => {},  // 上傳的檔案不支援或插入的網址有誤
    onFileUploadDone: () => {},
    summernoteAtMention: {
      getSuggestions:  (value) => {
        const user = ['Amy', 'Ban', 'Curry'];
        return user.filter((name) => {
          return name.includes(value) && name !== value
        });
      },
    },
  },
  sDrafts: {
    storePrefix: 'sDrafts'
  },
  template: {
    list: {
      'sample text': $('<span><h1>sample</h1> text</span>'),
      'bussiness letter': $(ReactDOMServer.renderToString(<BussinessLetter Date={new Date().toLocaleString()}/>))
      // render at initial
    }
  },
  fontsizeInput: {
      max: 200,
      min: 5,
      sizes: ['8', '9', '10', '11', '12', '14', '16', '18', '26', '42', '74']
  },
}}

Button 功能

  • Custom

    • summernote-comment-popover
      • editPopover: 插入註解 popover
      • removePopover: 移除註解 popover
    • summernote-copy-formatting
      • copyFormatting: 複製格式
    • summernote-custom-cleaner
      • customCleaner: 清除所有樣式
    • summernote-custom-font
      • customFont: 自訂字體
    • summernote-custom
      • customUL: 插入項目清單 ul 並自動帶入 padding-left: 40px;
    • summernote-custom-specialchars
      • customSpecialChar: 插入特殊符號
    • summernote-custom-style
      • customStyle: 自訂樣式
    • summernote-fontsize-input
      • fontsizeInput: 更新字號
    • summernote-imagemap
      • imageMap: 插入影像地圖，toolbar & image popover
    • summernote-pastehtml
      • pasteHTML: 插入 HTML
    • summernote-toc
      • anchor: 插入錨點
      • toc: 產生 TOC ，置於 toolbar
      • markAnchor: 顯示錨點

  • Formatting

    • summernote-addclass
      • addclass: 套用 class 樣式
    • summernote-case-converter
      • caseConverter: 切換文字大小寫
    • summernote-image-attributes
      • imageAttributes: 編輯圖片屬性，image popover
    • summernote-image-captionit
      • captionIt: 插入圖片標題，image popover
    • summernote-image-shapes
      • imageShapes: 套用圖片樣式/外框，image popover
    • summernote-list-styles
      • listStyles: 變更項目符號
    • summernote-pagebreak
      • pagebreak: 插入分頁符號
    • summernote-video-attributes
      • videoAttributes: 插入影片，設定影片屬性

  • Insert

    • summernote-file
      • file: 上傳檔案或插入網址的檔案
    • summernote-element-template
      • template: 套用設定的 template

  • Misc

    • summernote-drafts
      • sDraftsLoad: 載入儲存的草稿
      • sDraftsSave: 儲存草稿到 local storage
    • summernote-ext-print
      • print: 列印編輯器的內容
    • summernote-text-findnreplace
      • findnreplace: 開啟搜尋與取代
    • summernote-ext-table
      • jTable: 新增適用於 table resizing 的表格，toolbar & table popover
      • jInsertTableDialog: 透過 dialog 新增適用於 table resizing 的表格，toolbar & table popover
      • jAddDeleteRowCol: 框選 新增/刪除 欄/列，toolbar & table popover
      • jMerge: 框選後合併/分割 cell，toolbar & table popover
      • jBackcolor: cell 的背景色，toolbar & table popover
      • jBorderColor: 整個表格 border 顏色，toolbar & table popover
      • jAlign: cell 的對齊方式，toolbar & table popover
      • jAutoFit: 自動調整 table 欄寬，toolbar & table popover
      • jRowHeight: 輸入框調整列高，toolbar
      • jColWidth: 輸入框調整欄寬，toolbar
      • jTableInfo: 調整整個 table 的 margin，toolbar & table popover
      • jWidthHeightReset: 重設 cell 寬高，toolbar & table popover
      • jAddRowTop: 在上方插入列
      • jAddRowBottom: 在下方插入列
      • jAddColLeft: 在左方插入欄
      • jAddColRight: 在右方插入欄
      • jDeleteRow: 刪除列
      • jDeleteCol: 刪除欄
      • jCellMerge: 合併儲存格
      • jCellSplit: 分割儲存格
      • jFontname: 框選更新表格內字體，table popover
      • jStyleCell: 編輯單一儲存格樣式，table popover

  • Special Characters & Icons

    • summernote-ext-specialchars
      • specialChar: 插入特殊符號

  • Syntax (棄用)

    • summernote-ext-highlight
      • highlight: 插入程式碼片段

Plugin 簡介

Lang

summernote-zh-TW

- 更新 summernote 繁中翻譯

Custom

summernote-comment-popover

  • 框選文字段落加上註解 popover
  • 若要在編輯器以外顯示需要設定
    • 初始化 popover
    • 定義 popover css
  • toolbar button: editPopover, removePopover

    • editPopover: 插入註解 popover

    • removePopover: 移除註解 popover

      // options
commentPopover: {
    className: 'summernote-comment-popover',  // popover classname
    anchorClassName: 'summernote-comment-popover-anchor',   // popover anchor classname
    urlPattern: /https?:\/\/(?:[\w\u00a1-\uffff]+\.?)+(?::\d{2,5})?(?:\/[^\s]*)?/,  // test image url validity
    titleMaxLength: 100,  // title input maxlength
    contentMaxLength: 100,  // content input maxlength
    disabledImage: false,   // disable popover image
    disabledTitle: true,    // disable popover title
    disabledContent: false, // disable popover content
    displayDelay: 300,  // delay display popover
}

      使用 className 初始化 popover

      $(a.summernote-comment-popover-anchor[data-toggle="popover"]).hoverPopover()

      設定 className css

      .summernote-comment-popover-anchor:not([href]){color: #8ac193;}
.summernote-comment-popover-anchor:not([href]):hover{color: #8ac193; text-decoration: underline;}
.summernote-comment-popover .popover-image {max-height: 500px; width: auto;}

summernote-copy-formatting

  • 複製格式，格式分為文字、表格、列表
  • toolbar button: copyFormatting
    • copyFormatting: 複製格式

summernote-custom-cleaner

  • 清除所有樣式包含 Styled Tag, Style, className
  • toolbar button: customCleaner

    • customCleaner: 清除所有樣式

      // options
customCleaner: {
    excludedClassName: 'jtable table-bordered', // 要略過清除的 className
    removedTags: [],    // 要清除的 tag
    removedAttrs: [],   // 要清除的 attribute
}

summernote-custom-contextmenu

  • 自定義右鍵功能列表

  • 可將已定義的按鈕加入右鍵功能列表

    // options
    customContextMenu: {
    className: 'summernote-custom-contextmenu',
    menuBtns: [
        // group
        [
            // button
            { key: 'cut', name: lang.customContextMenu.cut, },
        ],
        [
            {
                // key: button key
                // name: button text
                // contents: if this button not in memo use contents to build new button
                // toggle: this button only available on (Table, Anchor, List, Img)
                // submenu: define submenu toggle on hover
                key: 'jDeleteRowCol', name: lang.jTable.deleteCell,
                contents: ui.icon(options.icons.rowRemove),
                toggle: 'table',
                submenu: [
                    { key: 'jDeleteRow', name: lang.table.delRow, },
                    { key: 'jDeleteCol', name: lang.table.delCol, },
                ]
            },
        ]
    ],
    // open context menu callback function
    onContextMenuOpen: function (contextMenu) {
        // toggle button
    },
    // should initialize this plugin
    shouldInitialize: true,
}

summernote-custom-font

  • 使用者自訂字體，並提供單一選項有多個值的功能

  • toolbar button: customFont

    • customFont: 套用自訂字體
     // options
 customFont: {
     fontNames: [
         'Comic Sans MS', 'Courier New', 'Times New Roman',
         { name: '新細明體', value: '新細明體, serif' },
         { name: '微軟正黑體', value: '微軟正黑體, sans-serif' },
         { name: '標楷體', value: '標楷體, DFKai-SB, BiauKaiTC' }
     ],
 }

summernote-custom

  • custom ul button, close toolbar colorplette, table popover language zh-TW
  • toolbar button: customUL
  • customUL: 插入項目清單 ul 並自動帶入 padding-left: 40px;

summernote-custom-specialchars

  • 改寫自 summernote-ext-specialchars
  • Few tweaks to the official specialchars plugin, revising the view and making it more mobile-friendly
  • 插入特殊符號
  • toolbar button: customSpecialChar
  • customSpecialChar: 插入特殊符號

summernote-custom-style

  • 使用者自訂樣式，可設定字體、字號、粗體、斜體、刪除線、字型顏色、字型背景，樣式使用 localStorage 儲存

  • 字體依賴 summernote-custom-font plugin

  • toolbar button: customStyle

  • customStyle: 套用自訂樣式

    // options
customStyle: {
    maxStyle: 5,    // 樣式數量上限
    storeKey: 'summernote-stylelist',   //  localStorage 儲存使用 key
    onGetList: () => {  // onGetList: async () => styleList 取得樣式列表
        let list = [
            { name: 'style1', styles: { 'font-family': 'Comic Sans MS', 'font-style': 'italic', 'color': '#007bff' } },
            { name: 'style2', styles: { 'font-size': '24px', 'font-weight': 'bold', 'color': '#ffc107' } },
            { name: 'style3', styles: { 'font-size': '10px', 'font-weight': 'bold', 'font-style': 'italic', 'color': '#ff9c00' } },
            { name: 'style4', styles: { 'font-size': '40px', 'color': '#634aa5' } },
            { name: 'style5', styles: { 'text-decoration': 'line-through', 'color': '#E76363' } },
        ]
        return list
    },
    onSave: (list) => list, // onSave: async (styleList) => styleList 儲存樣式列表
}

    styleList 樣式列表格式

    [
    {
        "name": "style2",   // style name
        "id": "lqbyjoaxmsbzfnqv3ho",    // style id if is not given will automatically generate random one
        "styles": {     // styles accept: font-family, font-size, font-weight, font-style, font-style, text-decoration, color, background-color
            "font-family": "Comic Sans MS",
            "font-size": "16px",
            "font-weight": "bold",
            "font-style": "italic",
            "text-decoration": "line-through",
            "color": "#3984C6",
            "background-color": "#FFEFC6"
        }
    }
]

  • 使用範例

    在 React 以 customStyle.onGetList, customStyle.onSave 串接 API

    1. 定義 Editor component

      將 onGetCustomStyle, onSaveCustomStyle 轉換成 options customStyle.onGetList, customStyle.onSave

      const Editor = React.forwardRef(function (props, ref) {
    return (
        <SummerNote {...props}
            ref={ref}
            options={{
                ...props.options,
                customStyle: {
                    ...props.options.customStyle,
                    onGetList: props.onGetCustomStyle,
                    onSave: props.onSaveCustomStyle,
                },
            }} />
    )
})

    2. 使用 Editor component

      定義 async function onGetCustomStyle, onSaveCustomStyle 呼叫 API

          onGetCustomStyle = async () => {
        let resp = await fetch(`${HOST}/get/data/api`, {
            method: 'GET',
            headers: {
                'Accept': '*',
            },
            mode: 'cors',
            credentials: 'include',
        })
        let data = await resp.json()
        if (data && data.result) {
            return data.data
        }
    }

    onSaveCustomStyle = async (list) => {
        let resp = await fetch(`${HOST}/save/data/api`, {
            method: 'POST',
            headers: {
                'Accept': '*',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                miscdata: list,
            }),
            mode: 'cors',
            credentials: 'include',
        })
        let data = await resp.json()
        if (data && data.result) {
            return list
        }
    }

      透過 props 傳遞 function

      <Editor
    onGetCustomStyle={GetCustomStyle} 
    onSaveCustomStyle={SaveCustomStyle} 
/>

summernote-fontsize-input

  • 以輸入框和下拉選單更新 fontsize
  • toolbar button: fontsizeInput

    • fontsizeInput: 更新字號

      // options
fontsizeInput: {
    max: 200,   // input 最大值 (px)
    min: 5,     // input 最小值 (px)
    sizes: ['8', '9', '10', '11', '12', '14', '16', '18', '26', '42', '74'] // dropdown 選項 (px)
}

summernote-imagemap

  • 編輯圖片影像地圖
  • 依賴 bootstrap collapse
  • toolbar and image popover button: imageMap

    • imageMap: 插入影像地圖

      // options
imageMap: {
    maxArea: 30,    // 區域數量上限
}

summernote-pasteHTML

  • 在游標位置插入 HTML
  • toolbar button: pasteHTML
    • pasteHTML: 插入 HTML

summernote-toc

  • 插入 anchor 快捷鍵 ctrl + shift + a

  • toolbar button: anchor, toc, editAnchor, markAnchor

    • anchor: 插入錨點

    • toc: 產生 TOC ，置於 toolbar

    • editAnchor: 編輯錨點

    • markAnchor: 顯示錨點

      // options
toc: {
  selector: '#test_toc' // 使用 selector 指定 toc 的位置，預設放置在 toolbar
},

  • 自行製作 TOC

$editor.find(`.${prefix}-toc-anchor`).each((i, d) => {
    let text = $(d).attr('data-anchortext'),
        id = $(d).attr('id')
    
    // 產生 TOC
    var anchor = $('<a>').attr('href', '#' + id)
    anchor.text(text)
    var li = $('<li>').append(anchor)
    $('#selector').append(li)
})

Formatting

summernote-addclass

  • With this plugin you will get a configurable button so you'll be able to toggle custom CSS classes in summernote elements (like the default 'style' button, but you can define custom CSS classes, eg. your favourite UI framework styling classes)
  • 選取文字套用 class 樣式，預設可套用 bootstrap class 樣式，也可改用自訂的 class 樣式
  • toolbar button: addclass
    • addclass: 套用 class 樣式
```js
// options
addclass: {
  debug: false,
  // title: example text on list, value: className (multipule className accepted)
  // 使用自訂的 class
  classTags: [`test`, `classname`, {title:`Button`, value:`btn btn-success`}]
},
```

summernote-case-converter

  • Adds a button to the Toolbar with a dropdown that allows case converting in any text in the editor.
  • 文字大小寫轉換
  • toolbar button: caseConverter
    • caseConverter: 切換文字大小寫

summernote-image-attributes

  • This is a forked and extended version of "summernote-image-title", for those that want a little more control over editable attributes for Images.
  • 圖片屬性
  • image popover button: imageAttributes
    • imageAttributes: 編輯圖片屬性
```js
// options
imageAttributes: {
  autoInsertTitle: true     // Automatically insert image tile below the image
}
```

summernote-image-captionit

  • Allows adding figure and figcaption to images, with removal when selected twice.
  • 圖片標題
  • image popover button: captionIt
    • captionIt: 插入圖片標題
```js
// options
captionIt: {
  captionInAnchor: false
},
```

summernote-image-shapes

  • Adds option with dropdown to the Image Popover to add or remove Bootstrap Image Classes for styling the look and behaviour of images.
  • bootstrap 圖片樣式
  • image popover button: imageShapes
    • imageShapes: 套用圖片樣式/外框

summernote-list-styles

  • Adds a toolbar dropdown menu to change the number/bullet style of HTML lists.
  • 更多項目符號、編號樣式 (都使用 ol 表現)
  • 括弧類項目符號需要 css 才能顯示，參考 summernote-list-styles.css
  • toolbar button: listStyles
    • listStyles: 變更項目符號

summernote-pagebreak

  • Visually add Page-Breaks to editor content.
  • 分頁符號自動套用再列印模式
  • toolbar button: pagebreak
    • pagebreak: 插入分頁符號

summernote-video-attributes

  • Adds a Toolbar Button for Allowing to edit Video Attributes before inserting into Editor.
  • 影片屬性
  • toolbar button: videoAttributes
    • videoAttributes: 插入影片，設定影片屬性

summernote-video-attr-setter

  • 修改影片，設定影片屬性
  • 新增 video 專用 popover

Insert

summernote-at-mention

  • Triggers a dropdown with autocomplete options whenever the @ character is encountered in a new word.
  • @提示清單，設定 callbacks 處理列表
```js
// options
callbacks: {
  summernoteAtMention: {
    getSuggestions:  (value) => {
      const user = ['Amy', 'Ban', 'Curry']; // 推薦列表
      return user.filter((name) => {
        return name.includes(value) && name !== value
      });
    },
  },
},
```

summernote-file

  • Summernote plugin to insert files by URL or file upload
  • 插入圖檔、音檔、影片檔，提供 callbacks
  • toolbar button: file
    • file: 上傳檔案或插入網址的檔案
```js
// options
callbacks: {
  onFileUpload: (file) => {}, // 自行處理上傳的檔案
  onFileLinkInsert: (url) => {}, // 自行處理插入的網址
  onFileUploadError: () => {},  // 上傳的檔案不支援或插入的網址有誤
  onFileUploadDone: () => {}
},
```

summernote-element-template

  • 插入 template ，改成用 jquery 從 React 初始化 template
  • toolbar button: template
    • template: 套用設定的 template
 import ReactDOMServer from 'react-dom/server'
 render(
   <SummerNote options={{
   template: {
       list: {
         // 從 react 設定
         'sample text': $('<span><h1>sample</h1> text</span>'),
         'bussiness letter': $(ReactDOMServer.renderToString(<BussinessLetter Date={new Date().toLocaleString()}/>))  // render React element to html
       }
     }
   }}/>
 , document.getElementById('root'))

summernote-template

  • Dropdown of pre-defined custom templates. You can add your own html templates and insert them in the editor in one click.
  • 整合到 summernote-element-template

summernote-templates

  • Add Toolbar Buttons to add Page and Block Templates from html template files.
  • 整合到 summernote-element-template

Misc

summernote-drafts

  • Allows users to save and load drafts directly on the editor.
  • 使用 local storage 儲存草稿，需要 store.js
  • toolbar button: sDraftsLoad, sDraftsSave
    • sDraftsLoad: 載入儲存的草稿
    • sDraftsSave: 儲存草稿到 local storage
 npm i store
 // webpack
 plugins: [
   new webpack.ProvidePlugin({
     store: `store`
   })
 ],
 // options
 sDrafts: {
   // 可自行設定草稿的 prefix ，用於判斷 local storage 中要顯示的草稿
   storePrefix: 'sDrafts'
 },

summernote-ext-print

  • Add print button on toolbar. This allows summernote to print its own document, not whole page.
  • 列印編輯器內的內容，可搭配 summernote-pagebreak
  • toolbar button: print
    • print: 列印編輯器的內容

summernote-text-findnreplace

  • Adds an area to the Toolbar when plugin button is select to allow find and replace in the editor area.
  • 搜尋取代
  • toolbar button: findnreplace
    • findnreplace: 開啟搜尋與取代

summernote-ext-table

  • Adds table column/row resize, cell background-color change, cell merge, cell unmerge, border-color change, table margin change, table width/height reset.
  • table 功能
    • 字體依賴 summernote-custom-font plugin
  • toolbar and table popover button: jTable jMerge, jBackcolor, jBorderColor, jAlign, jAddDeleteRowCol, jAutoFit, jRowHeight, jColWidth, jTableInfo, jWidthHeightReset, jFontname, jStyleCell
    • jTable: 新增適用於 table resizing 的表格
    • jInsertTableDialog: 透過 dialog 新增適用於 table resizing 的表格
    • jAddDeleteRowCol: 框選 新增/刪除 欄/列
    • jMerge: 框選後合併/分割 cell
    • jBackcolor: cell 的背景色
    • jBorderColor: 整個表格 border 顏色
    • jAlign: cell 的對齊方式
    • jAutoFit: 自動調整 table 欄寬提供「自動調整成內容大小」、「自動調整成視窗大小」、「固定欄寬」三種模式
    • jRowHeight: 輸入框調整列高
    • jColWidth: 輸入框調整欄寬
    • jTableInfo: 調整整個 table 的 margin
    • jWidthHeightReset: 重設 cell 寬高
    • jAddRowTop: 在上方插入列
    • jAddRowBottom: 在下方插入列
    • jAddColLeft: 在左方插入欄
    • jAddColRight: 在右方插入欄
    • jDeleteRow: 刪除列
    • jDeleteCol: 刪除欄
    • jCellMerge: 合併儲存格
    • jCellSplit: 分割儲存格
    • jFontname: 框選更新表格內字體
    • jStyleCell: 編輯單一儲存格樣式

Special Characters & Icons

summernote-ext-specialchars

  • Few tweaks to the official specialchars plugin, revising the view and making it more mobile-friendly
  • 插入特殊符號
  • toolbar button: specialChar
    • specialChar: 插入特殊符號

Syntax (棄用)

summernote-ext-highlight

  • Based on code-prettify the summernote code highlighting plugin
  • code prettify，使用 Google code-prettify，react-summernote/plugin/syntax/run_prettify
  • toolbar button: highlight
    • highlight: 插入程式碼片段