Come modificare la faccia del pulsante "Rimuovi formattazione" per TinyMCE 4

Question

Il pulsante TinyMCE 4 per la rimozione della formattazione è , che non è certamente intuitivo per me. Mi piacerebbe fare in modo che il pulsante faccia qualcosa di più ovvio, ad esempio , ad esempio assegnandogli un'immagine. Ma non sto trovando da nessuna parte per cambiare la faccia del pulsante. Il markup assegnato al pulsante è

.

Non sono sicuro di come si ottiene il simbolo Tx sul pulsante, ma è così.

Grazie per qualsiasi aiuto.

Answer 1

In cambio skin.min.css

.mce-i-removeformat:before { 
    content: "\e01d"; 
} 

a qualcosa di simile

.mce-i-removeformat:before { 
    background-image: url("http://i.stack.imgur.com/0rzf2.png"); 
    background-size: 15px 15px; 
    background-repeat: no-repeat; 
} 

Puoi probabilmente rimuovi lo background-size e lo background-repeat se rendi l'immagine della giusta dimensione

Se non si desidera modificare direttamente il css, è sufficiente creare un nuovo file css e caricarlo dopo quello predefinito per sovrascrivere le impostazioni. Se lo facevi, dovresti sovrascrivere il contenuto per rimuovere l'icona originale

Answer 2

Queste icone provengono dal font tinymce. per me nella fonte TinyMCE ho i caratteri a

tinymce/pelli/lightgray/fonts/tinymce.woff | TTF | ecc

Se è stato aggiunto un tuo file di font withyour propria icona dovrebbe permettere di cambiare l'icona

Se si controlla il css noterete ci sono due parti che controllano le icone in uso

Sulla :: prima all'interno del tag

.mce-i-italic:before { 
    content: "\e02b"; 
} 

sul tag i sé

.mce-ico { 
    font-family: tinymce, Arial 
} 

sia comefrom skin.min.css

Answer 3

Che cosa dici invece di nuova immagine che usi: dopo lo pseudo elemento e rimuovi: prima di uno.

Ecco come apparirebbe

https://jsfiddle.net/nj6yn4bq/4/

E il codice

<button><i></i></button> 

i:before { display: none; } 
i:after { 
    content: 'FMT'; 
    text-decoration: line-through; 
    font-style: initial; 
    font-size: 15px; 
} 

button { 
background: linear-gradient(#FFF,#E0E0E0); 
padding: 0.7em; 
border: 1px solid #DEDEDE; 
border-radius: 3px; 
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22); 

}