Как добавить кнопки заголовка (h1, h2...) в tinyMCE с расширенной темой, простой макет?
У меня есть редактор tinyMCE, который использует расширенную тему. Я использую простой макет на этой расширенной теме, поэтому я могу определить свои собственные панели инструментов в init(), не задумываясь о том, что делает tinyMCE.
Проблема заключается в том, что у моего редактора нет кнопок для добавления элементов заголовка. Я отчаянно нуждаюсь в этом варианте, но не могу найти практических советов по этому вопросу.
Все, что я делаю, происходит внутри функции tinymce.init(), которую я вставил ниже:
$("textarea.tinymce").not(".simple").tinymce({
script_url : "/_lib/script/tiny_mce/tiny_mce.js",
plugins : "wordcount,paste,spellchecker,table",
theme : "advanced",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_statusbar_location : "bottom",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1
: "bold,italic,underline,strikethrough,|,sub,sup,|,charmap,|,forecolorpicker",
theme_advanced_buttons2
: "undo,redo,|,cut,copy,pastetext,pasteword,|,link,unlink,anchor,|,image,code",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_align : "left",
height : 480,
apply_source_formatting : false,
convert_fonts_to_spans : true
});
Я использую плагин jquery для доступа к tinyMCE (я уверен, что это не имеет никакого отношения к моему вопросу, но оно объясняет код).
Одна из моих идей заключалась в том, чтобы использовать параметр theme_advanced_styles, но я не думаю, что это позволит мне вставлять теги фактического заголовка, а просто стилить мою разметку с пробелами и еще не выглядеть как заголовок.
Любые идеи очень ценятся.
Ура,
J
Ответы
Ответ 1
Вот кнопка, которая сделает заголовок 1 из абзаца. Добавьте 'formath1' в свой список кнопок и добавьте это в свой tinymce init
setup : function(ed){
ed.addButton('formath1', // name to add to toolbar button list
{
title : 'Make h1', // tooltip text seen on mouseover
image : 'http://myserver/ma_button_image.png',
onclick : function()
{
ed.execCommand('FormatBlock', false, 'h1');
}
});
},
Ответ 2
Добавление заголовков и других элементов с неявным стилем может быть добавлено через formatselect
с theme: 'advanced'
экземплярами 'theme_advanced_buttons_[1-3]
list:
tinyMCE.init({
mode : 'textareas',
theme : 'advanced',
editor_selector : 'mceAdvanced',
plugins: 'autolink,inlinepopups',
theme_advanced_blockformats: 'p,address,pre,h1,h2,h3,h4,h5,h6',
theme_advanced_buttons1: 'formatselect,|,bold,italic,removeformat',
theme_advanced_buttons2: '',
theme_advanced_buttons3: '',
theme_advanced_toolbar_location: 'top',
theme_advanced_statusbar_location: 'bottom',
theme_advanced_resizing: true,
theme_advanced_resize_horizontal: false,
relative_urls: false
});
Я излишне добавил значения по умолчанию только для демонстрации, но TinyMCE Wiki утверждает, что с 2010-10 гг. -28 этот список элементов может быть уменьшен или добавлен с помощью элементов, включая:
`p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp`
Ответ 3
Я нашел заголовок плагина как идеальное решение для этой проблемы. Принятый ответ тоже работает. Единственная проблема, которую мы обнаружили, заключается в том, что кнопка заголовка не отображается активна, когда курсор находится в заголовке, что делает его неинтуитивным, что вы можете снова нажать кнопку, чтобы вернуть форматирование. Плагин заголовка правильно отображает активное состояние.