آموزش اضافه کردن 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>

نکته:

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