شاید برای شماهم اتفاق افتاده باشد که بخواهید در پروژه های خود از یک ادیتور متن که همچون برنامه Word دارای امکانات بیشماری باشد داشته باشد و یا همراه آن یک فایل مننجر برای آپلود تصاویر و یا فایل های خود به همراه مدیریت بر روی آنها به همراه این امکان که بتوانید سورس کدهای برنامه های خود را جهت آموزش در اختیار سایرین بگذارید. ما امروز برایتان همه این ها را کنار هم جمع آوری نموده ایم طرز استفاده از آنها و تنظیمات آنهارا برایتان قرار داده ایم. پس در ادامه با بخش آموزش حساس کامپیوتر همراه باشید.
نکته: پس از مطالعه این آموزش ما را از نظر خود آگاه سازید.
ادیتور متن پرقدرت CKEditor :
1- ابتدا میبایستی آخرین نسخه برنامه CKEditor را از اینجا دانلود نمائید.
2- حال فایل دانلود شده را در پروژه خود کپی نمائید.
3- در پوشه ckeditor فایل config.js را کپی و در یک پوشه جدید که با نام custom ایجاد میکنید کپی نمائید.
4- حال فایل config.js را به نام editor_custom_config.js تغییر اسم دهید.
5- حال فایل editor_custom_config.js را در برنامه Adobe Dreamweaver باز نمائید.
6- حال کلیه اطلاعاتی که در فایل editor_custom_config.js میباشد را حذف کنید و مجموعه کد زیر را در آن کپی نمائید.
/**
* @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
* For Manager Farsi, see https://hassas-computer.ir/?subdomain=pc&post=238
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// Full Active Tools in CKEditor: Hamid Hassas
// تعیین زبان فارسی برای محیط برنامه
config.language = 'fa';
// تعیین یک پوسته به دلخواه خود برای ظاهر برنامه
config.skin= 'moonocolor',
// تعین زبان نوشتاری از راست به چپ
config.contentsLangDirection= 'rtl',
// غیر فعال کردن تغییر سایز در برنامه
config.resize_enabled= false,
// حذف پلاگین تعیین موقعیت متون در استاتوس بار برنامه
//config.removePlugins = 'elementspath';
// تعیین قلم پیش فرض نگارش
config.font_defaultLabel = 'Tahoma';
// تعیین سایز قلم نوشتاری
config.fontSize_defaultLabel = '12px';
// تعیین آدرس قرارگیری فونت های جدید:
config.contentsCss = '/ckeditor/CustomFonts/font.css';
//افزودن قلم های جدید به ویرایشگر
//config.font_names = '<نام نمایش قلم>/<نام قلم شما>;' + config.font_names;
config.font_names = 'B Homa/B Homa;B Mitra/B Mitra;B Nazanin/B Nazanin;B Titr/B Titr;' + config.font_names;
// انتخاب رنگ منو های ابزار در برنامه
config.uiColor = '#AADC6E';
// تعیین میزان عرض ادیتور متن
config.width='650px';
// تعیین میزان ارتفاع ادیتور برنامه
config.height='300px';
// افزودن پلاگین های جدید به برنامه
config.extraPlugins = "syntaxhighlight,codemirror,ckwebspeech";
// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.
// نمایش کلیه امکانات در منو ابزار برنامه
config.toolbar = [
{ name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'ExportPdf', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField', '-', 'Syntaxhighlight' ] },
'/',
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'about', items: [ 'About' ] }
];
};
/**
* @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/
7- حال یک فایل مثلا Example.php ایجاد نمائید و در قسمت header کد های زیر را با توجه به آدرس وجود فایل های آن بر روی هاست خود وارد نمائید.
8- حال در فایل مورد نظر خود یک textarea ایجاد نمائید با مشخصات زیر:
9- حال کد زیر را در زیر قسمت textarea درج نمائید.
10- حال فایل خود را زخیره و اجرا نمائید. اکنون برنامه CKEditor نصب و فعال شده است.
مدیریت فایل ها با CKFinder :
11- برای استفاده از CKFinder میبایستی پس از نصب برنامه CKEditor و فعال شدن آن ابتدا برنامه CKFinder را از اینجا دانلود نمائید.
برای خرید لایسنس برنامه به اینجا مراجعه نمائید.
12- برنامه را در کنار بر نامه CKEditor کپی کنید. دقت نمائید در کنار هم یعنی فایل های هر برنامه در پوشه هایی جدا از هم قرار گرفته باشند.
13- حال وارد پوشه برنامه CKfinder شوید و حال فایل config.php را در برنامه Adobe Dreamweaver باز نمائید.
14- دنبال کدهای زیر بگردید و مقادیر آنها را به صورت زیر تغییر دهید.
1600,
'maxHeight' => 1200,
'quality' => 80,
'sizes' => array(
'small' => array('width' => 480, 'height' => 320, 'quality' => 80),
'medium' => array('width' => 600, 'height' => 480, 'quality' => 80),
'large' => array('width' => 800, 'height' => 600, 'quality' => 80)
)
);
/*=================================== Backends ========================================*/
// در این بخس نام پوشه و آدرس پوشه تصاویر بر روی هاست را وارد نمائید
$config['backends'][] = array(
'name' => 'default',
'adapter' => 'local',
'baseUrl' => '/images/images_upload/',
'chmodFiles' => 0777,
'chmodFolders' => 0755,
'filesystemEncoding' => 'UTF-8',
);
/*================================ Resource Types =====================================*/
// در این بخس نام پوشه و آدرس پوشه فایلهایی که بر روی هاست میخواهید توسط برنامه بارگیری شود را وارد نمائید
$config['defaultResourceTypes'] = '';
$config['resourceTypes'][] = array(
'name' => 'Files', // Single quotes not allowed.
'directory' => '',
'maxSize' => 0,
'allowedExtensions' => '7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip',
'deniedExtensions' => '',
'backend' => 'default'
);
$config['resourceTypes'][] = array(
'name' => 'Images', // عنوان پوشه برای نمایش در اسکریپت
'directory' => 'matlab', // نام پوشه فرعی در زیرشاخه اصلی برای بارگذاری فایل تصاویر
'maxSize' => 0,
'allowedExtensions' => 'bmp,gif,jpeg,jpg,png',
'deniedExtensions' => '',
'backend' => 'default'
);
/*================================ Access Control =====================================*/
// در این قسمت می توانید با فعال و غیر فعال نمودن هر بخش اسکریپت را کنترل کنید
// مثلا میتوانید اجازه حذف نمودن فایل ها توسط کاربر در اسکریپ را فعال یا غیر فعال کنید
$config['accessControl'][] = array(
'role' => '*',
'resourceType' => '*',
'folder' => '/',
'FOLDER_VIEW' => true,
'FOLDER_CREATE' => true,
'FOLDER_RENAME' => true,
'FOLDER_DELETE' => true,
'FILE_VIEW' => true,
'FILE_CREATE' => true,
'FILE_RENAME' => true,
'FILE_DELETE' => true,
'IMAGE_RESIZE' => true,
'IMAGE_RESIZE_CUSTOM' => true
);
توضیح: در جایی که متغیر baseUrl$ میباشد آدرس پوشه ای را بدهید که میخواهید تصاویر و فایل های شما در آنجا آپلود شود. آدر فوق در کد بالا در زمان فراخوانی فایل های مدنظر شما به صورت http://YourAdress.com/images میشود.
15- حال فایلی که در آن برنامه CKEditor را اجرا کردید باز نماید و زیر قسمتی که در هدر کد CKEditor را درج کرده اید ( مرحله 7 ) کد زیر را با در نظر گرفتن آدرس دقیق برنامه بر روی هاست خود وارد نمائید.
16- حال در کدی که آن را در زیر قسمت textarea درج کرده اید ( مرحله 9 ) کد زیر را اضافه کنید.
CKFinder.setupCKEditor(null, '../script/ckfinder/');
توجه: کد بالا به صورت زیر میباشد. و همچنین به آدرسی که در آن است دقت نمائید و آدرس باید با محل قرار گیری برنامه CKFinder یکی باشد.
17- حال اگر کلیه مراحل را صحیح انجام داده باشید هنگامی که فایل خود را زخیره و اجرا نمائید در منو ابزار های برنامه CKEditor ابزار تصویر
گزینه فهرست یابی سرور فعال میشود.
افزودنه Syntax Highlight :
18- پس از انجام کلیه کار های بالا برای اینکه بتوانید سورس کد های برنامه های خود را به صورتی که در برنامه Adobe Dreamweaver با تفکیک رنگ برای سایرین به نمایش بگذارید میبایستی برنامه Syntaxhighlighter را از اینجا دانلود نمائید.
19- فایل دریافتی خود را در پوشه برنامه CKEditor در شاخه plugins کپی نمائید. پس از کپی آدرس برنامه دسترسی به آن به صورت زیر میبایستی باشد آن را چک نمائید.
ckeditor/plugins/syntaxhighlight
20- حال وارد پوشه custom شوید و فایل editor_custom_config.js را در برنامه Adobe Dreamweaver باز نمائید. و کد زیر را در درون قسمت CKEDITOR.editorConfig = function( config ) زیر کد config.language اضافه نمائید .
config.extraPlugins = "syntaxhighlight";
21- سپس گزینه Syntaxhighlight را در قسمت config.toolbar همانند سایر کد های موجود در آن اضافه نمائید و فایل را ذخیره کنید.
23- حال پروژه خود را اجرا نمائید در منو ابزار برنامه CKEditor یک گزینه به این 
شکل افزوده شده است. حال آماده استفاده از آن شوید.
توجه: برای اینکه سورس کدهایی که بر روی سایت برای نمایش عموم قرارداده اید به صورت صحیح نمایش داده شود میبایستی SyntaxHighlighter Managment را بر روی قالب وبسایت خود نصب نمائید.
افزودن سورس کدهای برنامه نویسان به پروژه های خود با Syntax Highlighter :
24- جهت نصب SyntaxHighlighter Managment ابتدا آن را از اینجا دانلود نمائید.
25- حال آن را در کنار پوشه های CKEditor و CKFinder کپی نمائید.
26- حال در قسمت header قالب سایت خود کد های زیر را با در نظر گرفتن آدرس دقیق برنامه بر روی هاست خود وارد نمائید.
27- حال اگر همه مراحل را به درستی انجام داده باشید میتوانید با خیال راحت اقدام به انتشار مطالب خود نمائید.
دانلود سورس کد آماده CKEditor + CKFinder + Syntax Highlight
منبع: دنیای فناوری با حساس کامپیوتر
