Tinymce的配置、漢化、註釋及自定義樣式~!
阿新 • • 發佈:2019-02-20
版權宣告:原創作品,允許轉載,轉載時請務必以超連結形式標明文章 原始出處 、作者資訊和本宣告。否則將追究法律責任。http://opper.blog.51cto.com/628423/124385
參考:http://www.inpeck.com/TinyMceManual/ tiny中文手冊
Tinymce官方網站:[url]http://tinymce.moxiecode.com/[/url]
Tinymce3.2漢化版:見附件,此漢化包並不完全
Tinymce3.2官方簡體中文漢化包:見附件
TinyMCE 是一個基於瀏覽器(例如MSIE或Mozilla)的強大的所見即所得的編輯器,它使使用者可以方便的編輯HTML內容。它非常靈活並且是為系統整合而設計的,比如在Intranets、CMS、LMS等系統中應用。
TinyMCE 由 Moxiecode Systems AB 開發,根據"LGPL"版權許可證發行, 請檢視版權協議以獲知更多細節。
特點
易於整合,只需要簡短几行程式碼。
支援主題和模板。
易於使用自定義程式碼擴充套件(外掛和回撥)
可定製HTML輸出。遮蔽元素和強制屬性。
國際語言支援(通過語言包)。
支援多種瀏覽器, 目前有 Mozilla (PC/Mac/Linux), MSIE (PC) 和 FireFox (PC/Mac/Linux)。
在呼叫頁面中加入
<. language="." type="text/." src="tiny_mce/tiny_mce.js">
<. language="." type="text/.">
tinyMCE.init({
mode : "textareas",
//定義顯示類別
theme : "advanced",
//定義載入外掛
plugins : "safari,spellchecker,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,
imagemanager,filemanager",
//定義工具欄的位置
theme_advanced_toolbar_location : "top",
//定義工具欄工具的對其方式
theme_advanced_toolbar_align : "left",
//定義輸入框下方是否顯示狀態列,預設不顯示
theme_advanced_statusbar_location : "bottom",
//定義是否可以改變輸入視窗大小
theme_advanced_resizing : true
});
可根據實際需要減少或者增加樣式~!
tiny_mce檔案解釋
langs資料夾是所有標籤語言樣式
plugins 資料夾裡的子資料夾包含所有標籤的詳細定義,每個標籤資料夾裡包含
的langs資料夾可定義單個標籤的內部詳細語言.可以對其htm檔案進行更改配合
themes資料夾裡的分類
對editor_template.js進行的標註
//字型大小
font_size:['font_size','fontsizeselect'],
//加粗
bold:['bold_desc','Bold'],
//斜體
italic:['italic_desc','Italic'],
//下劃線
underline:['underline_desc','Underline'],
//貫穿線
strikethrough:['striketrough_desc','Strikethrough'],
//左對齊
justifyleft:['justifyleft_desc','JustifyLeft'],
//居中對齊
justifycenter:['justifycenter_desc','JustifyCenter'],
//右對齊
justifyright:['justifyright_desc','JustifyRight'],
//兩邊對齊
justifyfull:['justifyfull_desc','JustifyFull'],
//專案符號列表
bullist:['bullist_desc','InsertUnorderedList'],
//編號列表
numlist:['numlist_desc','InsertOrderedList'],
//減少縮排
outdent:['outdent_desc','Outdent'],
//增加縮排
indent:['indent_desc','Indent'],
//剪下
cut:['cut_desc','Cut'],
//複製
copy:['copy_desc','Copy'],
//貼上
paste:['paste_desc','Paste'],
//撤銷
undo:['undo_desc','Undo'],
//重做
redo:['redo_desc','Redo'],
//增加連結
link:['link_desc','mceLink'],
//刪除連結
unlink:['unlink_desc','unlink'],
//插入圖片
image:['image_desc','mceImage'],
//清理程式碼
cleanup:['cleanup_desc','mceCleanup'],
//幫助
help:['help_desc','mceHelp'],
//程式碼檢視
code:['code_desc','mceCodeEditor'],
//插入水平線
hr:['hr_desc','InsertHorizontalRule'],
//清除樣式
removeformat:['removeformat_desc','RemoveFormat'],
//顯示/隱藏物件
visualaid:['visualaid_desc','mceToggleVisualAid'],
//下標
sub:['sub_desc','sub.'],
//上標
sup:['sup_desc','super.'],
//插入特殊符號
charmap:['charmap_desc','mceCharMap'],
//字型顏色
forecolor:['forecolor_desc','ForeColor'],
//前景色
forecolorpicker:['forecolor_desc','mceForeColor'],
//背景色
backcolor:['backcolor_desc','HiliteColor'],
//背景色食色板
backcolorpicker:['backcolor_desc','mceBackColor'],
//插入編輯描點
anchor:['anchor_desc','mceInsertAnchor'],
//新建空白文件
newdocument:['newdocument_desc','mceNewDocument'],
//引用
blockquote:['blockquote_desc','mceBlockQuote'],
//查詢替換
reply:['replace_desc','reply'],
//查詢
search:['search_desc','searchreplace']},
stateControls:['search','blockquote','newdocument','anchor','backcolor',
'forecolorpicker','forecolor','font_size','bold','italic','underline',
'strikethrough','bullist','numlist','justifyleft','justifycenter','justifyright',
'justifyfull','sub','sup','blockquote'],
init:function(ed,url){var t=this,s,v,o;t.editor=ed;t.url=url;t.onResolveName=new tinymce.util.Dispatcher(this);
t.settings=s=extend({
theme_advanced_path:true,theme_advanced_toolbar_location:'bottom',
theme_advanced_buttons1:"search,blockquote,newdocument,anchor,
backcolor,forecolorpicker,forecolor,fontsizeselect,bold,italic,underline,
strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,
styleselect,formatselect",
theme_advanced_buttons2:"bullist,numlist,|,outdent,indent,|,undo,
redo,|,link,unlink,anchor,image,cleanup,help,code",
theme_advanced_buttons3:"hr,removeformat,visualaid,|,sub,sup,|,
charmap",theme_advanced_blockformats:"p,address,pre,h1,h2,h3,h4,
h5,h6",
對advanced中langs裡的en.js進行的標註
tinyMCE.addI18n('en.advanced',{
style_select:"/u6837/u5F0F",
//字型大小
font_size:"/u5B57/u53F7",
//加粗
bold_desc:"/u7C97/u4F53 (Ctrl+B)",
//斜體
italic_desc:"/u659C/u4F53 (Ctrl+I)",
//下劃線
underline_desc:"/u4E0B/u5212/u7EBF (Ctrl+U)",
//貫穿線
striketrough_desc:"/u5220/u9664/u7EBF",
//左對齊
justifyleft_desc:"/u9760/u5DE6/u5BF9/u9F50",
//居中對齊
justifycenter_desc:"/u5C45/u4E2D",
//右對齊
justifyright_desc:"/u9760/u53F3/u5BF9/u9F50",
//兩邊對齊
justifyfull_desc:"/u5DE6/u53F3/u5BF9/u9F50",
//專案符號列表
bullist_desc:"/u9879/u76EE/u7B26/u53F7/u5217/u8868",
//編號列表
numlist_desc:"/u7F16/u53F7/u5217/u8868",
//減少縮排
outdent_desc:"/u51CF/u5C11/u7F29/u8FDB",
//增加縮排
indent_desc:"/u589E/u52A0/u7F29/u8FDB",
//剪下
cut_desc:"/u526A/u5207 (Ctrl+X)",
//複製
copy_desc:"/u590D/u5236 (Ctrl+C)",
//貼上
paste_desc:"/u7C98/u8D34 (Ctrl+V)",
//撤銷
undo_desc:"/u64A4/u9500 (Ctrl+Z)",
//重做
redo_desc:"/u91CD/u505A (Ctrl+Y)",
//增加連結
link_desc:"/u63D2/u5165//u7F16/u8F91/u94FE/u63A5",
//刪除連結
unlink_desc:"/u5220/u9664/u94FE/u63A5",
//插入圖片
image_desc:"/u63D2/u5165//u7F16/u8F91/u56FE/u7247",
//清理程式碼
cleanup_desc:"/u6E05/u7406/u4EE3/u7801",
//幫助
help_desc:"/u5E2E/u52A9",
//程式碼檢視
code:"/u4EE3/u7801",
//插入水平線
hr_desc:"/u63D2/u5165/u6C34/u5E73/u7EBF",
//清除樣式
removeformat_desc:"/u6E05/u9664/u6837/u5F0F",
//顯示/隱藏物件
visualaid_desc:"/u663E/u793A//u9690/u85CF/u5BF9/u8C61",
//下標
sub_desc:"/u4E0B/u6807",
//上標
sup_desc:"/u4E0A/u6807",
//插入特殊符號
charmap_desc:"/u63D2/u5165/u7279/u6B8A/u7B26/u53F7",
//字型顏色
forecolor_desc:"/u524D/u666F/u8272",
//背景色
backcolor_desc:"/u80CC/u666F/u8272",
//插入編輯描點
anchor_desc:"/u63D2/u5165//u7F16/u8F91/u951A/u70B9",
//新建空白文件
newdocument_desc:"/u65B0/u5EFA",
//引用
blockquote_desc:"/u5F15/u7528",
//查詢
search_desc:"/u67E5/u627E",
//查詢替換
replace_desc:"/u67E5/u627E//u66FF/u6362",
fontdefault:"/u5B57/u4F53",
block:"/u683C/u5F0F",
paragraph:"/u6BB5/u843D",
div:"/u5C42",
address:"/u5730/u5740",
pre:"/u9884/u5B9A/u4E49/u683C/u5F0F",
h1:"/u6807/u98981",
h2:"/u6807/u98982",
h3:"/u6807/u98983",
h4:"/u6807/u98984",
h5:"/u6807/u98985",
h6:"/u6807/u98986",
blockquote:"/u5F15/u7528",
samp:"/u4EE3/u7801/u8303/u4F8B",
dt:"/u540D/u8BCD/u5B9A/u4E49",
dd:"/u540D/u8BCD/u89E3/u91CA",
code_desc:"/u4EE3/u7801/u89C6/u56FE",
custom1_desc:"/u5728/u6B64/u8F93/u5165/u63CF/u8FF0",
image_props_desc:"/u56FE/u7247/u5C5E/u6027",
clipboard_msg:"/u590D/u5236/u3001/u526A/u5207/u548C/u7C98/u8D34/u529F/u80FD/u5728 Mozilla /u548C Firefox /u4E2D/u65E0/u6CD5/u4F7F/u7528/u3002/n/u4F60/u9700/u8981/u4E86/u89E3/u66F4/u591A/u4FE1/u606F/u5417/uFF1F",
path:"/u8DEF/u5F84",
newdocument:"/u786E/u5B9A/u8981/u5220/u9664/u6240/u6709/u5185/u5BB9/u5E76/u65B0/u5EFA/u4E00/u4E2A/u7A7A/u767D/u6587/u6863/u4E48/uFF1F",
toolbar_focus:"/u5B9A/u4F4D/u5230/u5DE5/u5177/u680F - Alt+Q/uFF0C/u5B9A/u4F4D/u5230/u7F16/u8F91/u533A - Alt-Z/uFF0C/u5B9A/u4F4D/u5230/u5143/u7D20/u8DEF/u5F84 - Alt-X/u3002",
more_colors:"/u66F4/u591A/u989C/u8272..."
//自定義部分
});
當然還是要根據自己的需要配置好最適合自己的tinymce,網上下的漢化版並不能適用於你,所以建議自己動手配置,不懂的再問我~!
本文出自 “開拓世界領先的WEB技術” 部落格,請務必保留此出處http://opper.blog.51cto.com/628423/124385
附件下載:
Tinymce3.2漢化版
Tinymce3.2官方簡體中文漢化包