آموزش برنامه نویسی

موضوعات آموزش

ورود به سیستم

سایر مطالب

رادیو موزیک آنلاین

نماد اعتماد

جذابترین های این بخش

مطالب هم شاخه

آیا میدانستید؟

خدمات

گزارشات

سیستم عامل: Unknown OS Platform
مرورگر شما: Unknown Browser
کشور شما: United States
موقعیت شما: 54.156.32.65

بازدید دیروز: 0
بازدید کننده دیروز: 0
بازدید امروز: 2880
بازدید کننده امروز: 1438
بازدید کل تا به امروز: 1904048

GPS آنلاین

مسیر یاب آنلاین آسان

تبلیغات

دانلود دفترچه راهنمای مدار سیم کشی برق موتورسیکلت

تبلیغات

دانلود دفترچه راهنمای سرویس و نگهداری موتورسیکلت آپاچی 180 و آپاچی 160

تبلیغات

دانلود دفترچه راهنمای سرویس و نگهداری موتورسیکلت تریل سوزوکی

تبلیغات

تبلیغات

دانلود دفترچه راهنمای سرویس و نگهداری موتورسیکلت هندا

آموزش > آموزش برنامه نویسی >  پرکاربردترین نکته ها برنامه نویس > 

آموزش استفاده از ادیتور متن CKEditor + فایل منیجر CKFinder + پلاگین Syntax Highlight

شاید برای شماهم اتفاق افتاده باشد که بخواهید در پروژه های خود از یک ادیتور متن که همچون برنامه 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-2014, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */
CKEDITOR.editorConfig = function( config ) {
  // تعیین زبان فارسی برای محیط برنامه
  config.language = 'fa';
  // تعیین یک پوسته به دلخواه خود برای ظاهر برنامه
  config.skin= 'moonocolor',
  // تعین زبان نوشتاری از راست به چپ
  config.contentsLangDirection= 'rtl',
  // غیر فعال کردن تغییر سایز در برنامه
  config.resize_enabled= false,
  // حذف پلاگین تعیین موقعیت متون در استاتوس بار برنامه
  //config.removePlugins = 'elementspath';
  // انتخاب رنگ منو های ابزار در برنامه
  //config.uiColor = '#AADC6E';
  // تعیین میزان عرض ادیتور متن
  config.width='800px'
  // تعیین میزان ارتفاع ادیتور برنامه
  config.height='300px'
  // افزودن پلاگین های اضافه به ادیتور
  config.extraPlugins = "syntaxhighlight,codemirror";
  // نمایش کلیه امکانات در منو ابزار برنامه
  config.toolbar = [
   { items:[
   'Templates', 'clipboard', 'Cut', 'Paste',  'Redo', 'Undo','Find', '-',
   'basicstyles', 'cleanup', 'Link', 'Unlink', 'Iframe', 'Anchor','Image', 'Smiley',
   'Flash', 'Table', 'SpecialChar', 'Syntaxhighlight', 'HorizontalRule', 'PageBreak',
   'ShowBlocks','-', 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select',
   'Button', 'ImageButton', 'Blockquote' , 'Maximize', 'Preview'] },
   { items: [
   'Format', 'Font', 'FontSize','-','Bold', 'Italic', 'Underline', 'Strike', '-',
   'Subscript', 'Superscript', '-','NumberedList', 'BulletedList', 'Indent', 'Outdent',
   '-', 'JustifyBlock', 'JustifyRight', 'JustifyCenter','JustifyLeft', 'BidiRtl',
   'BidiLtr', 'TextColor', 'BGColor', 'Source' ] }
  ];
};
/**
 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

 

7- حال یک فایل مثلا Example.php ایجاد نمائید و در قسمت header کد های زیر را با توجه به آدرس وجود فایل های آن بر روی هاست خود وارد نمائید.

<script src="../script/ckeditor/ckeditor.js" type="text/javascript"></script>

 

8- حال در فایل مورد نظر خود یک textarea ایجاد نمائید با مشخصات زیر:

<textarea name="full_text" cols="100" rows="10" id="full_text"></textarea>

9- حال کد زیر را در زیر قسمت textarea درج نمائید.

<script>
 CKEDITOR.replace( 'full_text', {
 customConfig: 'custom/editor_custom_config.js',
 });
</script>

10- حال فایل خود را زخیره و اجرا نمائید. اکنون برنامه CKEditor نصب و فعال شده است.

 

 

مدیریت فایل ها با CKFinder :

11- برای استفاده از CKFinder میبایستی پس از نصب برنامه CKEditor و فعال شدن آن ابتدا برنامه CKFinder را از اینجا دانلود نمائید.

12- برنامه را در کنار بر نامه CKEditor کپی کنید. دقت نمائید در کنار هم یعنی فایل های هر برنامه در پوشه هایی جدا از هم قرار گرفته باشند.

13- حال وارد پوشه برنامه CKfinder شوید و حال فایل config.php را در برنامه Adobe Dreamweaver باز نمائید.

14- دنبال کد های زیر بگردید و مقادیر آنها را به صورت زیر تغییر دهید.

$config['LicenseName'] = '';
$config['LicenseKey'] = '';
$baseUrl = '/images/';
$baseDir = resolveUrl($baseUrl);
$config['CheckDoubleExtension'] = true;
$config['FilesystemEncoding'] = 'UTF-8';
$config['SecureImageUploads'] = true;
$config['CheckSizeAfterScaling'] = true;

توضیح: در جایی که متغیر baseUrl$ میباشد آدرس پوشه ای را بدهید که میخواهید تصاویر و فایل های شما در آنجا آپلود شود. آدر فوق در کد بالا در زمان فراخوانی فایل های مدنظر شما به صورت http://YourAdress.com/images میشود.

15- حال فایلی که در آن برنامه CKEditor را اجرا کردید باز نماید و زیر قسمتی که در هدر کد CKEditor را درج کرده اید ( مرحله 7 ) کد زیر را با  در نظر گرفتن آدرس دقیق برنامه بر روی هاست خود وارد نمائید.

<script src="../script/ckfinder/ckfinder.js"type="text/javascript"></script>

16- حال در کدی که آن را در زیر قسمت textarea درج کرده اید ( مرحله 9 ) کد زیر را اضافه کنید.

CKFinder.setupCKEditor(null, '../script/ckfinder/');

توجه: کد بالا به صورت زیر میباشد. و همچنین به آدرسی که در آن است دقت نمائید و آدرس باید با محل قرار گیری برنامه CKFinder یکی باشد.

<script>
 CKEDITOR.replace( 'full_text', {
 customConfig: 'custom/editor_custom_config.js',
 });
 CKFinder.setupCKEditor(null, '../script/ckfinder/');
</script> 

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 قالب سایت خود کد های زیر را با در نظر گرفتن آدرس دقیق برنامه بر روی هاست خود وارد نمائید.

<link rel="stylesheet" type="text/css" href="script/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shAutoloader.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushAppleScript.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushAS3.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushColdFusion.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushErlang.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushJavaFX.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushPowerShell.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushSass.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="script/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>

27- حال اگر همه مراحل را به درستی انجام داده باشید میتوانید با خیال راحت اقدام به انتشار مطالب خود نمائید.

 

دانلود سورس کد  آماده CKEditor + CKFinder + Syntax Highlight


نام: 2145
ایمیل:
سایت:


1

مسعود حجتی زاده 1396/04/19

با سلام من وقتی از کدهایی که شما گذاشتید در نسخه full استفاده میکنم چیزی نمیاره وقتی کدهای شما رو برمیدارم میاره در ضمن تفاوت نسخه استاندارد و فول چی هست؟

در امکانات و سرعت بارگذاری است.


1

nahid 1396/01/31

سلام چجوری میشه برای تگ a خاصیت title گذاشت ؟

در تب پیشرفته ( advance ) در قسمت فیلد کمکی میتوانید title را وراد نمائید.


sina 1395/11/04

سلام من هم مشکل محمد رو دارم تو لوکال همچی اوکی هست ولی رو سرور وقتی روی browse server کلیک میکنم اخطار invalid request رو میده.با پشتیبانی هاست تماس بگیریم اوکی میشه ؟

لبتدا برنامه TeamViewer نصب و سپس بین ساعت 14 الی 16 با شماره 09367147548 تماس بگیرید.


مهدی حسامی 1395/03/08

سلام دوستانیکه با فایل کانفیگ سفارشی مشکل دارن و نمی تونن زبان ادیتور رو فارسی کنند از کد زیر استفاده کنن : ( در صورتیکه از این کد استفاده کنید دیگر لزومی به ایجاد فایل کانفیگ سفارشی ندارید با آرزوی موفقیت

CKEDITOR.replace( 'full_text', { language: 'fa' });


saeede 1395/02/30

این دستور config.contentsLangDirection= 'rtl', رو داره تو فایلی که تو پوشه custom گذاشتیم بنام editor_custom_config.js

درسته به حالت پیش فرض موقعیت از راست به چپ تعیین گردیده است.


saeede 1395/02/30

ممنونم خیلی عالی بود. فقط محیط ckeditor رو نمیتونم راست به چپ کنم. لطفا راهنمایی بفرمایید. تشکر

با دستور زیر در فایل کانفیگ می توانید این کار را انجام دهید.

config.contentsLangDirection= 'rtl',


محمد 1394/10/20

سلام مطلبتون بسیار عالیست ولی من ی مشکلی دارم و وقتی همه ی این موارد انجام میدم روی لوکال بخوبی کار می کند ولی وقتی بر روی سرور آپلود می کنم اون بخش browse server رو که میزنم به من پیغام invalid request میده و ckfinder اجرا نمیشه ممنون میشم راهنمایی کنید

 با پشتیبانی هاست خود تماس بگیرید.


شکو 1394/09/18

خیلی عالی بود، ممنون از سایت خوبتون


leon7394 1394/05/09

عالی بود ، مرسی


parsa 1394/04/27

دروود بر شما این همه فایل جاوا رو باید به بالا سایتمون اضافه کنیم تا اجرا بشه ؟ ؟ ؟

بله باید تمامی مراحل را به ترتیت انجام دهید


sara 1393/10/14

سلام برای asp.net mvc هم به همین روش انجام میشه؟

بله برای ASP هم به همین صورت میباشد