Come posso cambiare la tavolozza dei colori dei font di default nell'editor TinyMce?

Question

Ho alcuni colori preimpostati che vorrei aggiungere che si accompagnano al tema del mio sito web. Come posso cambiare la tavolozza dei colori dei font di default in TinyMce?

screenshot-with-shadow.png http://img407.imageshack.us/img407/4526/screenshotwithshadow.png

Answer 1

A. Il modo più semplice, ma sporco è quello di modificare il codice sorgente. Prendi il file tiny_mce.js e cerca la stringa "000000,993300,333300," - questo è l'inizio della definizione del colore di SplitButton. Ora puoi modificare i colori come preferisci. Questo regolerà l'impostazione del colore per tutte le istanze di ColorSplitButton.

B. Un altro modo, non così sporco come quello di armeggiare con il codice sorgente è quello di regolare i colori dopo l'inizializzazione dell'editor. Sarà necessario aggiungere the setup parameter alla configurazione TinyMCE (o metterlo all'interno di uno dei i propri plugin TinyMCE):

setup : function(ed) { 
     ed.onInit.add(function(ed) { 

     $('.mceColorSplitMenu').find('#_mce_item_2').get(0).setAttribute('data-mce-color','#0202FF'); 
     $('.mceColorSplitMenu').find('#_mce_item_3').get(0).setAttribute('data-mce-color','#0203FF'); 
      ... 
     $('.mceColorSplitMenu').find('#_mce_item_41').get(0).setAttribute('data-mce-color','#0241FF'); 
     }); 
    } 

Essere consapevoli del fatto che si potrebbe desiderare di cambiare altre attriubtes del SplitButton così (cioè il titolo, colore di sfondo, ...)

C. il più pulito, ma in termini di tempo soluzione è quella di sviluppare un proprio plugin di utilizzare un proprio ColorSplitButton contenente i colori della vostra scelta nella cornice per questo elemento di comando (date un'occhiata nella versione per sviluppatori di tinymce) c'è un file chiamato ColorSplitButton.js. Ecco po 'di codice che contiene l'impostazione del colore:

ColorSplitButton : function(id, s, ed) { 
     var t = this; 

     t.parent(id, s, ed); 

     /** 
     * Settings object. 
     * 
     * @property settings 
     * @type Object 
     */ 
     t.settings = s = tinymce.extend({ 
      colors : '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,008000,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF', 
      grid_width : 8, 
      default_color : '#888888' 
     }, t.settings); 

Answer 2

https://www.youtube.com/watch?v=dySkwdZG9J0

theme_name_text_colors: "#hexhex, #hexhex, #hexhex"

Metti che nella funzione init() e boom, la vostra il pallet di colore è personalizzato. E ottieni ancora il pulsante con più colori. Nessun plugin aggiuntivo. Nessun lavoro pazzo.

Answer 3

Beh, è ​​un po 'tardi, ma la mia soluzione sarebbe:

1.Assuming che si sta utilizzando plugin 'textcolor', copiare la cartella 'TextColor' nella directory 'plugins' e dargli un nuovo nome (diciamo 'mytextcolor'). Questo sarà il nome del nuovo plug-in (mytextcolor)

2. Nella cartella "mytextcolor" apri plugin.min.js e nella riga 12 troverai la tavolozza colori predefinita . modificalo con nuovi nomi e codici colore.

3.in vostra configurazione TinyMCE rinominare il 'TextColor' nel plugin parametri 'mytextcolor'

Speranza che aiuta

Answer 4

provare a utilizzare il 'textcolor_map' impostazione della configurazione del redattore?

Anche io stavo cercando di trovare come modificare la tavolozza dei colori dei font di default in Tinymce. La maggior parte delle risposte come quelle precedenti indicavano l'utilizzo di una delle proprietà di configurazione basate su 'theme_advanced_'. Tuttavia, il tema "avanzato" non è impacchettato con la versione 4 e il tema "moderno" che la versione 4 utilizza per impostazione predefinita non espone le stesse proprietà. In ogni caso, sarebbe preferibile una soluzione a tema indipendente.

E lo!Un rapido sguardo nel plugin 'textcolor' rivela che quando il plug-in sta configurando la sua mappa di colori, guarda prima alla proprietà sopra citata nelle impostazioni dell'editor.