Ueditor增加文字豎排顯示和從右向左輸入（支援蒙古文和維吾爾文）
阿新 • • 發佈：2018-12-18
平時我們在ueditor中都是輸入的中文，排版都是從左向右輸入。但是當輸入一些少數民民族言時，ueditor卻不能正常顯示。
例如蒙古文字，傳統蒙文是豎排書寫。如下圖：傳統蒙古文排文方式，《蒙古人的文字與書籍》
在word2010中，是支援豎排的，從左向右、從右向左都能完美支援：
但是在網頁中怎樣顯示呢？其實css早就支援文字的書寫方向了。IE 在文字排版方面一直是先驅，早在 IE 5.5 就實現了私有屬性「writing-mode」，後來被 W3C 在 CSS2 中採納作為規範。在 Level 3 草案中「writing-mode」是 「direction 」 和 「block-flow」 屬性的簡寫[1]，2010年起「block-flow」 屬性被刪除了，其功能融合進「writing-mode」。
但在最新的規範中「writing-mode」屬性縮減為三個值：
- horizontal-tb（預設值）：自上而下，從左到右的橫排書寫方式。（類似IE私有值lr-tb）
- vertical-rl：從右到左，自上而下的豎排書寫方式（典型的漢字豎排排版方式）。（類似IE私有值tb-rl）
- vertical-lr：從左到右，自上而下的豎排書寫方式（主要用於內蒙古的蒙古語和滿語。）。
- 由於自下而上的橫排書寫方式太少見，經過討論去掉了「horizontal-bt」關鍵字。
既然css支援豎排，那麼我們就可以在ueditor中新增豎排的支援。
1. 先在ueditor.config.js中新增工具欄按鈕，分別表示豎排從右向左、豎排從左向右、恢復預設的橫向排版。
2. 在zh-cn.js中增加按鈕的提示
3. 在ueditor.css中新增按鈕的圖示
4. 在ueditor.all.js中新增按鈕點選事件的處理和命令狀態的查詢
5. 在ueditor.all.js中新增按鈕的事件監聽
下面是ueditor中最終的實現效果：
豎排從左向右：
豎排從左向左：
gif操作過程：
最後，有些文字的輸入方向是從右向左的，輸入的游標始終在一行的最左邊，這個功能ueditor已經有了。在ueditor.config.js中開啟就可以了：
最後的效果：
