File ckeditor.styles.js kustom dengan modul WYSIWYG

Saya mencoba untuk menyesuaikan dropdown "Font style" di CKeditor melalui modul WYSIWYG, tapi saya tidak melihat cara untuk menentukan path untuk ckeditor.styles.js di editor profil modul wysiwyg.

Lihat posting ini untuk informasi lebih lanjut - dikatakan ada cara untuk menentukan lokasi untuk file itu.

Ini adalah 2 cara (pasti ada lebih banyak) untuk menambahkan styleset ckeditor khusus menggunakan modul drupal wyswiwyg.

1. Menggunakan modul Ckeditor Styles yang disumbangkan
2. Menggunakan hook_wysiwyg_editor_settings_alter sebagai berikut:

(kode "terinspirasi" oleh modul ckeditor_styles)

Dalam modul khusus tambahkan implementasi 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";
  }
}

dan tambahkan file bernama ckeditor_styles.js di sub direktori js dari modul khusus:

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' } },
  ]);

Saya melakukan ini untuk situs Drupal saya sepanjang waktu! @ Marblegravy jawaban adalah langkah pertama, tetapi Anda mungkin juga ingin melakukan hal-hal seperti menambahkan aturan css yang sesuai ke CKEditor Anda, sehingga ketika editor Anda menerapkan salah satu gaya kustom Anda, editor benar-benar menerapkannya dan editor dapat melihat pratinjau perubahan, tanpa harus menyimpan!

Baru-baru ini saya menulis posting blog yang sangat rinci tentang semua bagian yang bergerak di sini: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

Apa yang saya bahas dalam tutorial ini adalah

1. Bagaimana cara menyesuaikan toolbar

2. Membuat file ckeditor.styles.js khusus. Berikut ini contohnya:

    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. Mengkonfigurasi CKEditor Anda sehingga ia tahu di mana menemukan file gaya khusus ini

4. Menerapkan css yang sesuai dengan gaya ini, dan membiarkan CKEditor tahu tentang ini juga!

5. Cara menggunakan pengaturan sebagai editor!

Semoga bermanfaat! Beri tahu kami jika Anda berhasil!

Saya baru saja menulis modul kustom kecil. Saya menggunakan modul Wysiwyg (bukan modul CKEditor). Ini kemudian memungkinkan gaya dari ckeditor.styles.js di tema saya dimuat.

/**
 * 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";
  }
}

Anda dapat menentukan gaya dalam pengaturan profil WYSIWYG (admin / config / content / wysiwyg, edit profil yang diinginkan).

"CSS" tab> "kelas CSS"

Secara opsional tentukan kelas CSS untuk daftar turun bawah "Gaya font".

Masukkan satu kelas pada setiap baris dalam format: [label] = [elemen]. [Kelas]. Contoh: Judul = h1.title

Jika dibiarkan kosong, kelas CSS diimpor secara otomatis dari stylesheet yang dimuat. Menggunakan pengaturan stylesSet secara internal.

Cukup letakkan file ckeditor.styles.js Anda yang ditimpa di root tema Anda, lalu buka / admin / config / content / ckeditor / edit / , lalu untuk setiap profil Anda, edit dan buka fieldset css , temukan Kolom Gaya Standar dan pilih Gunakan tema ckeditor.styles.js .

Dari bantuan bidang * Gaya Predefined *:

Tentukan lokasi file ckeditor.styles.js. Ini digunakan oleh daftar drop-down Style yang tersedia di toolbar default. Salin file situs / semua / modul / contrib / ckeditor / ckeditor.styles.js ke direktori tema Anda (tema / tujuh / ckeditor.styles.js) dan sesuaikan dengan kebutuhan Anda.