Как добавить кнопки заголовка (h1, h2 ...) в tinyMCE с продвинутой темой, простым макетом? - PullRequest
Новая
       17

Как добавить кнопки заголовка (h1, h2 ...) в tinyMCE с продвинутой темой, простым макетом?

11 голосов
/ 05 января 2012

У меня есть редактор 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

Ответы [ 3 ]

17 голосов
/ 05 января 2012

Вот кнопка, которая сделает заголовок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');
        }
    });
},
5 голосов
/ 07 марта 2013

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

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 голосов
/ 28 августа 2013

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

...