آموزش اضافه کردن syntaxhighlighter به ckeditor در MVC 5
0 0

آموزش اضافه کردن syntaxhighlighter به ckeditor در MVC 5


آموزش اضافه کردن syntaxhighlighter به ckeditor در MVC 5

در این پست به صورت کامل نحوه اضافه کردن syntaxhighlighter به ckeditor و همچنین نحوه سفارشی سازی ckeditor را در MVC 5 آموزش می دهیم.

در پست های قبلی نحوه استفاده از ckeditor در MVC 5 و همچنین امکان آپلود تصاویر در ckeditor را به صورت کامل توضیح دادیم.

برای اضافه کردن syntaxhighlighter به ckeditor ابتدا plugin مورد نیاز را دانلود کنید و به پوشه plugins در  پوشه ckeditor اضاف کنید. خود پوشه ckeditor نیز داخل پوشه Scripts می باشد.

نکته:

بعد از دانلود کردن plugin فایل را از حالت فشرده خارج کنید و فقط پوشه syntaxhighlight را به پوشه plugins اضافه کنید.

سپس استایل ها و اسکریپت مورد نیاز برای syntaxhighlighter را دانلود کنید. و به پوشه ckeditor اضافه کنید.

سپس برای انجام یک سری تنظیمات فایل config.js در پوشه ckeditor را بازکنید. و کدهای داخل آن را به شکل زیر تغییر دهید.

/*
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here. For example:
    // config.uiColor = '#AADC6E';

    config.filebrowserImageUploadUrl = '/Home/UploadImage';

    config.contentsLangDirection = 'rtl';

    config.language = 'fa';

    config.extraPlugins = 'syntaxhighlight';

    config.toolbar = [
     { items: ['Templates', 'clipboard', 'Cut', 'Paste', 'Redo', 'Undo', 'Find', '-', 'basicstyles', 'cleanup', 'Link', 'Unlink', 'Anchor', 'syntaxhighlight', 'Image', 'Smiley', 'Flash', 'Table', 'SpecialChar', 'Syntaxhighlight', '-', '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'] }
    ];
};

برای اضافه کردن syntaxhighlight به ckeditor کد زیر را نوشتیم

 config.extraPlugins = 'syntaxhighlight';

و برای نمایش آیکون syntaxhighlight در ckeditor  باید syntaxhighlight  را به اسامی ابزار ها اضافه کنید و همچنین در این جا می توانید ابزار های را که نیاز دارید را کم زیاد کنید.

در این قسمت می توانید زبان ، رنگ ، جهت و ... را برای ckeditor تنظیم کنید.

نکته بسیار مهم:

برای اضافه کردن زبان های برنامه نویسی مختلف به syntaxhighlight فایل  syntaxhighlight.js در پوشه پلاگین و پوشه syntaxhighlight را باز کنید و زبان های مورد نیاز را به آن اضافه کنید.

برای نمایش syntaxhighlight در مطالب در جای که می خواهید اسکریپت های زیر را اضافه کنید این اسکریپت ها در فایل syntaxhighlighter که در بالا توضیح دادیم قرار دارند.

<link href="../../Scripts/ckeditor/syntaxhighlighter/styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shAutoloader.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushAS3.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushPowerShell.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="../../Scripts/ckeditor/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>

نکته:

معمولا اسکریپت های بالا را در جای که مطالب نمایش داده می شوند قرار می دهند.

دانلود

نویسنده حسین فتحی
گروه مطلب MVC
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۲۳ اسفند ۱۳۹۳
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران VIP
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.
خرید VIP
امکان خرید از درگاه های بانکی و حساب مجازی

برای دانلود بعد از خرید به همین صفحه برگردید تا لینک های دانلود نمایش داده شود

نظر / سوال

Captcha