<script>
$(document).ready(function() {
$('#Editor').ckeditor();
});
</script>
دستور ckeditor
متد ckeditor که در بالا استفاده شد، می تواند با دو پارامتر استفاده شود:
- یک callback function که بعد از آماده شدن ادیتور اجرا می شود
- مجموعه ای از option ها برای پیکربندی ادیتور
در ادامه درباره این پارامتر ها با مثال توضیحات بیشتری داده می شود.
پیکربندی (Configuration)
شما می توانید تنظیمات دلخواه را به CKEditor اعمال کنید. این تنظیمات می تواند شامل skin، آیتم ها و دکمه های toolbar، زبان، direction، height، فونت های ادیتور، default font و ... باشد. لیست کامل این تنظمیات را می توانید در این
لینک مشاهده کنید.
برای اعمال مجموعه تنظیمات می توانید هم از دستور ckeditor استفاده کنید و هم از فایل config.js در پوشه CKEditor.
مثال برای استفاده از فایل config.js:
CKEDITOR.editorConfig = function(config) {
config.skin = 'v2';
config.language = 'fa';
};
با اضافه کردن پارامتر های بالا در فایل config.js زبان ادیتور فارسی و پوسته ادیتور، پوسته v2 می شود.
وقتی شما ادیتور را با استفاده از config.js پیکربندی می کنید، هنگام load شدن صفحه، این فایل نیز به مرورگر ارسال می شود. برای کاهش زمان درخواست و ارسال این فایل (و به توصیه سازندگان) بهتر است تنظیمات ادیتور با استفاده از متد ckeditor انجام شود.
مثال:
$(document).ready(function() {
$('#Editor').ckeditor({ customConfig: '',language: 'fa', skin: 'v2' });
});
هر پارامتر دیگری را نیز به شیوه بالا می توان در این دستور استفاده کرد. پارامتر ها در {} قرار می گیرند و با , از هم جدا می شوند. مثل
height:'200px'
با استفاده از
costumeConfig:''
از load شدن config.js جلوگیری می شود.
callback function:
همانطور که ذکر شد، این تابع بعد از آماده شدن ادیتور اجرا می شود.
مثال:
$('#Editor').ckeditor(function() { alert ('Editor is ready'); },{skin:'v2'})همانطور که مشاهده می کنید در مثال بالا در متد ckeditor از هر دو پارامتر callback function و configuration settings استفاده شده است.
نکات بیشتر درباره پیکر بندی:
یکی از مسائلی که در رابطه با ادیتورها وجود دارد، نمایش و عدم نمایش دکمه های toolbar است. در CKEditor به سادگی می توانید دکمه های دلخواه خود را نمایش دهید. مثال زیر ادیتوری با تمام دکمه های toolbar را نمایش می دهد:
$('#Editor').ckeditor({ customConfig: '',
toolbar:[
['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
'/',
['Styles', 'Format', 'Font', 'FontSize'],
['TextColor', 'BGColor'],
['Maximize', 'ShowBlocks', '-', 'About']
]
});
به دسته بندی آیتم های toolbar با استفاده از [] و همچنین '/' دقت کنید.
در مثال زیر ادیتور با آیتم های انتخابی نمایش داده می شود:
$('#Editor').ckeditor({ customConfig: '',
toolbar:[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']
]
});
});
اگر از پارامتر toolbar استفاده نکنید، ادیتور با toolbar کامل نمایش داده می شود.
در مثال زیر ادیتور با مشخصات زیر نمایش داده می شود:
- امکان resize شدن ندارد
- جهت متن rtl است
- فونت پیش فرض Tahoma است
- زبان پیش فرض فارسی است
- دارای فونت های Tahoma و B Nazanin است
- دارای پوسته office2003 است
$('#Editor').ckeditor({ customConfig: '',
font_names: 'Tahoma;'+'B Nazanin;',
language: 'fa',
skin: 'office2003',
resize_enabled: false,
contentsLangDirection: 'rtl',
font_defaultLabel: 'Tahoma'
});
});
پوسته هایی که می توانید برای ادیتور استفاده کنید در فولدر skins قرار دارند.
در قسمت بعد به ارسال متن ادیتور به سرور می پردازیم.
پاسخ با نقل قول
نوشته شده توسط iman_ad
راه اندازی و استفاده از CKEditor با استفاده از jQuery و AJAX
