Ueditor增加文字竖排显示和从右向左输入(支持蒙古文和维吾尔文)

平时我们在ueditor中都是输入的中文,排版都是从左向右输入。但是当输入一些少数民民族言时,ueditor却不能正常显示。

例如蒙古文字,传统蒙文是竖排书写。如下图:传统蒙古文排文方式,《蒙古人的文字与书籍》

clip_image002

 

word2010中,是支持竖排的,从左向右、从右向左都能完美支持:

clip_image004

但是在网页中怎样显示呢?其实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中添加工具栏按钮,分别表示竖排从右向左、竖排从左向右、恢复默认的横向排版。

clip_image006

2.   zh-cn.js中增加按钮的提示

clip_image008

3.   ueditor.css中添加按钮的图标

clip_image010

4.   ueditor.all.js中添加按钮点击事件的处理和命令状态的查询

clip_image012

5.   ueditor.all.js中添加按钮的事件监听

clip_image014

下面是ueditor中最终的实现效果:

竖排从左向右:

clip_image016

竖排从左向左:

clip_image018

gif操作过程:

clip_image019

最后,有些文字的输入方向是从右向左的,输入的光标始终在一行的最左边,这个功能ueditor已经有了。在ueditor.config.js中开启就可以了:

clip_image021

最后的效果:

clip_image022

猜你喜欢

转载自www.cnblogs.com/lixiuke/p/10138560.html