安裝TinyMCE所見即所得外掛What You See Is What You Get(WYSIWYG)

之前就想在ERP修改讓使用者可以更方便的編輯文字,不過之前遇到一些狀況,以及主力改在報價單就沒有去研究,今天又拿來小試一下,發現問題解決了,所以就趕緊記下來.

我的環境是Linux,所以以下步驟都針對Linux,而我也是最簡單的範例而已.

服用方法:

1.當然是去Moxiecode System官網 下載TinyMCE.

2.下載到/var/www/html並且解壓縮.

3.解完其實就OK了,先來小測試一下,在瀏覽器輸入http://您ServerIP/tinymce/examples,應該就可以看到如下面的圖一.

4.接下來就中文化啦!!不過在這邊遇到一個很機車的問題,就是我在官網上面看不到TW字樣,因為Chinese是簡體的….,又用關鍵字查了zh_tw…等字樣,不過都沒有,後來爬了文,嘗試自己將簡體改成繁體,不過由於此套件的編碼是ISO 639-1的編碼,不知道是不是跟i18n有關,所以得先把簡體轉成繁體,然後在透過官網上面的程式轉換成套件包,不過沒次都失敗,我也搞不清楚,連簡體本身也失敗,就在要放棄時突然看到Twi我想說點點看…沒想到是正體中文

5. 所以記得下載Twi 這個檔案(把左邊的框框打勾然後按Download)

6.將語系檔下載並解壓,然後會產生langs plugins thems三個資料夾,請分別複製到/tinymce/tinymce/jscripts/tiny_mce/ 相對應的檔案.

7.可以檢視其中一個例如langs應該會多出tw.js的檔案,其他資料夾也有類似tw的字樣,然後在tinyMCE.init內將language改為tw.

8.如果您要在其它已經寫好的程式使用,請在head加入,此部分:


language : “tw”,
plugins : “safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount”,

// Theme options
theme_advanced_buttons1 : “save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect”,
theme_advanced_buttons2 : “cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor”,
theme_advanced_buttons3 : “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen”,
theme_advanced_buttons4 : “insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)
content_css : “css/content.css”,

// Drop lists for link/image/media/template dialogs
template_external_list_url : “lists/template_list.js”,
external_link_list_url : “lists/link_list.js”,
external_image_list_url : “lists/image_list.js”,
media_external_list_url : “lists/media_list.js”,

// Replace values for the template plugin
template_replace_values : {
username : “Some User”,
staffid : “991234”
}
});


9.其實上面就是TinyMCE的一些設定,您可以取捨哪些功能不要,移除既可.

圖示:

補充:

什麼是所見即所得

什麼是i18n

ISO 639-1

091209:

修改預設字型大小:

tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css

body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:20px; margin:8px;}

font-size的地方

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *