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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

竖排从左向右:

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

竖排从左向左:

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

gif操作过程:

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

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

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

最后的效果:

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

上一篇:Oracle 查询语句(where,order by ,like,in,distinct)


下一篇:45 个非常有用的 Oracle 查询语句