jquery - ckeditor图像对齐中心自定义

Question

在研究了至少十几个有关 ckeditor 的图像居中主题后，我想发布我在我们公司的一个应用程序中使用的内容，看看是否有其他极客有改进的提示或建议。我将这篇文章发布在 stackoverflow 上，因为这是我们所有人寻求帮助的地方，而且我知道其他人正在研究同一主题。

我们的编辑器用于电子邮件模板，因此我想确保样式属性也重新插入到 img 标签属性中:

<img align="left" alt="" height="169" src="http://local.app.com/includes/images/temp/cdn/events/2.png" style="width: 123px; height: 169px; float: left;" width="123">

在文件最底部的 ckeditor.js 文件中添加以下代码块。如果您使用的是未压缩的 js 文件，请确保位于文件的最末尾。为了确定起见，我添加了一个评论 block 。

//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function configureHtmlOutput( ev )
{
   var editor = ev.editor,
      dataProcessor = editor.dataProcessor,
      htmlFilter = dataProcessor && dataProcessor.htmlFilter;

   // Out self closing tags the HTML4 way, like <br>.
   dataProcessor.writer.selfClosingEnd = '>';

   // Make output formatting behave similar to FCKeditor
   var dtd = CKEDITOR.dtd;
   for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
   {
      dataProcessor.writer.setRules( e,
         {
            indent : true,
            breakBeforeOpen : true,
            breakAfterOpen : false,
            breakBeforeClose : !dtd[ e ][ '#' ], 
            breakAfterClose : true
         });
   }
   // Output properties as attributes, not styles.
   htmlFilter.addRules(
      {
         elements :
         {
            $ : function( element )
            {
               // Output dimensions of images as width and height
               if ( element.name == 'img' )
               {
                  var style = element.attributes.style;

                  if ( style )
                  {
                     // Get the width from the style.
                     var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
                     width = match && match[1];

                     // Get the height from the style.
                     match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
                     var height = match && match[1];

                     // Get the border from the style.
                     match = /(?:^|\s)border-width\s*:\s*(\d+)px/i.exec( style );
                     var border = match && match[1];

                     // Get the float from the style.
                     match = /(?:^|\s)float\s*:\s*(\D+);/i.exec( style );notSet
                     var float = match && match[1];

                     if ( width )
                     {
                        element.attributes.width = width;
                     }

                     if ( height )
                     {
                        element.attributes.height = height;
                     }

                     if ( border )
                     {
                        element.attributes.border = border;
                     }

                     if ( float )
                     {
                        element.attributes.align = float;
                     }
                  }
               }

               if ( !element.attributes.style )
                  delete element.attributes.style;

               return element;
            }
         }
      } );
}
CKEDITOR.on('instanceReady',configureHtmlOutput);

接下来打开js文件/ckeditor/plugins/image/dialogs/image.js中的图像插件id: 'cmbAlign'。如果您使用压缩版本，则必须先将其解压缩。我推荐这个实用程序http://tools.arantius.com/tabifier (输入 json)这对我来说一直非常有效。您将编辑“cmbAlign”代码块以匹配:

//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
                  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) {
                      var D = C.getStyle('float');
                      switch (D) {
                        case 'inherit':
                        case 'none':
                            D = '';
                      }!D && (D = (C.getAttribute('align') || '').toLowerCase());
                      this.setValue(D);
                    }
                  },
                  commit: function (B, C, D) {
                    var E = 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'); 
                        }
                      }
                    } else if (B == g){
                        C.removeStyle('float');
                        C.removeStyle('display');
                        C.removeStyle('margin-right');
                        C.removeStyle('margin-left');
                    }
                  }
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

这就是我能够重新集成图像居中的方式。不，它不漂亮，我确信它不是 100% 准确，但我对你的想法感兴趣。到目前为止，这效果很好。

Answer 1

Drupal有一个模块专门用于解决这个问题 https://drupal.org/project/ckeditor_image您所要做的就是启用它它劫持了图像按钮，所以我认为如果你不想破解 ckeditor，这是最好的解决方案，我检查了源代码，它包含一个新的图像插件来替换核心中的图像插件