2012-06-26 1 views
0

Я хотел бы установить собственный стиль таблицы как стиль по умолчанию в редакторе TinyMCE (версия 3.4.9 в Moodle 2.2.3). Прямо сейчас, мои новые стили показаны в раскрывающемся списке, но я не могу получить его как стиль таблицы по умолчанию. Значение по умолчанию всегда «- не установлено», что означает, что стиль таблицы не будет использоваться.Собственный стиль таблицы по умолчанию в TinyMCE

Вот как это выглядит на данный момент: https://img.skitch.com/20111226-f4wgp8kudx45t6e2s17yse4cq6.jpg

Вот как это должно выглядеть в конце («Tircia Style» должно быть по умолчанию): https://img.skitch.com/20111226-dcf3t3w7qxagst1xgr2ieas26b.jpg

Изображения из TinyMCEforum ,

+0

Ваши графические ссылки бесполезны, они за логином. Пожалуйста, разместите фотографии на общедоступном веб-хостинге и отредактируйте свой вопрос. –

ответ

0

в tables.js добавить следующий код:

function init() { 
    settings = tinyMCE.settings;  
    settings["table_styles"] = "default1=red;default2=blue;" + settings["table_styles"]; 
    tinyMCE.settings["table_styles"] = settings["table_styles"]; 
+0

Спасибо за ваш ответ, но где я могу найти tables.js? В таблице plugin-directory есть только таблица.js (без «s»), и там я не могу найти приведенный выше код :( – tschomue

0

Я была такая же проблема, и я пытался решить путем передачи конфигурации или изменить библиотеку JavaScript файлов. Я начал делать обратную инженерию table.js (/tiny_mce/plugins/table/js/table.js). Но, не повезло.

Итак, я отправился в table.htm (/tiny_mce/plugins/table/table.htm), который является файлом шаблона для модального диалогового окна плагина. Выбранный предустановленный параметр {#not_set} формирует элемент управления select.

<tr id="styleSelectRow"> 
    <td><label id="classlabel" for="class">{#class_name}</label></td> 
    <td colspan="3"> 
     <select id="class" name="class" class="mceEditableSelect"> 
      <!--<option value="" selected="selected">{#not_set}</option>--> 
     </select> 
    </td> 
</tr> 

Теперь, вы должны пройти table_styles всегда к исходной конфигурации, когда мы начинаем TinyMCE.

var varTimyMCE = $("textarea").tinymce({ 
    table_styles : "Custom 1=classTable1", 
}); 

Это не идеальное решение, но оно работает пока. Надеюсь, разработчик TinyMCE предоставит параметры конфигурации для управления выбором управления в будущих выпусках.

0

Вы можете редактировать plugin.js (\ tinymce \ js \ tinymce \ plugins \ table \ plugin.js), если вы используете unminified tinyMCE.js. В текущей версии это строка 1872. Я добавил, чтобы сделать стиль таблицы по умолчанию отзывчивым.

html = '<div class="table-responsive"><table class="table"><tbody>'; // line 1882 or 1916 
html += '</tbody></table></div>'; // line 1884 or 1928 
1

Не изменяйте основные файлы. Я понимаю, что раньше не было выбора, но в TinyMCE 4.x теперь есть способ установить стиль таблицы по умолчанию с table_default_styles.

http://fiddle.tinymce.com/iUeaab

1

При инициализации TinyMCE пожалуйста, добавьте путь к новому CSS-файл, который будет определять стили, используемые в редакторе.

tinymce.init({ 
     content_css: [ 
     '/css/innerLayout.css' 
     ] 
}); 

Некоторые примеры стилей для innerLayout.css для столов -

.mce-content-body table{width:100%;border-spacing:0;border-collapse:separate;border:0} 
.mce-content-body table tr:nth-child(even){background:#FAFAFA} 
.mce-content-body table caption,.mce-content-body table td,.mce-content-body table th{padding:15px 7px;border:0;font:inherit} 
.mce-content-body table th{font-weight:400;color:#6E6E6E;border-bottom:2px solid #B9B9B9!important; 

Другие стили могут быть найдены здесь - link