it-swarm.it

Aggiunta di classi CSS a wysiwyg

Uso wysiwyg con ckeditor e mi chiedevo come avrei aggiunto gli stili CSS in modo che un utente potesse, ad esempio, spostare immagini a sinistra o apportare altre modifiche simili ...?

Grazie!

7
Jane

Ckeditor utilizza il file ckeditor.styles.js Per definire gli stili disponibili nel menu a discesa Stili. La documentazione in quel file afferma:

'Styles' button is not enabled by default in DrupalFull and DrupalFiltered toolbars.

Se guardi il file, dovrebbe essere abbastanza semplice modificarlo usando gli esempi forniti.

Il file ckeditor.styles.js Può essere copiato in una directory accessibile da Drupal e modificato per includere i tuoi stili. Quindi devi configurare il tuo profilo CKeditor in modo che punti al nuovo file, incluso qualsiasi CSS applicabile.

6
nmc

Invece di collegarsi a ckeditor.styles.js, possiamo farlo direttamente nella pagina di configurazione del formato.

Il formato WYSIWYG ti dà un'opzione per i tuoi stili e possiamo semplicemente scrivere CSS sulla base di quei formati.

Passaggi per aggiungere stili

  • Accedi al sito come amministratore.
  • Passare alla pagina di configurazione dei formati. (Configurazione "Creazione contenuto" Profili Wysiwyg)

    enter image description here

  • Modifica uno qualsiasi del formato.

    enter image description here

  • Apri il set di campi CSS .

    enter image description here

  • Sotto Classi CSS textarea, crea lo stile che desideri creare. Il formato dovrebbe essere

Nome stile = html_element.class_name

Lo stesso esempio è

Titolo della pagina statica = div.static_page_title (Quindi il nome dello stile è Titolo statico della pagina , che quando applicato avvolge il testo in div aggiungendo static_page_title come classe dell'elemento div .)

Passaggi per usarlo

  • Prova a creare un contenuto e usa il formato in cui hai aggiunto lo stile.
  • Sotto Stili vedresti le impostazioni di Stile che hai creato. enter image description here
  • Basta scrivere il test e selezionare lo stile. Dopo averlo fatto, il markup sarebbe simile

    <div class="static_page_title">Testing</div>

  • Quindi possiamo semplicemente scrivere il css per la classe static_page_title e tutto funzionerebbe come previsto.

Spero che la mia risposta sia utile

1
Nitesh Sethia