天天看點

tinymce 富文本編輯器 常用插件

作者:白雨青

白雨青工作站發文位址:tinymce 富文本編輯器 常用插件-白雨青工作站

Advanced Tables 基于table插件的增強表格插件,添加了排序功能。

tinymce.init({
  plugins: 'table advtable',
  menubar: 'table'
});           

Anchor 錨點插件

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "anchor",
  toolbar: "anchor",
  menubar: "insert"
});           

Autolink 自動識别建立連接配接

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "autolink"
});           

Autoresize 自動調整編輯區大小

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "autoresize"
});           

autoresize_bottom_margin 編輯區下外邊距

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "autoresize",
  autoresize_bottom_margin: 50
});           

autoresize_on_init 是否在初始化的時候調整大小

autoresize_overflow_padding 編輯區内邊距

max_height 最大高度

min_height 最小高度

Code 用于檢視文章HTML代碼插件

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "code",
  toolbar: "code",
  menubar: "tools"
});           

Full Page

設定文檔源資料,如title、keyword和description等資訊,這些資訊将會出現在html的head标簽内。結合code插件使用,可以檢視fullpage插件的效果。

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "fullpage",
  menubar: "file",
  toolbar: "fullpage"
});            

fullpage_default_doctype 設定doctype,預設值是"<!DOCTYPE html>"

fullpage_default_encoding 設定預設編碼,預設值是無

fullpage_default_font_size 設定body預設字型大小

fullpage_default_font_family 設定body預設字型樣式

fullpage_default_title 設定預設标題

Full Screen

全屏插件使TinyMCE編輯區填充浏覽器的可視區域。

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "fullscreen",
  menubar: "view",
  toolbar: "fullscreen"
});             

Link

支援在文檔中插入一條連接配接

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "link",
  menubar: "insert",
  toolbar: "link"
});           

Image

圖檔插件

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "image",
  menubar: "insert",
  toolbar: "image",
  image_list: [
    {title: 'My image 1', value: 'https://www.example.com/my1.gif'},
    {title: 'My image 2', value: 'http://www.moxiecode.com/my2.gif'}
  ]
});             

file_picker_callback

file_picker_types

image_caption

image_list 預設圖檔清單,用處不大。

image_advtab 圖檔增強功能,用處不大。

image_class_list

image_description 是否展示圖檔描述字段輸入框,預設是true展示。

image_dimensions 是否展示圖檔尺寸輸入框,預設是true展示。

image_prepend_url 設定圖檔字首。

image_title 是否展示圖檔标題輸入框,預設是false不展示。

image_uploadtab 是否展示上傳标簽頁,預設是true展示,必須配合image_upload_url使用。

images_upload_base_path 設定圖檔的基礎路徑,上傳成功之後傳回的圖檔路徑加上該值即為圖檔的完整路徑。

images_upload_credentials 上傳操作是否攜帶證書。

images_upload_handler 設定一個函數來處理圖檔上傳,函數可接收三個參數blobInfo、success和failure,第一個參數是一個FormData類型的表單資料,第二個參數是上傳成功回調函數,最後一個是上傳失敗回調函數。

images_upload_url 設定上傳路徑。

繼續閱讀