功能豐富的JavaScript的HTML編輯器，功能齊全且輕量級。另外要注意TinyMCE對IE11以上才可運行

GitHub Star: 5,000
Javascripting Overall: 79%
瀏覽器: Chrome、Firefox和IE11+
RWD: 支援
License: GNU Lesser General Public License v2.1

《安裝》

• CDN

    <!-- TinyMCE v4.7.6 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.6/tinymce.min.js"></script>
  

• npm

    # 複製專案
    $ git clone https://github.com/tinymce/tinymce.git
  
    # 前往目錄
    $ cd tinymce/
  
    # 安裝全域Grunt-cli
    $ npm i -g grunt-cli
  
    # 安裝相依套件
    $ npm install
  
    # 安裝Tinymce
    $ grunt
  

《範例》

• 包含預覽功能的編輯器

    <textarea id="editor1"></textarea>
    <script>
    	tinyMCE.init({
    		// 初始化參數設定[註1]
    		selector: "textarea", // 目標物件
    		auto_focus: "editor1", // 聚焦物件
    		language: "zh_TW", // 語系(CDN沒有中文，需要下載原始source才有)
    		theme: "modern", // 模板風格
    		plugins : "advlist autolink link image lists charmap print preview", // 套件設定: 進階清單、自動連結、連結、上傳圖片、清單、特殊字元表、列印、預覽
    		mobile: { // 行動裝置設定
    		  	theme: "mobile", // 模板風格
    			plugins: [ "autosave", "lists", "autolink" ],  // 套件設定: 自動儲存、清單、自動連結
    			toolbar: [ "undo", "bold", "italic", "styleselect" ]  // 工具列設定: 復原、粗體、斜體、樣式表
    		} 
    	});
    </script>
  

  [註1]

  參數	描述

  selector|目標物件
  auto_focus|聚焦物件
  language|語系
  theme|模板風格
  plugins|套件設定
  toolbar|工具列設定
  mobile|行動裝置設定

  • 工具列列表: TinyMCE | TinyMCE Mobile
  • 套件列表: TinyMCE | Add Plugins to TinyMCE
  • 語系列表: TinyMCE | Localization

《延伸》

1. TinyMCE | The Most Advanced WYSIWYG HTML Editor
2. tinymce/tinymce: The world's most popular JavaScript library for rich text editing