Как добавить кнопки заголовка (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, но я не думаю, что это позволит мне вставлять фактические теги заголовков, а просто стилизовать мою разметку с помощью spans и whatnot, чтобы выглядеть как заголовок.

любые идеи с благодарностью. Овации, Джей

11
html html-heading javascript tinymce wysiwyg

3 ответов

вот кнопка, которая сделает heading1 из абзаца. Добавить formath1 на ваш buttonlist и добавить это к вашему TinyMCE и инициализации

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');
        }
    });
},
17

добавление заголовков и других элементов с неявным стилем можно добавить через formatselect С theme: 'advanced' экземпляров theme_advanced_buttons_[1-3] список:

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`
5

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

3