Come aggiungere un formato di paragrafo personalizzato in CKEditor

Question

Nel mio progetto ho il requisito di rimuovere il formato di paragrafo come "Indirizzo" e "Formattato" dal menu a discesa e di aggiungere un nuovo formato personalizzato chiamato "Collegamenti" che sarebbe Arial, 14px, grassetto, rosso. È possibile aggiungere un formato di paragrafo personalizzato in CKEditor?

Answer 1

Usa CKEDITOR.config.formatTags per specificare una nuova formattazione:

CKEDITOR.replace('editor1', { 
    format_tags: 'p;h2;h3;pre;links', // entries is displayed in "Paragraph format" 
    format_links: { 
     name: 'Links', 
     element: 'span', 
     styles: { 
      color: 'red', 
      'font-family': 'arial', 
      'font-weight': 'bold' 
     } 
    } 
}); 

sapere di più su stili di vedere quanti CKEDITOR.styleSet opere. Si noti inoltre che dal CKEditor 4.1, la rimozione degli stili da "Formato paragrafo" ha un impatto su Advanced Content Filter.

Answer 2

Dato che si sta lavorando con Drupal, ckeditor.styles.js è il file che si sta cercando, questo consentirà di aggiungere/modificare/rimuovere voci nel menu Stili.

come commento tutte le voci che non si desidera, e usare qualcosa come questo per aggiungere un nuovo formato di paragrafo:

{ name : 'Links', element : 'p', attributes : { 'class' : 'links' } }, 

questo aggiungerà la classe CSS links a qualsiasi paragrafo che si desidera, e si può definire la classe nel tuo foglio di stile del tema. Assicurati di definire la classe in ckeditor.css se non vedi le modifiche applicate nell'istanza CKEditor.

In alternativa, si potrebbe applicare anche gli stili inline direttamente:

{ name : 'Links', element : 'p', attributes : { 'style' : 'font: bold 14px Arial, sans-serif; color: red;' } }, 

Ma il primo metodo è chiaramente più flessibile/pulito.

Assicurati di svuotare la cache di Drupal e/o del browser se non vedi subito le modifiche.