Как добавить кнопки заголовка (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

Я нашел заголовок плагина как идеальное решение для этой проблемы. Принятый ответ тоже работает. Единственная проблема, которую мы обнаружили, заключается в том, что кнопка заголовка не отображается активна, когда курсор находится в заголовке, что делает его неинтуитивным, что вы можете снова нажать кнопку, чтобы вернуть форматирование. Плагин заголовка правильно отображает активное состояние.