WYSIWYG modüllü özel ckeditor.styles.js dosyası

WYSIWYG modülü aracılığıyla CKeditor "Yazı tipi stili" açılan özelleştirmek için çalışıyorum, ama wysiwyg modülünün profil düzenleyicisinde ckeditor.styles.js için bir yol belirtmek için bir yol görmüyorum.

Daha fazla bilgi için bu gönderiye bakın - bu dosya için bir konum belirtmenin bir yolu olması gerektiğini söylüyor.

Bunlar, drupal wyswiwyg modülünü kullanarak özel ckeditor stil kümeleri eklemenin 2 yolu (kesinlikle daha fazlası var).

1. Katılan modül Ckeditor Styles'ı kullanma
2. Hook_wysiwyg_editor_settings_alter'ı aşağıdaki gibi kullanarak :

(ckeditor_styles modülü tarafından "ilham" kodu)

Özel bir modüle hook_wysiwyg_editor_settings_alter uygulamasını ekleyin:

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

ve özel modülün js alt dizinine ckeditor_styles.js adlı bir dosya ekleyin:

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

Bunu her zaman Drupal sitelerim için yapıyorum! @ marblegravy'nin cevabı ilk adımdır, ancak CKEditor'unuza karşılık gelen bir css kuralları eklemek gibi şeyler de yapmak isteyebilirsiniz, böylece düzenleyiciniz özel stillerinizden birini uygularken, düzenleyici bunları uygular ve düzenleyici değişiklikleri, kaydetmek zorunda kalmadan!

Geçenlerde burada tüm hareketli parçalar hakkında çok ayrıntılı bir blog yazısı yazdım: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

Öğreticide kapladığım şey

1. Araç çubuğunu özelleştirme

2. Özel ckeditor.styles.js dosyası oluşturma. İşte bir örnek:

    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. CKEditor'ınızı bu özel stiller dosyasını nerede bulacağını bilecek şekilde yapılandırma

4. Karşılık gelen css'i bu stillere uygulamak ve CKEditor'a bunları da bildirmek!

5. Kurulum bir editör olarak nasıl kullanılır!

Umarım faydalıdır! Bu işe yararsa bize bildirin!

Az önce küçük bir özel modül yazdım. Wysiwyg modülünü kullanıyorum (CKEditor modülü yerine). Bu, daha sonra temamdaki ckeditor.styles.js stillerinin yüklenmesini sağlar.

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

Stilleri WYSIWYG profil ayarlarında tanımlayabilirsiniz (admin / config / content / wysiwyg, istediğiniz profili düzenleyin).

"CSS" sekmesi> "CSS sınıfları"

İsteğe bağlı olarak "Yazı tipi stili" açılır listesi için CSS sınıflarını tanımlayın.

Her satıra şu biçimde bir sınıf girin: [label] = [element]. [Sınıf]. Örnek: Title = h1.title

Boş bırakılırsa, CSS sınıfları yüklenen stil sayfalarından otomatik olarak içe aktarılır. StylesSet ayarını dahili olarak kullanır .

Geçersiz kılınmış ckeditor.styles.js dosyanızı temanızın köküne koyun, ardından / admin / config / content / ckeditor / edit / öğesine gidin , ardından profillerinizin her biri için bunları düzenleyin ve css alan kümesini açın , Önceden tanımlanmış Stiller alanını seçin ve ckeditor.styles.js temasını kullan'ı seçin .

* Önceden Tanımlı Stil * alan yardımından:

Ckeditor.styles.js dosyasının konumunu tanımlayın. Varsayılan araç çubuğunda bulunan Stil açılır listesi tarafından kullanılır. Sites / all / modules / antl / ckeditor / ckeditor.styles.js dosyasını tema dizininize (themes / seven / ckeditor.styles.js) kopyalayın ve ihtiyaçlarınıza göre ayarlayın.