CKEditor 필터링 방지 Radiant 태그 (유효하지 않은 HTML 태그)

Question

refinerycms (레일 CMS)와 함께 CKEditor를 사용하고 있습니다. radius tags에 대한 기본 지원을 추가했습니다 (다른 Radius CMS에서 사용 된 Radiant 태그). 코드를 삽입하는 페이지에서 모델의 일부 요소를 나열 할 수 있습니다.

<r:product_listing category="products" list_as="grid"/> 

는 반경 태그가 정확하고 예상되는 동작입니다 잘못된 HTML입니다 생각하는 페이지의 내용을 수정하는 CKEditor를 사용하여,하지만 난 찾을 수 없습니다 : 문제는 반경 태그 HTML을 모방한다는 것입니다 CKEditor에게 그 태그들을 무시하도록 지시하는 방법.

아이디어가 있으십니까? 미리

덕분 EDIT

: 태그가 레일에 sanitize 방법에 의해 여과되고 있었던 것은 나왔다는 RefineryCMS 의해 호출된다.

Answer 1

맞춤 태그에 어떤 종류의 문제가 있습니까? 그리고 어떤 브라우저에서?

CKEditor는이 태그를 보존하지만 내용을 전체 내용으로 감싸는 것을 확인했습니다.

CKEDITOR.dtd.$empty[ 'r:product_listing' ] = 1; 

을하지만 여전히 충분하지 않을 수 있습니다 : 즉, 당신이 CKEDITOR.dtd을 편집해야 할 것을 피하기 위해. 더 나은 지원을 받으려면이 객체에서 더 많은 변경 작업을 수행해야합니다. 특히 부모가 될 수있는 항목과 인라인 태그라는 것을 정의하는 것이 중요합니다. 예를 들어 :

CKEDITOR.dtd.p[ 'r:product_listing' ] = 1; // it is allowed in <p> tag 
CKEDITOR.dtd.$inline[ 'r:product_listing' ] = 1; 

이 아직 충분하지 않을 수 있습니다 - 예를 들어 당신이 가장 가능성이 사본 & 붙여 넣기를 지원하지 않습니다 수 있습니다.

좀 더 안정적인 지원이 필요하면 조금 다른 방법을 시도해보십시오. CKEDITOR.dataProcessor을 사용하면 데이터가 편집기에로드 될 때이 태그를 일반 텍스트로 변환 할 수 있으며 데이터를 검색하면 해당 태그로 다시 변환 할 수 있습니다.

예 액 :

// We still need this, because this tag has to be parsed correctly. 
CKEDITOR.dtd.p[ 'r:product_listing' ] = 1; 
CKEDITOR.dtd.$inline[ 'r:product_listing' ] = 1; 
CKEDITOR.dtd.$empty[ 'r:product_listing' ] = 1; 

CKEDITOR.replace('editor1', { 
    on: { 
     instanceReady: function(evt) { 
      var editor = evt.editor; 

      // Add filter for html->data transformation. 
      editor.dataProcessor.dataFilter.addRules({ 
       elements: { 
        'r:product_listing': function(element) { 
         // Span isn't self closing element - change that. 
         element.isEmpty = false; 
         // Save original element name in data-saved-name attribute. 
         element.attributes[ 'data-saved-name' ] = element.name; 
         // Change name to span. 
         element.name = 'span'; 
         // Push zero width space, because empty span would be removed. 
         element.children.push(new CKEDITOR.htmlParser.text('\u200b')); 
        } 
       } 
      }); 

      // Add filter for data->html transformation. 
      editor.dataProcessor.htmlFilter.addRules({ 
       elements: { 
        span: function(element) { 
         // Restore everything. 
         if (element.attributes[ 'data-saved-name' ]) { 
          element.isEmpty = true; 
          element.children = []; 
          element.name = element.attributes[ 'data-saved-name' ]; 
          delete element.attributes[ 'data-saved-name' ] 
         } 
        } 
       } 
      }); 
     } 
    } 
}); 

지금 r:product_listing 소자 내부 폭 제로 스팬 공간으로 변환한다. 편집기 내부에는 정상 범위가 있지만 소스 모드와 데이터에 editor#getData() 메서드가있는 경우 원래 r:product_listing 태그가 표시됩니다.

이 솔루션은 가장 안전한 솔루션이라고 생각합니다. 예 : 복사 및 붙여 넣기 작업.

Answer 2

또한 보호 된 소스로 추가 할 수 있으므로 필터링이나 구문 분석이 수행되지 않습니다.

config.protectedSource.push(/<r:product_listing[\s\S]*?\/>/g); 

당신의 config.js에 다음 줄을 추가 ([\ S \ S] *? 어떤 임의의 내용입니다)
귀하의 링크가 유용 덕분이었다 http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-protectedSource