添加類到插入TinyMCE的元素

我想知道是否有一種方法來配置TinyMCE（所見即所得的HTML編輯器）添加一個類到所有插入某種類型的元素。我希望Bootstrap的樣式適用於特定的表格。我想知道它是否有某種鉤子或者可以在插入元素時向元素添加類名？例如，我想將class="table table-bordered"添加到通過UI插入的所有表格元素。我知道有一種方法可以指定一個樣式表應用於內容，但我不知道有一種機制可以將類名添加到插入的元素中。添加類到插入TinyMCE的元素

來源

2014-02-15 Kyle

我不確定我確切地得到了你的意思，但這有幫助嗎？

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

編輯：關於設法在init下面什麼

extended_valid_elements：「表[CLASS =表表鑲上]」

編輯編輯：我想這也是一種可能選項，應該有助於擺脫默認的mce類。

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

來源

2014-02-15 02:20:07 lalaland

這將使我添加用戶可以應用到內容的自定義樣式，但默認情況下不會應用它。雖然謝謝！ – Kyle

除非有人有更好的解決辦法，我可能只需要一個事件監聽器綁定到DOMNodeInserted事件檢查是否插入一個表格並添加類到它。我寧願不修改TinyMCE的內部以支持這一點。

來源

2014-02-15 02:59:56 Kyle

// 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 3X http://www.tinymce.com/wiki.php/API3:method.tinymce.dom.DOMUtils.addClass

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

目前我設置爲編輯自定義樣式表，並通過init選項加載它。這樣可以編輯編輯器中的所有內容

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

我的編輯器版本存儲在我的數據庫，然後我用DOMDocument()添加前端造型時，需要查看它。 以下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); 
?>

來源

2015-03-12 20:53:43 Brian

你應該的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: 'table[class="table table-bordered"]'

多個元素：

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"]' 
],

來源

2018-01-28 15:14:28 Imre

添加類到插入TinyMCE的元素

回答

相關問題