最近在撰寫公司網頁時，需要讓使用者輸入一些有HTML效果的資料，於是找到了這款插件。此編輯器擁有所見及所得的效果，當使用者一編輯內容，馬上就可以看見編輯的成果。此編輯器為Open Source開源軟體，開發者也可自行以此開發功能，且官方提供了許多外掛插件，有非常高的擴充性。
使用後覺得不錯，所以想將此記錄下來，以便下次應用，以下是使用此插件的紀錄。
使用環境：
Apache： 2.4.23
TinyMCE版本：4.4.3，
4.4.3版本可點此下載
效果圖：
使用方式：
1.首先須在HTML頁面引入TinyMCE的JS檔案，在這裡使用官網提供的CDN
<script src='//cloud.tinymce.com/stable/tinymce.min.js'></script>
也可以下載至本機端引用，下載網址：
點此
2.加入HTML物件 <textarea>
<textarea id="tinymce"></textarea>
3.初始化插件
<script type="text/javascript">
tinymce.init({
selector:'#tinymce',
theme: 'modern',
language_url : '語言檔路徑/zh_TW.js',
height: 300,
target_list : false,
content_css : "自訂CSS檔案路徑/tinymceStyle.css",
plugins: [
'link media charmap hr',
'visualchars visualblocks preview fullscreen',
'spellchecker code',
'textcolor fullscreen',
'wordcount'
],
menu: {
file: {title: 'File', items: 'newdocument'},
edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace'},
insert: {title: 'Insert', items: 'link media | charmap hr'},
view: {title: 'View', items: 'visualchars visualblocks visualaid | preview fullscreen'},
format: {title: 'Format', items: 'bold italic strikethrough superscript subscript | removeformat'},
tools: {title: 'Tools', items: 'code'}
},
toolbar: 'link media preview | example insertfile undo redo | styleselect outdent indent | bullist numlist | fullscreen | forecolor',
textcolor_map: [
"000000", "Black",
"999999", "Mediun Gray",
"FF9900", "Amber"
],
style_formats: [{
title: 'Inline', items: [
{title: 'Bold', icon: 'bold', format: 'bold'},
{title: 'Italic', icon: 'italic', format: 'italic'},
{title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
{title: 'Superscript', icon: 'superscript', format: 'superscript'},
{title: 'Subscript', icon: 'subscript', format: 'subscript'}
]
}, {
title: 'Blocks', items: [
{title: 'Paragraph', format: 'p'},
{title: 'Blockquote', format: 'blockquote'}
]
}]
});
</script>
參數說明
JSON欄位名稱
|
型態
|
數值
|
描述
|
selector
|
String
|
#tinymce
|
欲初始化的HTML ID
|
theme
|
String
|
modern
|
編輯器主題風格
|
language_url
|
String
|
語言檔路徑/zh_TW.js
|
語言的檔案路徑，預設英文，可改成中文
|
height
|
Number
|
300
|
高度
|
target_list
|
Boolean
|
false
|
關閉"選擇超連結開啟方式"功能
|
content_css
|
String
|
自訂CSS檔案路徑/tinymceStyle.css
|
自訂義編輯器CSS，此為CSS檔案路徑。
|
plugins
|
Array
|
|
引入插件模組，有點類似Java的import，需先在此宣告後，才能在下方menu、toolbar使用
|
menu
|
Object
|
|
設定菜單。EX：元件圖示中的檔案、編輯、插入....等，需先在plugins中宣告，否則無效
|
toolbar
|
String
|
|
設定工具列。EX：菜單下的工具圖示，有點類似快捷鍵，需先在plugins中宣告，否則無效
|
textcolor_map
|
Array
|
|
若有開啟"設定文字顏色"，此選項可設定讓使用者能使用那些顏色
|
style_formats
|
Object
|
|
若開啟"設定文字格式"，此選項可設定讓使用者能使用那些格式
|
常用的API與功能
<script type="text/javascript">
//設定內容
tinymce.get("news_content").setContent(newsJSON.news_content);
//取得內容
tinymce.get("news_content").getContent();
</script>
遇到問題
1.TinyMCE設定參數中的width與height似乎不支援以百分比%的格式，若要使用%需自行透過選取器並撰寫CSS才可設定，EX：#news_content{ width:100%; }
使用心得
功能豐富，提供了許多API與Callback可以過濾、處理、輸出內容。也有很多預設的菜單、工具列...等模組可供使用，且幾乎每一個模組(菜單、工具列...等)的細節都能修改、設定， 但設定較為複雜，需要慢慢調校。
更多設定可參考官網文件，付在下面的參考文件中。
參考文件
