ไฟล์ ckeditor.styles.js ที่กำหนดเองพร้อมโมดูล WYSIWYG

ฉันกำลังพยายามปรับแต่ง "แบบอักษร" ดรอปดาวน์ใน CKeditor ผ่านโมดูล WYSIWYG แต่ฉันไม่เห็นวิธีระบุเส้นทางสำหรับ ckeditor.styles.js ในตัวแก้ไขโปรไฟล์โมดูล wysiwyg

อ้างถึงโพสต์นี้สำหรับข้อมูลละเอียดเพิ่มเติม - มันบอกว่าควรมีวิธีการระบุตำแหน่งสำหรับไฟล์นั้น

เหล่านี้มี 2 วิธี (มีอย่างแน่นอน) เพื่อเพิ่มสไตล์ ckeditor ที่กำหนดเองโดยใช้โมดูล drupal wyswiwyg

1. ใช้โมดูลCkeditor Styles ที่สนับสนุน
2. ใช้hook_wysiwyg_editor_settings_alterดังต่อไปนี้:

(รหัส "เป็นแรงบันดาลใจ" โดยโมดูล ckeditor_styles)

ในโมดูลที่กำหนดเองเพิ่มการใช้งาน 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";
  }
}

และเพิ่มไฟล์ชื่อ ckeditor_styles.js ในไดเรกทอรีย่อย js ของโมดูลที่กำหนดเอง:

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

ฉันทำสิ่งนี้กับเว็บไซต์ Drupal ตลอดเวลา! คำตอบ @ marblegravy เป็นขั้นตอนแรก แต่คุณอาจต้องการทำสิ่งต่าง ๆ เช่นเพิ่มกฎ css ที่สอดคล้องกับ CKEditor ของคุณเพื่อให้เมื่อตัวแก้ไขของคุณใช้หนึ่งในรูปแบบที่กำหนดเองของคุณตัวแก้ไขจะใช้จริงและตัวแก้ไขสามารถดูตัวอย่าง การเปลี่ยนแปลงโดยไม่ต้องบันทึก!

ฉันเพิ่งเขียนโพสต์บล็อกที่มีรายละเอียดมากเกี่ยวกับชิ้นส่วนที่เคลื่อนไหวทั้งหมดที่นี่: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

สิ่งที่ฉันครอบคลุมในการสอนคือ

1. วิธีปรับแต่งแถบเครื่องมือ

2. การสร้างไฟล์ ckeditor.styles.js ที่กำหนดเอง นี่คือตัวอย่าง:

    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 ของคุณเพื่อให้ทราบว่าจะหาไฟล์สไตล์ที่กำหนดเองนี้ได้ที่ใด

4. ใช้ css ที่สอดคล้องกับสไตล์เหล่านี้และให้ CKEditor รู้เกี่ยวกับสิ่งเหล่านี้ด้วย!

5. วิธีใช้การตั้งค่าเป็นเครื่องมือแก้ไข!

หวังว่ามันจะเป็นประโยชน์! แจ้งให้เราทราบหากคุณได้งานนี้!

ฉันเพิ่งเขียนโมดูลที่กำหนดเองเล็ก ๆ ฉันใช้โมดูล Wysiwyg (แทนที่จะเป็นโมดูล CKEditor) สิ่งนี้จะเปิดใช้งานการโหลดสไตล์จาก ckeditor.styles.js ในธีมของฉัน

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

คุณสามารถกำหนดรูปแบบในการตั้งค่าโปรไฟล์ WYSIWYG (admin / config / content / wysiwyg แก้ไขโปรไฟล์ที่ต้องการ)

แท็บ "CSS"> "CSS คลาส"

เลือกกำหนดคลาส CSS สำหรับรายการแบบหล่นลง "รูปแบบตัวอักษร"

ป้อนหนึ่งคลาสในแต่ละบรรทัดในรูปแบบ: [label] = [องค์ประกอบ] [class] ตัวอย่าง: Title = h1.title

หากเว้นว่างไว้คลาส CSS จะถูกอิมพอร์ตโดยอัตโนมัติจากสไตล์ชีทที่โหลด ใช้การตั้งค่าstylesSetภายใน

เพียงแค่ใส่ไฟล์ckeditor.styles.js ที่ถูกแทนที่ในรูทของธีมของคุณจากนั้นไปที่/ admin / config / content / ckeditor / edit /จากนั้นสำหรับแต่ละโปรไฟล์ของคุณแก้ไขและเปิดcss fieldset ค้นหาที่กำหนดไว้ล่วงหน้ารูปแบบข้อมูลและเลือกใช้ ckeditor.styles.js

จากวิธีใช้ฟิลด์ * สไตล์ที่กำหนดไว้ล่วงหน้า *:

กำหนดตำแหน่งของไฟล์ ckeditor.styles.js มันถูกใช้โดยรายการแบบหล่นลงสไตล์ที่มีอยู่ในแถบเครื่องมือเริ่มต้น คัดลอกไฟล์ sites / all / modules / contrib / ckeditor / ckeditor.styles.js ไปยังไดเร็กทอรีธีมของคุณ (themes / seven / ckeditor.styles.js) และปรับให้เข้ากับความต้องการของคุณ