TinyMCE로 삽입 된 요소에 클래스 추가하기

Question

TinyMCE (WYSIWYG HTML 편집기)를 구성하여 특정 유형의 삽입 된 모든 요소에 클래스를 추가하는 방법이 있는지 궁금합니다. 부트 스트랩의 스타일을 특히 테이블에 적용하고 싶습니다. 어떤 종류의 훅이나 요소가 클래스 이름을 삽입 할 때 클래스에 추가 할 수 있는지 궁금합니다. 예를 들어, UI를 통해 삽입 된 모든 테이블 요소에 class="table table-bordered"을 추가하고 싶습니다. 내용에 적용 할 스타일 시트를 지정하는 방법이 있지만 삽입 된 요소에 클래스 이름을 추가하는 메커니즘을 알지 못합니다.

Answer 1

정확히 무슨 뜻인지 모르겠지만 도움이됩니까?

http://www.tinymce.com/tryit/custom_formats.php

편집 : 시도 초기화에서 다음에 대한 어떤

extended_valid_elements : "테이블 [클래스 = 테이블 테이블 테두리가]"

편집 편집 :이 또한 가능하다고 생각 옵션을 사용하면 기본 mce 클래스를 제거하는 데 도움이됩니다. 누군가가 더 나은 솔루션을 제공하지 않는 한

http://www.tinymce.com/wiki.php/Configuration:visual_table_class

Answer 2

, 나는 그냥 테이블에 삽입 있는지 확인하고 그것에 클래스를 추가하는 DOMNodeInserted 이벤트에 이벤트 리스너를 결합해야 할 수도 있습니다. 차라리 TinyMCE의 내부를 수정해서이 문제를 지원하지 않을 것입니다.

Answer 3

// Adds a class to all paragraphs in the active editor 
tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.dom.select('p'), 'myclass'); 

// Adds a class to a specific element in the current page 
tinyMCE.DOM.addClass('mydiv', 'myclass'); 

API 배 http://www.tinymce.com/wiki.php/API3:method.tinymce.dom.DOMUtils.addClass

API 배 http://www.tinymce.com/wiki.php/api4:method.tinymce.dom.DOMUtils.addClass

---

현재 내가 설정 사용자 지정 에디터의 스타일 시트 및 초기화 옵션을 통해로드합니다. 이것은 편집기의 모든 것을 스타일링합니다.

tinyMCE.init({ 
     ... 
     content_css : "/mycontent.css" 
}); 

는 그때 나는 그것을 볼 수 있도록해야 할 때 프런트 엔드 스타일링을 추가 DOMDocument()를 사용하여 내 DB에 편집기 버전을 저장합니다. 다음은 PHP 예제입니다.

<?php 
$html = utf8_decode(htmlspecialchars_decode($html)); 
$doc = new DOMDocument(); 
$doc->loadHTML($html); 

$tables = $doc->getElementsByTagName('table'); 
foreach ($tables as $tbl) { 
    $tbl->setAttribute('class', 'table table-striped table-bordered'); 
} 
$save = $doc->saveHTML(); 
$save = utf8_encode($save); 
?> 

Answer 4

당신은 extended_valid_elements의 도움으로 편집기의 init에 지정해야합니다. tinymce documentation에는 솔루션이 들어 있습니다. 이 설정을 완료하기 만하면됩니다.

extended_valid_elements: 'img[class="your-custom-class-name"|src|border=0|alt|title|hspace|vspace|align|onmouseover|onmouseout|name]' 

또는 귀하의 경우 :

extended_valid_elements: [ 
    'img[class="your-custom-class-name"|src|border=0|alt|title|hspace|vspace|align|onmouseover|onmouseout|name]', 
    'table[class="table table-bordered"]' 
],