TinyMCE 數字清單增加國字數字及繁體國字數字 及 中文化

TinyMCE

TinyMCE 官網介紹Default 預設數字清單樣式如下：
(官網介紹網址：https://www.tinymce.com/docs/plugins/advlist/)
advlist_number_styles

This option allows you to include specific ordered list item markers in the default numlist toolbar control.

Type: String

Default Value: "default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman"

Possible Values:

• lower-alpha: lowercase ASCII letters, e.g. a, b, c, ... z
• lower-greek: lowercase classical Greek (alpha, beta, gamma), e.g. α, β, γ ...
• lower-roman: lowercase roman numerals, e.g. i, ii, iii, iv, v ...
• upper-alpha: uppercase ASCII letters, e.g. A, B, C, ... Z
• upper-roman: uppercase roman numerals, e.g. I, II, III, IV, V ...

Example:

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "advlist",
  advlist_number_styles: "lower-alpha"  // only include lower alpha in list
});

直接在線上修改看看
先點到官網的範例，選用完整範例來修改
https://www.tinymce.com/docs/demo/full-featured/
可以看到預設已經有上述提到的樣式


接下來點到JS，並開啟Edit on CODEPEN


開啟CODPEN後

直接在JS的地方新增一行上面官網給的範例

tinymce.init({

  selector: 'textarea',

  height: 500,

  theme: 'modern',

  plugins: [

    'advlist autolink lists link image charmap print preview hr anchor pagebreak',

    'searchreplace wordcount visualblocks visualchars code fullscreen',

    'insertdatetime media nonbreaking save table contextmenu directionality',

    'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc'

  ],

  toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

  toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',

  image_advtab: true,

  templates: [

    { title: 'Test template 1', content: 'Test 1' },

    { title: 'Test template 2', content: 'Test 2' }

  ],

  content_css: [

    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',

    '//www.tinymce.com/css/codepen.min.css'

  ],

  advlist_number_styles: "lower-alpha" 

 });

增加後可以看到數字清單變成指定的樣式了

再試試看其他的，直接把想要新增的樣式加上
樣式參考網址：https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type?v=control
選擇的樣式：
trad-chinese-formal 

• Traditional Chinese formal numbering.
• E.g. 壹萬壹仟壹佰壹拾壹

trad-chinese-informal 

• Traditional Chinese informal numbering.
• E.g. 一萬一千一百一十一

修改範例：advlist_number_styles: "lower-alpha,trad-chinese-informal,trad-chinese-formal"

加上後可以看到數字清單的下拉選單已經將我們自訂的樣式顯示出來了!
不過在這裡提醒，要實際的測試下拉選單的結果，因為實際測試後，並非每個都百分百完全成功，等一下會提到
失敗範例：樣式選擇korean-hanja-formal時，當項次編到第4項時，突然長得不太一樣了，另外還有試到一個樣式，選擇後沒有反應的，因此自訂義完後記得實際測試一下結果



剛剛上面已經有簡單的概念了
如果網站裡面已經有tinymce資夾了，可以直接到這個目錄底下的檔案找找看
找到後直接編輯想要的自訂數字清單，應該就可以了，記得編輯完實際測試看看

檔案資料夾位置 "tinymce\plugins\advlist\plugin.min.js"
搜尋關鍵字"advlist_number_styles"，
預設：
 l = e("OL", t.getParam("advlist_number_styles", "default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman"))
修改自訂的清單類型：
l = e("OL", t.getParam("advlist_number_styles", "default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman,trad-chinese-informal,trad-chinese-formal"))

自訂數字清單中文化

如果已經有了中文化的檔案包之後，找到檔案後直接修改內容就可以了

目的：

Korean Hanja Informal > 大寫國字

Trad Chinese Informal > 國字數字

Trad Chinese Formal > 繁體國字數字

先使用線上中文字元轉UNICODE

大寫國字UNICODE -> \u5927\u5beb\u570b\u5b57

國字數字 UNICODE  -> \u570b\u5b57\u6578\u5b57

繁體國字數字 UNICODE  -> \u7e41\u9ad4\u570b\u5b57\u6578\u5b57

找到修改檔案位置 \tinymce\langs\zh_TW.js

在內容直接加上

結果：

"Korean Hanja Informal": "\u5927\u5beb\u570b\u5b57"   >  失敗

"Trad Chinese Informal": "\u570b\u5b57\u6578\u5b57",  >  成功

"Trad Chinese Formal": "\u7e41\u9ad4\u570b\u5b57\u6578\u5b57"  >  成功