Come aggiungere pulsanti intestazione (h1, h2 ...) a tinyMCE con tema avanzato, layout semplice?

Question

Ho un piccolo editor MCE che utilizza il tema avanzato. Sto usando il semplice layout su quel tema avanzato in modo da poter definire le mie barre degli strumenti su init() senza dover approfondire ciò che tinyMCE sta facendo.

Il problema che ho è che il mio editor non ha pulsanti per aggiungere elementi di intestazione. Ho disperatamente bisogno di questa opzione ma non trovo alcun consiglio pratico sull'argomento.

Tutto quello che sto facendo avviene all'interno della funzione tinymce.init(), che ho incollato qui di seguito:

$("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 
     }); 

Sto usando il plugin jQuery per accedere TinyMCE (sono sicuro che questo non ha nulla a fare con la mia domanda ma spiega il codice).

Un'idea che avevo era di usare l'opzione theme_advanced_styles ma non credo che questo mi consenta di inserire veri e propri tag di intestazione, ma piuttosto di applicare lo stile del mio markup con span e quant'altro per sembrare un'intestazione.

Tutte le idee sono molto apprezzate. Cheers, J

Answer 1

Questo è un pulsante che farà uscire un paragrafo da un paragrafo. Aggiungi 'formath1' al vostro buttonlist e aggiungere questo al vostro init 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'); 
     } 
    }); 
}, 

Answer 2

Aggiunta di intestazioni e altri elementi con uno stile implicito possono essere aggiunti tramite elenco formatselect con theme: 'advanced' casi 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 
}); 

I superfluo -includono i valori predefiniti solo per la dimostrazione ma lo TinyMCE Wiki afferma che, dal 2010-10-28 questo elenco di elementi può essere ridotto o aggiunto a elementi quali:

`p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp` 

Answer 3

Ho trovato il heading plugin per essere solo una soluzione perfetta per questo problema. Anche la risposta accettata funziona bene. L'unico problema riscontrato è che il pulsante di titolo non appare attivo quando il cursore si trova su un'intestazione, rendendo quindi non intuitivo il fatto che è possibile premere nuovamente il pulsante per annullare la formattazione. Il plugin di intestazione visualizza correttamente uno stato attivo.