修改Ueditor工具栏字号显示方式为中文word字号显示方式

本答案是参考百度知道回答写的,原答案比较精简,只是做展开,尽量描述的详细些,便于参考。

原文地址:http://zhidao.baidu.com/link?url=05kzbhNQOYhtlwJIfMN1U8jQ_yg97N43LCc-RWjJv3PP9zibLdFtK7ogUbxFODM9_XRdEoKJrDZ_u5cgbDmc3_MfR0LnugJj6zGkH9Wm22i


一、适用版本:ueditor 1.3.6+(亲测1.4.3版有效)


二、打开/ueditor/ueditor.all.js,搜索“fontfamily”,定位到如下代码

233755_PgR4_1424662.png

将fontsize的代码替换为如下代码:

234437_wtYA_1424662.png

        

/*'fontsize': [10, 11, 12, 14, 16, 18, 20, 24, 36]*/
        'fontsize': [
             { name: '\u516d\u53f7', val: 10},
             { name: '\u5c0f\u4e94', val: 12},
             { name: '\u4e94\u53f7', val: 14},
             { name: '\u5c0f\u56db', val: 16},
             { name: '\u56db\u53f7', val: 18},
             { name: '\u5c0f\u4e09', val: 20},
             { name: '\u4e09\u53f7', val: 21},
             { name: '\u5c0f\u4e8c', val: 24},
             { name: '\u4e8c\u53f7', val: 29},
             { name: '\u5c0f\u4e00', val: 32},
             { name: '\u4e00\u53f7', val: 34},
             { name: '\u5c0f\u521d', val: 48},
             { name: '\u521d\u53f7', val: 56}
         ]

P.S:由于WEB字号低于10没有什么使用价值,仅添加10px以上的字体,名称可以自己定义,只要把中文转为UNICODE就行了(貌似不转换直接用中文字符串也可以)。


三、还是在/ueditor/ueditor.all.js,搜索“editorui.fontsize”,定位到如下代码

234829_ijaq_1424662.png

将百度知道里84许的文件下载下来和原版对比可以看到差异

235032_xBF1_1424662.png

更改代码如下:

原版:

for (var i = 0; i < list.length; i++) {
            var size = list[i] + 'px';
            items.push({
                label:size,
                value:size,

更改后:

for (var i = 0; i < list.length; i++) {
            var sizename = list[i].name;
            var size = list[i].val + 'px';
            items.push({
            	label:sizename,
                value:size,

可以看到思路就在于把原来以像素字号表示的简单的fontsize属性细化,模仿了font-family的键值对书写方式,添加name和val两个属性,再在下方的ui代码拼接的地方将细化后的sizename和name值分别输出。

这样在实际生成的编辑器实例中即可看到生效

235719_adfE_1424662.png


总结:非常感谢84许的思路和代码,通过模仿原有的属性键值对形式,以及观察前端展现方式,二次开发修改字号显示,是一个很好的customize ueditor的方法,鉴于ueditor已经万年不更新了,很多新的功能需要我们自行去研究修改,本文没有创新,只是细化扩展了84许的更改方式,做个知识的搬运工。

转载于:https://my.oschina.net/u/1424662/blog/472282

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值