Добавить класс к элементу, вставленному с TinyMCE

Мне интересно, есть ли способ настроить TinyMCE (WYSIWYG HTML-редактор) для добавления класса ко всем элементам, вставленным определенного типа. Я бы хотел, чтобы стили Bootstrap применялись, особенно с таблицами. Мне интересно, есть ли какая-то зацепка или что-то, что может добавить имя класса к элементу, когда он вставлен? Например, я хотел бы добавить class="table table-bordered" ко всем элементам таблицы, которые вставляются через пользовательский интерфейс. Я знаю, что есть способ указать таблицу стилей для применения к содержимому, но я не знаю механизма добавления имен классов к вставленным элементам.

Источник

4 ответа

Вы должны указать это в инициализации вашего редактора с помощью extended_valid_elements, Документация tinymce содержит решение. Все, что вам нужно сделать, это завершить эту настройку. В атрибуте 'class' вы можете указать свое имя класса следующим образом:

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"]'
],
Источник 
// 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);
?>
Источник

Если у кого-то нет лучшего решения, мне может понадобиться просто привязать слушателя события к DOMNodeInserted событие, которое проверяет, была ли вставлена ​​таблица, и добавляет к ней класс. Я бы предпочел не изменять внутренности TinyMCE для поддержки этого.

Источник

Я не уверен, что понял, что вы имеете в виду, но помогает ли это?

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

РЕДАКТИРОВАТЬ: Как насчет попробовать следующее в init

extended_valid_elements: "таблица [класс = таблица с рамкой]"

РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ: Я думаю, что это также возможный вариант, должен помочь избавиться от класса mce по умолчанию.

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

Источник
Другие вопросы по тегам