Modifica tipo/dimensione carattere predefinito in TinyMCE

Question

Come si modifica il tipo di carattere e la dimensione carattere predefiniti in TinyMCE?

Sto utilizzando lo skin avanzato e ho modificato lo stile body, td, pre in default/content.css ma non cambia ancora.

Answer 1

Beh, ci sono diversi content.css e solo uno viene utilizzato per lo stile il vostro editor a seconda delle impostazioni di configurazione .

Si consiglia di utilizzare l'opzione di configurazionecontent_css e il nome di un file css in cui è possibile sovrascrivere i redattori di default (il content.css ti sono stati recentemente cercando). Nella tua funzione init uso qualcosa come

content_css: "http://localhost/css/my_tiny_styles.css", 

e in my_tiny_styles.css o qualsiasi file che si sceglie di utilizzare

font-family: myfont1, myfont2, sans-serif; 

Answer 2

Ecco un altro modo per risolvere questo problema.

Aggiungendo i propri stili personalizzati nel nostro file CSS definendo l'ID di tinymce.

#tinymce .mceContentBody p { 
    font-family: your_font_name !important; 
} 

Answer 3

Ecco come procedere senza toccare CSS o altri codici.

1. usare il plugin 'TinyMCE avanzata'
2. attivarlo nelle impostazioni.

Istruzioni più dettagliate here.

Answer 4

Se si desidera modificare il valore predefinito delle caselle personali, piuttosto che solo il css del display, con TinyMCE 4 che è ora:

setup : function(ed) { 
ed.on('init', function(ed) { 
    ed.target.editorCommands.execCommand("fontName", false, "Calibri"); 
    ed.target.editorCommands.execCommand("fontSize", false, "11pt"); 
}); 
} 

EDIT: questa è l'opzione di impostazione della funzione init come spiegato qui : https://www.tinymce.com/docs/configure/integration-and-setup/#setup

Answer 5

Per le persone che hanno problemi di aggiunta di un foglio di stile a causa di problemi di percorso o un qualsiasi motivo, questo dovrebbe farlo abbastanza semplice:

setup : function(ed) { 
    ed.on('init', function(){ 
     $(this.getDoc()).find('head').append('<style>p{margin:0;}</style>'); 
    }); 
} 

Nota Ho usato jQuery, ma ovviamente lo posso fare anche senza.