技術標籤：HTMLjavascripthtml

tinymce-plugins

前言

因為專案需要用到富文字編輯器眾多富文字編輯器中，選擇了 Tinymce，根據專案需要對Tinymce 進行擴充套件和增強外掛，記錄一下，並同時分享給需要幫助的人。

tinymce 官方文件

tinymce 中文文件

本外掛集合地址

簡述

This is tinymce plugins
該專案主要為 tinymce 富文字編譯器的擴充套件外掛，或增強優化外掛
目前整理完成的外掛列表如下：

• imagetools [增強優化]： 圖片編輯工具外掛， 對圖片進行處理。優化跨域，功能更豐富；
• table [增強優化]：表格外掛，處理表格。 增強優化表格控制，增加表格轉圖片功能，便捷佈局按鈕；
• indent2em[增強優化]：首行縮排外掛。提供中文段落排版的首行縮排2個字元的功能。增強優化 加入字間距非預設情況，也能實現準確首行縮排2字元；
• letterspacing：設定間距外掛。可以設定文件中的文字間距；
• layout： 一鍵佈局外掛。可以給文件段落進行一鍵快速排版佈局；
• importword： 匯入word外掛。可以直接匯入word ,並且保證word中圖片不會丟失，自動轉為base64;

使用說明

未使用過 tinymce ，可以檢視莫若卿大佬的 tinymce 中文文件

imagetools 使用方法：

增強效果：

  tinymce.init({
    selector:
 
 '#tinydemo',
    plugins: "image imagetools",
    toolbar: "image",
   });

更多配置 見 外掛 / imagetools

table 使用方法：

增強效果：

tinymce.init({
    selector: '#tinydemo',
    plugins: "table",
    toolbar: "table"
});

更多配置 見 外掛 / table

indent2em 使用方法：

tinymce.init({
    selector:
 
 '#tinydemo',
    plugins: "indent2em",
    toolbar: "indent2em"
});

更多配置 見 外掛 / indent2em

letterspacing 使用方法：

tinymce.init({
    selector: '#tinydemo',
    plugins: "letterspacing",
    toolbar: "letterspacing"
});

更多配置(選配) :

提供欄位 letterspacing 配置引數【String型別】，空格隔開；

tinymce.init({
   selector: '#tinydemo',
   plugins: "letterspacing",
   toolbar: "letterspacing",
   letterspacing: "0px 2px 4px 6px 24px"
});

layout 使用方法：

tinymce.init({
    selector: '#tinydemo',
    plugins: "layout",
    toolbar: "layout"
});

更多配置 (選配):

提供 一鍵佈局 預設引數欄位 layout_options 配置引數【Object型別】目前一共3個屬性：

1. alignment 【對齊方式：justify（預設） , left , right , center 等】；
2. lineheight 【設定行高】預設1.5
3. indent2em 【設定首行縮排】 預設 首行縮排 2欄位

tinymce.init({
    selector: '#tinydemo',
    plugins: "layout",
    toolbar: "layout",
    layout_options: {alignment:'left',lineheight: 1.5,indent2em: '2em'}
});

importword 使用方法：

tinymce.init({
    selector: '#tinydemo',
    plugins: "importword",
    toolbar: "importword"
});

更多配置(選配) :

提供 匯入word 外掛 過濾函式 mportword_filter 配置引數【Function型別】傳入2個引數

1. result : 匯入word 生成的 html標籤字串【String】
2. insert : 插入回撥函式 傳入 html標籤字串【String】

tinymce.init({
    selector: '#tinydemo',
    plugins: "importword",
    toolbar: "importword",
    importword_filter: function(result,insert){ 
       // 自定義操作部分
      insert(result) //回插函式
    }
});

歡迎提出建議，動手點贊 ，或提pr

點選跳轉 github專案地址