关于Ckeditor编辑器(二)

ckeditor编辑器设置图片居中

ckeditor编辑上传功能实现之后,万恶的产品需求又要求把图片设置为居中显示,但是编辑器自带的图片属性设置是这样滴:
在这里插入图片描述
没有居中呀!!!
只能去扒拉一下配置文件了!
a.修改修改plugins/image/dialogs/image.js
1.打开image.js 找到cmbAlign属性
2.在items中增加一个center 这样下拉列表里才会有居中

  items: [[d.lang.common.notSet, ""], [d.lang.common.alignLeft, "left"], [d.lang.common.alignRight, "right"],[d.lang.common.alignCenter, "center"]],

3.修改下拉列表的选中事件处理居中
修改前的image.js

  {
                                id: "cmbAlign",
                                requiredContent: "img{float}",
                                type: "select",
                                widths: ["35%", "65%"],
                                style: "width:90px",
                                label: c.lang.common.align,
                                "default": "",
                                items: [[c.lang.common.notSet, ""], [c.lang.common.alignLeft, "left"], [c.lang.common.alignRight, "right"]],
                                onChange: function() {
                                    g(this.getDialog());
                                    i.call(this, "advanced:txtdlgGenStyle")
                                },
                                setup: function(a, b) {
                                    if (a == f) {
                                        var c = b.getStyle("float");
                                        switch (c) {
                                        case "inherit":
                                        case "none":
                                            c = ""
                                        } ! c && (c = (b.getAttribute("align") || "").toLowerCase());
                                        this.setValue(c)
                                    }
                                },
                                commit: function(a, b, c) {
                                    **var e = this.getValue();
                                    if (a == f || 4 == a) {
                                        if (e ? b.setStyle("float", e) : b.removeStyle("float"), !c && a == f) switch (e = (b.getAttribute("align") || "").toLowerCase(), e) {
                                        case "left":
                                        case "right":
                                            b.removeAttribute("align")
                                        }
                                    } else 8 == a && b.removeStyle("float")**
                                }
                            }]
                        }]
                    },

修改后的image.js

{
                                id: "cmbAlign",
                                requiredContent: "img{float}",
                                type: "select",
                                widths: ["35%", "65%"],
                                style: "width:90px",
                                label: d.lang.common.align,
                                "default": "",
                                items: [[d.lang.common.notSet, ""], [d.lang.common.alignLeft, "left"], [d.lang.common.alignRight, "right"],[d.lang.common.alignCenter, "center"]],
                                onChange: function() {
                                    e(this.getDialog());
                                    k.call(this, "advanced:txtdlgGenStyle")
                                },
                                setup: function(a, b) {
                                    if (1 == a) {
                                        var c = b.getStyle("float");
                                        switch (c) {
                                        case "inherit":
                                        case "none":
                                            c = ""
                                        } ! c && (c = (b.getAttribute("align") || "").toLowerCase());
                                        this.setValue(c)
                                    }
                                },
                                commit: function(a, b) {
                                    var c = this.getValue();                                 
                                   if (1 == a || 4 == a) {                                        
                                        if (c ? b.setStyle("float", c) : b.removeStyle("float"), 1 == a) {
                                        	
                                        	if(c=="center"){
                                        		//alert("c="+c)
                                        		b.setStyle('display','block');
                                                b.setStyle('margin-left','auto');
                                                b.setStyle('margin-right','auto');
                                        	}
                                        }
                                    } else 8 == a && b.removeStyle("float")
                                }
                            }]
                        }]
                    },

一堆三元表达式没有看太明白,就直接改成了简单粗暴的处理居中。
最终效果
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值