TinyMCE自定義菜單項以及使用瀏覽器菜單

前言

這周跟TinyMCE「打交道」的時間最長，也見證了TinyMCE的神奇之處，沒想到一個編輯器居然有這麼多的玩法，固然了，也有一些我以爲不是很到位的地方，可是無傷大雅，畢竟官方文檔有着詳細的解決方法，下面就來看一看它的神奇之處吧。

TinyMCE

TinyMCE是 在線富文本編輯器，在 LGPL下做爲 開源軟件發佈。它具備將HTML textarea字段或其餘HTML元素轉換爲編輯器實例的功能。TinyMCE的設計可以輕鬆地與集成 的JavaScript庫，如 陣營（JavaScript庫） "React（JavaScript庫）")， Vue.js和 AngularJS以及 內容管理系統等 的Joomla！和 WordPress。
摘自： 維基百科

自定義菜單項

TinyMCE給的菜單項可謂是花樣繁多，但這麼多也不免會有不知足咱們需求的菜單，TinyMCE給的菜單項有許多，固然了，前提是要有對應的Plugin，因此，Plugin是重點，因而，TinyMCE提供的一種自定義菜單的方法就是經過註冊Plugin實現的。

tinymce.PluginManager.add('defendImage', function addPlugin(editor) {
editor.ui.registry.addButton('defendImage', {
    text: 'defendImage',
    onAction: (button: { isDisabled: () => boolean, setDisabled: (p: boolean) => void }) => {
    console.log('Click DefendImage')
    }
  });
 });

這樣就註冊好了Plugin和button，「text」屬性表示button的文字內容，onAction()表示點擊button時觸發的方法。
而後在配置裏添加Plugin和toolbar：

plugins: '...  defendImage',
 toolbar: '...  defendImage'

在配置好以後運行項目：

點擊後打開控制檯：

固然了，若是以爲文字不美觀，能夠使用icon圖標：
咱們使用user圖標作演示：

tinymce.PluginManager.add('defendImage', function addPlugin(editor) {
editor.ui.registry.addButton('defendImage', {
    icon: 'user',
    onAction: (button: { isDisabled: () => boolean, setDisabled: (p: boolean) => void }) => {
    console.log('Click DefendImage')
    }
  });
 });

TinyMCE支持的icon圖標：Editor icon identifiers

使用瀏覽器菜單

在咱們使用一些編輯器時，咱們能夠使用鼠標右鍵進行復制、剪切、粘貼等操做：

可是TinyMCE卻不是這樣的，TinyMCE默認的是：'link linkchecker image imagetools table spellchecker configurepermanentpen'
當咱們點擊右鍵時，彈出來的是添加Link的菜單，並非瀏覽器菜單

看一下官方文檔，菜單支持的屬性還有好多，包括複製粘貼等

而後咱們引用一下，看看能不能達到咱們想要的效果

tinymce.init({
  selector: 'textarea#context-menu',
  height: 500,
  plugins: [
    'core'
  ],
  contextmenu: "cut",
  content_css: '//www.tiny.cloud/css/codepen.min.css'
});

與菜單欄大同小異，一樣要引入Plugin和menu，而後就能夠使用了：

興奮！！！！終於找到解決辦法了，可是，高興的太早了，copy和cut能夠正常使用，paste就沒這麼幸運了：

您的瀏覽器不支持直接訪問剪貼板。請改用⌘+X/C/V鍵盤快捷鍵。

搜了一下該問題，沒有解決辦法：

As the message from the editor states this is simply a limitation of what you can / cannot do directly via JavaScript in certain browsers. Whether or not you use jQuery you are still using JavaScript so the underlying limitation will exist.

Imagine what you could do if your arbitrary JavaScript could access the clipboard whenever it liked? "Bad people" don't play by the rules so what if (upon loading a web page) they had JavaScript that grabbed everything from the clipboard and sent it to their servers? Over time the browser manufacturers realized that direct access to the clipboard was "bad" ... by having the user type CRTL+C and CRTL+V you are effectively telling the browser you want it to access the clipboard.

大致意思就是說這是瀏覽器的安全機制，防止圖謀不軌的人經過剪貼板非法獲取一些信息，比較有意思的是：

It works perfectly in IE. Is there a way to make the Paste button useful in Chrome and FF?
原文地址： TinyMCE paste button only works in Internet Explorer

沒辦法，只能找別的辦法，而後就看官方文檔：Context menu，英文的文檔屬實要命，後來才知道有中文版的，而後就看到了這：

To disable the editor’s context menu, set this option to `false`.
要想禁用編輯器的菜單，將此項設爲false

而後說動手就動手：

tinymce.init({
  selector: 'textarea#context-menu',
  height: 500,
  plugins: [
    'core'
  ],
  contextmenu: false,
  content_css: '//www.tiny.cloud/css/codepen.min.css'
});

問題解決。我看完以後在想，TinyMCE爲啥不將此項默認設置爲false，有須要的人設置爲其餘的，這樣不須要的不就不用改了嗎，畢竟不須要的佔多數啊，好在官方文檔給出瞭解決方法，否則真的難搞了就。

總結

看文檔真的是很重要的一項技能，學會看文檔是一門技術，去哪找，怎麼找，要找啥，無一不是重點，若是掌握了看文檔的技巧，解決問題要方便不少。

本文做者：河北工業大學夢雲智開發團隊 張文達