File ckeditor.styles.js personalizzato con il modulo WYSIWYG

Sto cercando di personalizzare il menu a discesa "Stile carattere" in CKeditor tramite il modulo WYSIWYG, ma non vedo alcun modo per specificare un percorso per ckeditor.styles.js nell'editor del profilo del modulo wysiwyg.

Fai riferimento a questo post per ulteriori informazioni - dice che dovrebbe esserci un modo per specificare un percorso per quel file.

Questi sono 2 modi (ce ne sono sicuramente altri) per aggiungere set di stili ckeditor personalizzati usando il modulo drupal wyswiwyg.

1. Utilizzo del modulo contribuito Stili ckeditor
2. Utilizzando hook_wysiwyg_editor_settings_alter come segue:

(codice "ispirato" dal modulo ckeditor_styles)

In un modulo personalizzato aggiungi l'implementazione hook_wysiwyg_editor_settings_alter:

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 *
 * @param type $settings
 * @param type $context
 */
function MYCUSTOMMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  // We only add the settings to ckeditor wysiwyg profiles.
  if ($context['profile']->editor == 'ckeditor') {
    $format = $context['profile']->format;
    $path = drupal_get_path('module', 'MYCUSTOMMODULE') . '/js';
    $settings['stylesSet'] = "mycustomstyleset:/$path/ckeditor_styles.js";
  }
}

e aggiungi un file chiamato ckeditor_styles.js in una sottodirectory js del modulo personalizzato:

CKEDITOR.stylesSet.add('mycustomstyleset',
  [
    { name : 'Red', element : 'span', styles : {'color' : 'red' } },
    { name : 'CSS Style', element : 'span', attributes: { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } },
    { name : 'Heading 4' , element : 'h4' },
    { name : 'Blue Button', element : 'div', attributes : { 'class' : 'blue-button' } },
  ]);

Lo faccio sempre per i miei siti Drupal! La risposta di @mogragravy è un primo passo, ma potresti anche voler fare cose come aggiungere le corrispondenti regole css al tuo CKEditor, in modo che quando il tuo editor stia applicando uno dei tuoi stili personalizzati, l'editor li applichi effettivamente e l'editore può vedere in anteprima il modifiche, senza dover salvare!

Di recente ho scritto un post sul blog molto dettagliato su tutte le parti mobili qui: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

Quello che tratterò nel tutorial è

1. Come personalizzare la barra degli strumenti

2. Creazione del file ckeditor.styles.js personalizzato. Ecco un esempio:

    CKEDITOR.addStylesSet( 'drupal',
    [
    /* Block Styles */
    { name : 'Heading 2'        , element : 'h2' },
    { name : 'Heading 3'        , element : 'h3' },
    { name : 'Heading 4'        , element : 'h4' },
    { name : 'Paragraph'        , element : 'p' },
    { name : 'Blue Image Button',
    element : 'div',
    attributes : {
    'class' : 'blue-image-button' }
    },
   
    /* Inline Styles */
    { name : 'Inline Quotation'    , element : 'q' },
     ...
   

3. Configurazione di CKEditor in modo che sappia dove trovare questo file di stili personalizzati

4. Implementare il css corrispondente in questi stili e far conoscere anche a CKEditor!

5. Come utilizzare l'installazione come editor!

Spero sia utile! Facci sapere se riesci a farlo funzionare!

Ho appena scritto un piccolo modulo personalizzato. Sto usando il modulo Wysiwyg (piuttosto che il modulo CKEditor). Ciò consente quindi di caricare gli stili di ckeditor.styles.js nel mio tema.

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $path = drupal_get_path('theme', 'THEMENAME');
    $settings['stylesSet'] = "drupal:/$path/ckeditor.styles.js";
  }
}

È possibile definire gli stili nelle impostazioni del profilo WYSIWYG (admin / config / content / wysiwyg, modificare il profilo desiderato).

Scheda "CSS"> "Classi CSS"

Facoltativamente, definire le classi CSS per l'elenco a discesa "Stile carattere".

Immettere una classe su ogni riga nel formato: [etichetta] = [elemento]. [Classe]. Esempio: Title = h1.title

Se lasciato vuoto, le classi CSS vengono importate automaticamente dai fogli di stile caricati. Utilizza gli stili Imposta internamente.

Basta inserire il file ckeditor.styles.js sovrascritto nella radice del tema, quindi andare su / admin / config / content / ckeditor / edit / , quindi per ciascuno dei profili, modificarli e aprire il set di campi css , trovare il Campo stili predefiniti e selezionare Usa tema ckeditor.styles.js .

Dalla guida del campo * Predefined Style *:

Definire il percorso del file ckeditor.styles.js. Viene utilizzato dall'elenco a discesa Stile disponibile nella barra degli strumenti predefinita. Copia il file sites / all / modules / contrib / ckeditor / ckeditor.styles.js nella directory del tuo tema (themes / seven / ckeditor.styles.js) e adattalo alle tue esigenze.