WYSIWYG মডিউল সহ কাস্টম ckeditor.styles.js ফাইল

Question

আমি ডাব্লুওয়াইএসআইওয়াইওয়াইজি মডিউলের মাধ্যমে সি কেডিটরে "ফন্ট স্টাইল" ড্রপডাউনটি কাস্টমাইজ করার চেষ্টা করছি, তবে আমি উইসইউইজি মডিউলটির প্রোফাইল সম্পাদকটিতে ckeditor.styles.js এর জন্য কোনও পথ নির্দিষ্ট করার কোনও উপায় দেখতে পাচ্ছি না।

আরও তথ্যের জন্য এই পোস্টটি দেখুন - এটি বলছে যে সেই ফাইলের জন্য কোনও অবস্থান নির্দিষ্ট করার উপায় থাকতে হবে।

Answer 1

ড্রুপাল উইসভিউইগ মডিউলটি ব্যবহার করে কাস্টম সিকিডেটর স্টাইলসেট যুক্ত করার জন্য এটি দুটি উপায় (অবশ্যই আরও রয়েছে)।

1. অবদানযুক্ত মডিউল কেকডিটার স্টাইলগুলি ব্যবহার করে
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 নামের একটি ফাইল যুক্ত করুন:

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

Comments

আমি সত্যিই এটি কাজ করতে চেয়েছিলেন। আমাকে এখানে ব্যবহৃত স্টাইলসেট ফাইলের আপেক্ষিক পাথের পরিবর্তে একটি পূর্ণ পথ ব্যবহার করতে হবে, অন্যথায় উইসুইগ অদৃশ্য হয়ে যাবে। তবুও, তখন স্টাইলস ড্রপডাউনটি অক্ষম করা হয়েছিল এবং আমি কারণটি খুঁজে বের করতে পারি না।

— ডিজিটগোফার

গ্লোবাল $ বেস_আরলকে ভুলে যাবেন না: mycustomstyleset:$base_url/$path/ckeditor_styles.js

— কমনপাইক

@ কম্পনপাইক আপনার প্রয়োজন নেই$base_url

— ফেলিক্স ইভ

Answer 2

আমি আমার ড্রুপাল সাইটের জন্য সর্বদা এটি করি! @ মার্বেলগ্রাভির উত্তর প্রথম পদক্ষেপ, তবে আপনি আপনার সি কেএডিটরে কোনও প্রাসঙ্গিক CSS বিধি যুক্ত করার মতো জিনিসগুলি করতেও চাইবেন, যাতে আপনার সম্পাদক যখন আপনার কাস্টম শৈলীর একটি প্রয়োগ করেন, তখন সম্পাদকটি আসলে সেগুলি প্রয়োগ করে এবং সম্পাদক পূর্বরূপ দেখতে পারে পরিবর্তন, সংরক্ষণ না করে!

আমি সম্প্রতি এখানে সমস্ত চলন্ত অংশ সম্পর্কে একটি খুব বিস্তারিত ব্লগ পোস্ট লিখেছি: 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 কনফিগার করে যাতে এই কাস্টম শৈলীর ফাইলটি কোথায় পাওয়া যায় knows

4. এই স্টাইলগুলির সাথে সম্পর্কিত সিএসএস বাস্তবায়ন করা, এবং সি কেএডিটরকে এগুলি সম্পর্কেও জানাতে দিন!

5. কীভাবে সম্পাদক হিসাবে সেটআপ ব্যবহার করবেন!

আশা করি এটি সহায়ক! আপনি যদি এই কাজটি পান তবে আমাদের জানান!

Comments

আপনি যেখানে পদক্ষেপ 3 করবেন না, CKEditor কে কাস্টম ckeditor.styles.js ফাইল সম্পর্কে জানাতে দিন ।

— বাটন্দওয়া

এই উত্তরটি সঠিক নয়। প্রশ্নটি কীভাবে এটি দ্রুপাল উইসিউইগ মডিউল ব্যবহার করে সমাধান করা যায় তবে লেখক কীভাবে দ্রুপাল সি কেইডিটর মডিউলটি ব্যবহার করে এটি সমাধান করবেন। দুটি ভিন্ন জিনিস। Wysiwyg মডিউলটিতে অতিরিক্ত কাস্টম.স্টাইল.জেএস ফাইল যুক্ত করার কোনও বিকল্প নেই

— বাটিগলিক্স

Answer 3

আমি কেবল একটি ছোট্ট কাস্টম মডিউল লিখেছি। আমি উইসিউইগ মডিউলটি ব্যবহার করছি (সিকেডিটর মডিউলের চেয়ে)) এটি তখন আমার থিমের 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";
  }
}

Comments

এই উত্তর হওয়া উচিত !!!

— অ্যালেক্স গিল

Answer 4

আপনি ডাব্লুওয়াইএসআইওয়াইওয়াইজি প্রোফাইল সেটিংগুলিতে শৈলীর সংজ্ঞা দিতে পারবেন (অ্যাডমিন / কনফিগার / কনটেন্ট / ওয়াইসিওয়াইগ, পছন্দসই প্রোফাইল সম্পাদনা করুন)।

"সিএসএস" ট্যাব> "সিএসএস ক্লাস"

Fচ্ছিকভাবে "ফন্ট শৈলী" ড্রপডাউন তালিকার জন্য সিএসএস ক্লাস নির্ধারণ করুন।

বিন্যাসে প্রতিটি লাইনে একটি শ্রেণি প্রবেশ করান: [লেবেল] = [উপাদান] [[শ্রেণী]। উদাহরণ: শিরোনাম = h1.title

যদি ফাঁকা ছেড়ে যায়, সিএসএস ক্লাসগুলি স্বয়ংক্রিয়ভাবে লোড হওয়া স্টাইলশিট (গুলি) থেকে আমদানি করা হয়। অভ্যন্তরীণভাবে স্টাইলসেট সেটিংস ব্যবহার করে ।

Answer 5

আপনার থিমের মূলটিতে কেবল আপনার ওভাররাইড হওয়া ckeditor.styles.js ফাইলটি রাখুন , তারপরে / অ্যাডমিন / কনফিগারেশন / সামগ্রী / ckeditor / সম্পাদনা / এ যান , তারপরে আপনার প্রতিটি প্রোফাইলের জন্য, সেগুলি সম্পাদনা করুন এবং সিএসএস ফিল্ডসেট খুলুন , সন্ধান করুন পূর্বনির্ধারিত স্টাইলস ক্ষেত্র এবং থিম ckeditor.styles.js ব্যবহার করুন চয়ন করুন ।

* পূর্বনির্ধারিত স্টাইল * এর ক্ষেত্র সহায়তা থেকে:

Ckeditor.styles.js ফাইলের অবস্থান নির্ধারণ করুন। এটি স্টাইলের ড্রপ-ডাউন তালিকাটি ডিফল্ট সরঞ্জামদণ্ডে উপলব্ধ is আপনার থিম ডিরেক্টরিতে (থিম / সাত / ckeditor.styles.js) সাইট / সমস্ত / মডিউল / অবদান / ckeditor / ckeditor.styles.js ফাইল অনুলিপি করুন এবং এটি আপনার প্রয়োজনের সাথে সামঞ্জস্য করুন।

Comments

এই উত্তরটি সিকেইডিটর মডিউলের ব্যবহারও ধরে নিয়েছে, যা প্রশ্নটি ছিল তা নয়

— বাটিগলিক্স