iT邦幫忙

2018 iT 邦幫忙鐵人賽
0
Modern Web

30天學習30套前端技術(2018年)系列 第 48

[十分鐘學習] TinyMCE - HTML編輯器

example1

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

GitHub Star: 5,000
Javascripting Overall: 79%
瀏覽器: ChromeFirefoxIE11+
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 行動裝置設定

《延伸》

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

上一篇
[十分鐘學習] Faker.js - 做假資料的利器
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言