TinyMCE 4 增強 添加樣式、按鈕、字型、下拉菜單和彈出式視窗

我最喜歡 WordPress 3.9 的更新是使用了 TinyMCE 4.0 編輯器。新的 TinyMCE 看起來看起來更整潔（真正比對WP儀表闆），它有一些非常不錯的附加功能。我的很多老主題和插件必須更新為新 TinyMCE 的工作，是以我花了一些時間研究 API 并找出一些很酷的東西。下面我給你介紹下如何可以拓展 TinyMCE 功能的例子。我不會指導您完成所有步驟，或者是什麼的代碼意味着（這是為開發者），但會為您提供您的主題或插件可用的代碼，你可以複制完全相同的代碼，粘貼，然後相應地調整。

預設情況下，自定義字型和字型大小都不會添加到 TinyMCE 編輯器。下面的函數可以将這兩個下拉菜單添加到編輯器第二行按鈕的最左邊。如果你想添加到一個不同的行，你隻需修改“mce_buttons_2”（例如：使用“mce_buttons_3'為第3行）。

預設的字型大小設定為 pt 值，這并不總是理想的。我更喜歡使用像素值（12像素，13px，14px，16px 等等），并提供更靈活的選擇。下面的函數将改變在下拉選擇器的預設字型大小的選項。

在預設情況下，在字型選擇清單中，預設字型選項都是“網頁安全”字型，但如果你想添加更多的字型，或許一些谷歌的字型？非常簡單，看一下下面的例子。

請注意我是如何在上面的代碼中加入“Lato”字型的？就這麼簡單！在我的所有 WordPress主題，我通過周遊所有在網站上使用的自定義字型定義在主題面闆上，并把它們添加到選擇框，這樣也可以在編輯文章/頁面的時候使用它們（甜蜜）。但是它僅僅是添加字型到清單中，卻不會神奇地加載腳本，是以當你在編輯器中的更改字型，你不可以真正看到适用于它的自定義字型……這就是下面的代碼所要做的！

還記得在 WP3.8 的“樣式”下拉清單嗎？這是很酷的！你可以用它來添加一些很酷的類，以便在文章編輯器中使用（我用它在 WPExplorer 實作按鈕，彩色跨度，盒子 等等）。在 WP3.9，你仍然可以添加自己的格式，但是，它已更名為新的 TinyMCE4.0“格式”，是以它的工作原理有一點點不同。下面的例子，就是如何在格式下拉清單中添加一些新的項目。

這在 WP3.9 以前的版本中，也是這樣做的。但我還是要分享一下，以防你不知道該怎麼做。

增加新的項目是超級容易。請注意我下面的代碼是如何添加“$settings[‘style_formats_merge’] = true;“ 的，這樣可以確定你添加格式下拉菜單到編輯器中，不會影響其他人 - 不要去覆寫整個事情（也許其他的插件要使用它）。

添加一個新按鈕到 TinyMCE 編輯器對于簡碼來說是特别有用的，因為作為一個使用者，您不必記住任何簡碼，你可以簡單地點選一個按鈕，并将其插入。我不是說要為你的所有簡碼都添加按鈕到TinyMCE（我讨厭開發者這樣做，它的這種不好的做法，看起來很可怕），但如果添加1個或幾個，我會同意的）如果你要添加一堆，那麼你應該建立一個子菜單，在後面的章節将介紹。

此代碼将聲明新的MCE插件，請務必更改JavaScript檔案“MCE-button.js”的位置，以比對您的檔案的位置（我會給你的代碼，以及在下一小節），以及将“my”這個字首修改為其他更唯一的字元。

這個js代碼放在上面的“symple_shortcodes_add_tinymce_plugin”函數中所注冊的js檔案。它可以在編輯器中添加一個新的文本按鈕，上面寫着“New Button”，點選時，它會插入文本“WP is awesome! ”。

上面我介紹了如何在編輯器中添加一個新的按鈕“New Button”，這有點不夠完美......下面将告訴你如何添加自己的自定義圖示。

使用此函數來加載一個新的樣式表到你的管理面闆使用 - 一些插件/主題可能已經添加了樣式表，是以如果你的主題/插件這樣做，跳過這一點，隻需添加自定義CSS和調整的JS（如下圖所示）。

現在，簡單的調整你以前添加的js，删除文本參數，取而代之，添加一個css類名。

前面我提到，增加了大量的新圖示到 TinyMCE 是一個壞主意，是以來看看下面的代碼，看看如何可以編輯JavaScript來顯示一個子菜單的自定義按鈕。

在上面的例子中，你可能會注意到，每一個按鈕隻需插入文本“WP is awesome!”這是很酷，但如果建立一個彈出視窗，使用者可以改變插入的文本，是不是更酷？馬上來實作吧！

本文轉自黃聰部落格園部落格，原文連結：http://www.cnblogs.com/huangcong/p/4787867.html，如需轉載請自行聯系原作者