آموزش کامل استفاده از ckeditor در php

در این پست به صورت کامل آموزش نحوه استفاده از CKEditor با قابلیت آپلود تصویر و Syntaxhighlighter را در php برایتان قرار داده ایم.

در پست های قبلی به صورت  آموزش کامل نحوه استفاده از CKEditor را در Asp.Net و MVC 5 در سایت قرار داده بودیم.

مراحل کار:

1. ابتدا میبایستی آخرین نسخه برنامه CKEditor را از اینجا دانلود نمائید.

نکته:

ما سورس کامل این فایل ها را برای دانلود قرار داده ایم.

2- در پوشه ckeditor ابتدا فایل config.js را با یک برنامه ویرایشگر متن باز کنید.

3- حال کلیه اطلاعاتی که در فایل config.js میباشد را حذف کنید و کدهای زیر را در آن کپی نمائید.

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here. For example:

    //config.uiColor = '#AADC6E';
    //config.width='876px'
    //config.height='300px'
    //config.resize_enabled = false,

    config.contentsLangDirection = 'rtl';

    config.language = 'fa';
    config.skin = 'moonocolor',
    
    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'] }
    ];
 
};

4- حال در فایل مورد نظر خود یک textarea ایجاد نمائید ما در فایل index.php یک textarea ایجاد کردیم و حتما به آن id و name بدهید که ما در اینجا نام هر دو را برابر txtMessage قرار داده ایم.

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

<script type="text/javascript">
CKEDITOR.replace('txtMessage', {
// Load the German interface.
language: 'fa'
});                   
</script>

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

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

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

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

3- حال وارد پوشه برنامه CKfinder شوید و حال فایل config.php را با یک برنامه ویرایش گر متن باز نمائید.

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

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

توضیح :

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

در بالای این متغیر ما چند خط کد اضافه نمودیم کار این کد ها این است که در ابتدا چک می کند که ایا برنامه در سرور محلی اجرا می شود یا سرور واقعی و آدرس بخش ابتدایی را به پوشه مورد نظر اضافه می کند یعنی اگر در سرور محلی باشد به ابتدای نام پوشه مورد نظر نام پوشه ای که فایل های شما در آن قرار دارد افزوده می شود یعنی همیشه از ریشه سایت شروع می شود. و اگر در سرور واقعی باشد نام دامنه در ابتدای آن قرار می گیرد. که این کدها به صورت زیر می باشند.

if (strstr($_SERVER['SERVER_NAME'], "localhost")) {
    $position = strpos($_SERVER['REQUEST_URI'], "/", 1);
    $nameWeb = substr($_SERVER['REQUEST_URI'], $position);
    $link= str_replace($nameWeb, "", $_SERVER['REQUEST_URI']);
} else {
    $position = strpos($_SERVER['REQUEST_URI'], "/", 0);
    $nameWeb = substr($_SERVER['REQUEST_URI'], $position);
    $link = str_replace($nameWeb, "", $_SERVER['REQUEST_URI']);
}

5- حال فایلی که در آن برنامه CKEditor را اجرا کردید باز نماید و در تگ head کد زیر را وارد نماید که همان آدرس فایل جاوا اسکریپت می باشد. مسیر داده شده در src با توجه به سورس ان برنامه می باشد که شما می توانید آن را در برنامه خودتان تغیر دهید.

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

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

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

توجه:

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

<script type="text/javascript" src="ckeditor/ckeditor/ckeditor.js"></script>
                <script type="text/javascript">
                    CKEDITOR.replace('txtMessage', {
                        // Load the German interface.
                        language: 'fa'
                    });
                    CKFinder.setupCKEditor(null, 'ckeditor/ckfinder/');
                </script>

7- حال اگر کلیه مراحل را صحیح انجام داده باشید هنگامی که فایل خود را ذخیره و اجرا نمائید در منو ابزار های برنامه CKEditor ابزار تصویر را که انتخاب نماید گزینه فهرست یابی سرور فعال میشود. و می توانید تصاویر مربوطه را در پوشه ای که ایجاد کردید آپلود نمایید.

افزودن Syntax Highlight :

1- پس از انجام کلیه کار های بالا برای اینکه بتوانید سورس کد های برنامه های خود را به صورتی که در برنامه هایی همانند  Dreamweaver  ، phpstorm ، c# و یا برنامه های دیگر با تفکیک رنگ برای سایرین به نمایش بگذارید میبایستی برنامه Syntaxhighlighter را از اینجا دانلود نمائید.

2- فایل دریافتی خود را در پوشه برنامه CKEditor در شاخه plugins کپی نمائید. پس از کپی آدرس برنامه دسترسی به آن به صورت زیر میبایستی باشد آن را چک نمائید.

ckeditor/plugins/syntaxhighlight

3- حال وارد پوشه ckeditor شوید و فایل config.js را در یک برنامه ویرایشگر باز نمائید. و کد زیر را در درون قسمت CKEDITOR.editorConfig = function( config ) زیر کد  config.language اضافه نمائید .

config.extraPlugins = "syntaxhighlight";

4- سپس گزینه Syntaxhighlight را در قسمت config.toolbar همانند سایر کد های موجود در آن اضافه نمائید و فایل را ذخیره کنید.

5- حال پروژه خود را اجرا نمائید در منو ابزار برنامه CKEditor یک گزینه به شکل علامت { .. . } افزوده شده است. حال آماده استفاده از آن شوید.

توجه: برای اینکه سورس کدهایی که بر روی سایت برای نمایش عموم قرارداده اید به صورت صحیح نمایش داده شود میبایستی SyntaxHighlighter Managment را بر روی قالب وبسایت خود نصب نمائید.

افزودن سورس کدهای برنامه نویسان به پروژه های خود با  Syntax Highlighter  :

1- جهت نصب SyntaxHighlighter Managment ابتدا آن را از اینجا دانلود نمائید.

2- حال آن را در کنار پوشه های CKEditor و CKFinder کپی نمائید.

3- حال در قسمت header قالب سایت خود کد های زیر را با در نظر گرفتن آدرس دقیق برنامه بر روی هاست خود وارد نمائید.

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

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