ckeditor image align center customization（ckeditor 编辑器图像属性居中设置）

最新推荐文章于 2024-04-28 17:23:07 发布

原创最新推荐文章于 2024-04-28 17:23:07 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ckeditor #图像居中

java 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个用于调整图片对齐方式的编辑器组件实现细节，包括左对齐、右对齐及居中显示等选项，并提供了JavaScript代码示例。

修改image.js对应的部分就可以了

id:'cmbAlign',
                  type:'select',
                  widths:['35%','65%'],
                  style:'width:90px',
                  label:b.lang.common.align,
                  'default':'',
                  items:[
                    [b.lang.common.notSet,''],
                    [b.lang.common.alignLeft,'left'],
                    [b.lang.common.alignRight,'right'],
                    [b.lang.common.alignCenter,'center'] //=> display: block; margin-left: auto; margin-right: auto;
                  ],
                  onChange:function(){
                    l(this.getDialog());
                    o.call(this,'advanced:txtdlgGenStyle');
                  },
                  setup:function(B,C){
                    if(B ==d){
                      varD =C.getStyle('float');
                      switch(D){
                        case'inherit':
                        case'none':
                            D ='';
                      }!D &&(D =(C.getAttribute('align')||'').toLowerCase());
                      this.setValue(D);
                    }
                  },
                  commit:function(B,C,D){
                    varE =this.getValue();
                    if(B ==d ||B ==f){
                      if(E){
                            switch(E){
                            case'left':
                                C.setStyle('float',E);
                                break;
                            case'right':
                                C.setStyle('float',E);
                                break;
                            case'center':
                                C.setStyle('display','block');
                                C.setStyle('margin-left','auto');
                                C.setStyle('margin-right','auto');
                                break;
                            default:
                                C.setStyle('float',E);
                          }
                      }
                      else{
                        C.removeStyle('float');
                        C.removeStyle('display');
                        C.removeStyle('margin-right');
                        C.removeStyle('margin-left');
                      }
                      if(!D &&B ==d){
                        E =(C.getAttribute('align')||'').toLowerCase();
                        console.log(E);
                        switch(E){
                            case'left':
                                break;
                            case'right':
                                break;
                            case'center':
                            break;
                          default:
                            C.removeAttribute('align');
                        }
                      }
                    }elseif(B ==g){
                        C.removeStyle('float');
                        C.removeStyle('display');
                        C.removeStyle('margin-right');
                        C.removeStyle('margin-left');
                    }
                  }