ckeditor 이미지 정렬 센터 사용자 정의

Question

ckeditor와 관련하여 이미지 센터링에 적어도 12 개의 스레드를 조사한 후 회사 애플리케이션 중 하나에 사용하고있는 게시물을 게시하고 개선을위한 팁이나 제안 사항이 있는지 확인하고 싶습니다. 우리 모두가 도움을 청하기 때문에 stackoverflow에 게시하고 다른 사람들이이 동일한 주제를 연구하고 있다는 것을 알고 있습니다.

내가 스타일 속성도 img 태그에 다시 삽입되어 있는지 확인하고 싶었다 그래서 우리의 에디터가 이메일 템플릿에 사용되는

속성 : 파일 추가의 맨 아래에있는 ckeditor.js 파일에서

<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"> 

다음 코드 블록. 압축되지 않은 js 파일을 사용하는 경우 파일의 맨 끝에 있는지 확인하십시오. 나는 코멘트 블록을 추가했다.

//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 
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 파일의 화상 플러그 id: 'cmbAlign' /ckeditor/plugins/image/dialogs/image.js를 연다. 압축 된 버전을 사용하는 경우 먼저 압축을 풀어야합니다. 나는이 유틸리티 http://tools.arantius.com/tabifier (type 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

드루팔이 문제를 해결하기 위해 특별히 모듈이 https://drupal.org/project/ckeditor_image 당신이해야 할 모든 그것은 이미지 버튼을 hijackes 그것을 수 있도록하는 것입니다, 그래서 당신이 최선의 해결책을 년대 ckeditor를 해킹하지 않으려면 내가 생각하기에, 내가 핵심 이미지를 포함하는 소스 코드를 확인하십시오.