Tinymce - 宇宙第一富文本編輯器？[1]

時間  2019-11-05
標籤 tinymce 宇宙 第一 文本編輯器 简体版
原文   原文鏈接

Tinymce

tinymce是一款基礎組件十分豐富，不斷維護更新的富文本編輯器。在它的Github項目簡介中如此描述本身：javascript

The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angularcss

簡而言之: 我是宇宙第一的編輯器，我支持當前最流行的三個框架。html

我會分紅3篇文章介紹：java

  1. 編輯器的基本使用和一些簡單插件的配置
  2. 一些複雜插件的配置，和集成Vue
  3. 編寫自定義插件

Why Tinymce

  • 基礎組件豐富，簡單配置便可使用；
  • 自己有收費版和免費版，可盈利性保證了其持續維護和創新，開發版其實也徹底夠用；
  • 提供的開發拓展API也比較簡單，適合持續集成；
  • 開發文檔雖然是英文版，但言簡意賅，示例豐富，而且跟隨版本實時更新，對比市面上其餘編輯器好太多了

開始使用

本文使用的版本是 5.0.13jquery

安裝

Tinymce的核心文件和插件、皮膚、主題樣式等文件都是分離的，使用時，只需在HTML中引入核心文件（tinymce.js）便可。git

<script src="https://fe.120yibao.com/common/tinymce/5.0.13/tinymce.min.js"></script>
複製代碼

在生成新的編輯器實例時，須要傳入配置文件，tinymce會根據配置自動引入對應的插件、皮膚、主題文件，默認使用相對路徑（相對於與tinymce.js）的方式。github

const editor = Tinymce.init({
    //會自動引入link插件
    // https://fe.120yibao.com/common/tinymce/5.0.13/plugins/link/plugin.min.js
    plugins: ['link'],  
    //會自動引入silver主題
    // https://fe.120yibao.com/common/tinymce/5.0.13/themes/silver/theme.min.js
    theme: 'silver',
    //會自動引入oxide皮膚
    // https://fe.120yibao.com/common/tinymce/5.0.13/skins/ui/oxide/skin.min.css
    skin: "oxide"
})
複製代碼

而這些相對路徑的關係，跟npm包的對應關係是同樣的。npm

npm i tinymce
複製代碼

咱們看下npm包的目錄結構bash

.
├── jquery.tinymce.js
├── jquery.tinymce.min.js
├── plugins
│   ├── advlist
│   │   ├── index.js
│   │   ├── plugin.js
│   │   └── plugin.min.js
│   ├── anchor
│   │   ├── index.js
│   │   ├── plugin.js
│   │   └── plugin.min.js
│   ├── autolink
│   │   ├── index.js
│   │   ├── plugin.js
│   │   └── plugin.min.js
├── skins
│   ├── content
│   │   ├── default
│   │   │   ├── content.css
│   │   │   └── content.min.css
│   │   ├── document
│   │   │   ├── content.css
│   │   │   └── content.min.css
│   │   └── writer
│   │       ├── content.css
│   │       └── content.min.css
│   └── ui
│       ├── oxide
│       │   ├── content.css
│       │   ├── content.inline.css
│       │   ├── content.inline.min.css
│       │   ├── content.min.css
│       │   ├── content.mobile.css
│       │   ├── content.mobile.min.css
│       │   ├── fonts
│       │   │   └── tinymce-mobile.woff
│       │   ├── skin.css
│       │   ├── skin.min.css
│       │   ├── skin.mobile.css
│       │   └── skin.mobile.min.css
│       └── oxide-dark
│           ├── content.css
│           ├── content.inline.css
│           ├── content.inline.min.css
│           ├── content.min.css
│           ├── content.mobile.css
│           ├── content.mobile.min.css
│           ├── fonts
│           │   └── tinymce-mobile.woff
│           ├── skin.css
│           ├── skin.min.css
│           ├── skin.mobile.css
│           └── skin.mobile.min.css
├── themes
│   ├── mobile
│   │   ├── index.js
│   │   ├── theme.js
│   │   └── theme.min.js
│   └── silver
│       ├── index.js
│       ├── theme.js
│       └── theme.min.js
├── tinymce.js
└── tinymce.min.js

複製代碼

CDN

因此，若是要使用CDN的方式使用tinymce的話，直接安裝這個目錄格式上傳便可。app

npm

也可使用npm進行引入，可是每一個插件、主題、皮膚都要單獨引入，比較麻煩，不建議使用。

// Import TinyMCE
import tinymce from 'tinymce/tinymce';

// A theme is also required
import 'tinymce/themes/silver';

// Any plugins you want to use has to be imported
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';

// Initialize the app
tinymce.init({
  selector: '#tiny',
  plugins: ['paste', 'link']
});
複製代碼

快速開始

<template>
	<div class="default-tinymce">
		<textarea id="editor"></textarea>
	</div>
</template>
<script> import Tinymce from 'tinymce' export default { name: 'DefaultTinymce', mounted () { Tinymce.init({ selector: '#editor' }) } } </script>
複製代碼

  • 此示例只配置了惟一的必填配置selector，即textarta元素的標識，此參數值支持相似於CSS選擇器的參數格式。

  • 此示例除了使用了入口文件(tinymce.js)，也會引入默認的主題和皮膚文件。

  • 初始化成功後，textarea的值會與一個iframe綁定，在富文本編輯區域的操做，其實都是在iframe中的操做，而內容則會自動同步到textarea裏。

三種模式

tinymce 有三種模式可選：經典模式(classic，默認)、行內模式(inline)、清爽模式(Distraction-free)。

經典模式是最多見的，也就是工具欄搭配輸入區域，經過工具欄的按鈕插入、修改、格式化內容，咱們也選用這種模式做爲業務的主要模式。

後兩種模式也各有特色，可是與咱們實際的應用場景不太匹配，故再次很少作介紹。有興趣能夠自行了解。

多個編輯器

若是一個頁面中須要多個編輯器，有兩種方法：

一個是結合className選擇器，使用一次 tinymce 的 init 方法，生成多個實例，多個實例會共用一套配置；

示例代碼：

<template>
	<div class="default-tinymce">
        <h2>編輯器1</h2>
		<textarea class="editor"></textarea>
        <h2>編輯器2</h2>
		<textarea class="editor"></textarea>
	</div>
</template>
<script> import Tinymce from 'tinymce' export default { mounted () { Tinymce.init({ selector: '.editor' }) } } </script>

複製代碼

另外一種是，須要幾個編輯器，便使用tinymce 的 init 方法生成幾種實例，生成的實例彼此無關

示例代碼：

<template>
	<div class="default-tinymce">
        <h2>編輯器1</h2>
		<textarea class="editor1"></textarea>
        <h2>編輯器2</h2>
		<textarea class="editor2"></textarea>
	</div>
</template>
<script> import Tinymce from 'tinymce' export default { mounted () { Tinymce.init({ selector: '.editor1' }) Tinymce.init({ selector: '.editor2' }) } } </script>

複製代碼

編輯器配置

配置語言

能夠將編輯器的語言配置爲中文

tinymce.init({
    selector: '#myTextarea',
    language: 'zh_CN'
})

複製代碼
  • 能夠設置language_url，覆蓋默認地址。
tinymce.init({
    selector: '#myTextarea',
    language_url: 'https://fe.120yibao.com/common/tinymce/5.0.13/langs/zh_CN_01.js'
})
複製代碼
  • 也能夠在項目中配置語言文件：
import Language from './language'
Tinymce.addI18n('zh_CN_01', Language)

tinymce.init({
    selector: '#myTextarea',
    language: 'zh_CN_01'
})
複製代碼

附：官方多語言文件下載地址

基礎配置

如下配置大體涵蓋了tinymce的基礎配置，具體我會分章節在下面說明

tinymce.init({
    selector: '#myTextarea',
    // 編輯器的皮膚，有 oxide oxide-dark
    skin: 'dark',
    // 編輯器寬高
    width: 600,
    height: 300,
    // 用到的插件
    plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'save table contextmenu directionality emoticons template paste textcolor'
    ],
    // 編輯區域內容樣式
    content_css: 'css/content.css',
    // 工具欄的配置項
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
  });
複製代碼

使用插件

除了默認的配置，若是想拓展編輯器的功能，tinymce提供的方式就是插件。

官方的插件很豐富，文檔也很詳細，大多數狀況下，我只須要官方提供的插件便可。

激活插件也很簡單，只須要作了相應配置便可。

好比，咱們想要拓展一個查看編輯器內容HTML源碼的功能，只須要以下配置：

tinymce.init({
  selector: '#editor',
  plugins: 'code'
})

複製代碼

在menubar的位置，多了一個Tool的分組，分組裏有一個source code的項，點擊便可查看源碼

若是咱們不習慣使用menubar，而是習慣使用toolbar,咱們只須要以下配置：

tinymce.init({
  selector: '#editor',
  toolbar: 'code',
  plugins: 'code'
})

複製代碼

toolbar位置上多了一個查看源碼的圖標，點擊是相同的功能

有時候，這些基礎的功能可能知足不了咱們的需求，咱們可能對這些插件進行配置。

tinymce.init({
  selector: '#editor',
   toolbar: "numlist bullist",
  plugins: 'lists'
})

複製代碼

示例中，咱們配置了list組件，它支持無序(ul)列表和有序列表的功能，可是列表樣式是固定的，咱們能夠引入新的插件advlist，並配置

tinymce.init({
  selector: '#editor',
  toolbar: 'bullist numlist',
  plugins: 'lists advlist'
})
複製代碼

此時，咱們發現咱們能夠選擇樣式了，有多種樣式供咱們選擇，若是咱們想固定某種樣式，咱們能夠這樣配置：

tinymce.init({
  selector: '#editor',
  toolbar: 'bullist numlist',
  plugins: 'lists advlist',
  advlist_number_styles: 'lower-alpha'
})
複製代碼

咱們發現可選項只有一個了

每一個插件有哪些配置項、配置參數和配置值，官方文檔中都有詳細的描述

自定義編輯器UI

theme 和 skin 咱們直接使用默認的便可，無需折騰。

從上面的示例中，咱們也知道基本上全部東西咱們均可以去自定義的，好比隱藏不使用的menubar、調整按鈕在toolbar中的位置等。

tinymce.init({
  selector: '#editor',
  // 隱藏menubar
  menubar: false,
  // 隱藏 statusbar
  statusbar: false,
  // 隱藏品牌標識
  branding: false,
  // 設置最大寬高
  max_height: 500,
  max_width: 500,
  // 設置最小寬高
  min_height: 100,
  min_width: 400
})

複製代碼

這些配置不過重要，通常一次配置以後就不會有改動。

插件配置

這裏會寫一下編輯器用到的插件的介紹、配置、和使用，太簡單的插件和沒用到的插件不在此說明。

Advanced Code Editor

此插件爲付費插件

此插件可美化代碼預覽時候的視圖，而且還有收起/展開標籤的功能。配置此插件後，須要移除code插件。

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "advcode",
  toolbar: "code"
});
複製代碼

AutoLink

此插件可在輸入形如「www.qq.com」的連接時，自動將文本轉化爲超連接，空格和換行鍵均可以觸發

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

nonbreaking

鍵盤的Tab鍵，默認是切換到下一個元素的focus。此能夠改變這個默認行爲。

須要注意的是，table插件中也有改變改默認行爲的代碼，因此要在table插件以後引用該插件。

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "nonbreaking",
  // 此配置會改變默認行爲，會在光標以後添加三個空格。
  nonbreaking_force_tab: true
});
複製代碼

autosave

此插件會自動保存編輯器的內容到localStorage。會同時存儲兩個字段，一個是內容，一個是存儲時間。

能夠配置自動保存的時間間隔，通常以秒爲單位；也能夠配置內容存儲的過時時間，通常以分鐘爲單位，超過這個時間段，數據會從localStorage中被清除。

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "autosave",
  // 自動保存的時間間隔
  autosave_interval: '30s',
  // 自動保存的數據存儲的最大時間
  autosave_retention: '30m'
});
複製代碼

powerpaste

此插件爲付費插件

此插件能夠保留剪切板內容的樣式、文檔結構。

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "powerpaste",
  /** * 粘貼前是否保留文本樣式 * @param 'clean' 不保留 * @parma 'merge' 保留 * @parma 'prompt' 詢問用戶 */
  powerpaste_word_import: 'prompt',
  powerpaste_html_import: 'prompt',
  /** * 在粘貼到富文本以前,能夠修改粘貼的內容。內容已經DOM格式化 * @param plugin * @param args * @returns {Promise<void>} */
  paste_postprocess (plugin, args) {}
});
複製代碼

下一篇：Tinymce - 宇宙第一富文本編輯器？[2]

參考

  1. tinymce官方文檔
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程