PDA

View Full Version : آموزش: چطور اضافه کردن ویژگی SyntaxHighLighting در CKEditor برای ASP.NET با Syntaxhighlighter Interface


habibb
شنبه 15 آذر 1393, 09:59 صبح
سلام
بعد از دانلود و نصب ویزیویگ CKEditor و CKFinder برای ASP.NET (فعال نمودن آپلود عکس) (http://barnamenevis.org/showthread.php?478188-%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%88-%D9%86%D8%B5%D8%A8-%D9%88%DB%8C%D8%B2%DB%8C%D9%88%DB%8C%DA%AF-CKEditor-%D9%88-CKFinder-%D8%A8%D8%B1%D8%A7%DB%8C-ASP-NET-(%D9%81%D8%B9%D8%A7%D9%84-%D9%86%D9%85%D9%88%D8%AF%D9%86-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D8%B9%DA%A9%D8%B3))
حالا می خوام Syntaxhighlighter Interface (http://ckeditor.com/addon/syntaxhighlight) رو روی CKEditor ام نصب کنم و ازش لذت ببرم.


126334
قبل از هر چیز شما باید CKEditor تون رو به صورت سفارشی دانلود کنید یعنی دکمه ی Or let me customize CKEditor رو بزنید در این آدرس (http://ckeditor.com/download)
بعد وارد صفحه ی تنظیمات سفارشی میشین که اونجا در مرحله ی 2. Select your plugins and skin باید از قسمت Available plugins افزونه ی Syntaxhighlighter Interface
رو اضافه کنید به قسمت سمت چپ Selected plugins . حالا می تونی دانلود کنی CKEditor ت رو.
خب حالا میری به این آدرس (http://alexgorbatchev.com/SyntaxHighlighter/) و اونجا Download (http://alexgorbatchev.com/SyntaxHighlighter/download/)میزنی و بعدشSyntaxHighlighter version is 3.0.83 (http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current) رو دانلود می کنی.
بعدش پوشه ی syntaxhighlighter_3.0.83 رو که از فایل زیپ خارج کردی رو به پروژت اضافه می کنی.
بعدش توی صفحه ی Default.aspx به قسمت Head صفحه کد زیر رو اضافه می کنی .


<head runat="server">
<title></title>
<!-- SyntaxHighlighter -->
<script src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script><!-- قالب بندی عدد گذاری برای هر سطر -->
<script src="syntaxhighlighter_3.0.83/scripts/shBrushCSharp.js"></script><!-- حفظ قالب زبان سی شارپ -->
<link href="syntaxhighlighter_3.0.83/styles/shCore.css" rel="stylesheet" /><!-- قالب بندی اسکرول و علامت سوال -->
<link href="syntaxhighlighter_3.0.83/styles/shThemeDefault.css" rel="stylesheet" /><!-- قالب بندی نوار سبز جدا کننده -->
<script type="text/javascript">SyntaxHighlighter.all()</script><!-- اجرای افزونه -->
</head>

و تمام.
البته شما می تونید برای این که برای سایر زبان ها مشکلی پیش نیات از پوشه ی syntaxhighlighter_3.0.83 داخل پروژت هر چی که توی پوشه های scripts و styles اش هست
اضافه کنی Drag&Drop کنی.به قسمت تگ Head صفحت.
از طرف حرکت جوهری (http://substantialmotion.ir/) برنامه نویس فوق حرفه ای (http://substantialmotion.ir/)
habibb
دوشنبه 26 مرداد 1394, 17:11 عصر
ویرایش تکمیلی: برای اسکرول افقی بدون اسکرول عمودی به روش زیر عمل کنید.
به دلیل اینکه نیازی به اسکرول عمودی هنگام نمایش کدها نداریم چون خود صفحه اسکرول عمودی می‌شود. بنابراین اسکرول عمودی اضافه، برای کدها اصلا لازم نیست و باعث اشغال فضا، در قسمت نمایش کدها می‌شود. بهتر است که اسکرول عمودی حذف شود و فقط اسکرول افقی در صورتی که خط کد طولانی‌ است را نمایش دهیم. این روش در زیبایی و تمیزی کار اهمیت دارد.

از پوشه syntaxhighlighter_3.0.83 به پوشه styles و سپس فایل shCore.css رو باز کنید. بعد CSS Selector، با نام syntaxhighlighter را به صورت زیر تغییر بدهید.
.syntaxhighlighter { direction: ltr;
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
/*overflow: auto !important;*/
overflow-x: visible;/*اگر اسکرول نبود محو شدشو نشون نده و اگر اسکرول بود اسکرول بوخوره*/
overflow-y:hidden;/*اسکرول وای رو نشون نده*/
font-size: 1em !important;
}


Pipeline - آموزش HttpHandler در ASP.NET ایجاد یک راه انداز شخصی با پیکربندی در Web.config (http://substantialmotion.ir/ShowNew.aspx?NID=60)



دانلود و نصب ویزیویگ CKEditor و CKFinder برای ASP.NET (فعال نمودن آپلود عکس) (http://barnamenevis.org/showthread.php?478188-%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%88-%D9%86%D8%B5%D8%A8-%D9%88%DB%8C%D8%B2%DB%8C%D9%88%DB%8C%DA%AF-CKEditor-%D9%88-CKFinder-%D8%A8%D8%B1%D8%A7%DB%8C-ASP-NET-(%D9%81%D8%B9%D8%A7%D9%84-%D9%86%D9%85%D9%88%D8%AF%D9%86-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D8%B9%DA%A9%D8%B3))

چطور اضافه کردن ویژگی SyntaxHighLighting در CKEditor برای ASP.NET با Syntaxhighlighter Interface (http://barnamenevis.org/showthread.php?478260-%DA%86%D8%B7%D9%88%D8%B1-%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D9%88%DB%8C%DA%98%DA%AF%DB%8C-SyntaxHighLighting-%D8%AF%D8%B1-CKEditor-%D8%A8%D8%B1%D8%A7%DB%8C-ASP-NET-%D8%A8%D8%A7-Syntaxhighlighter-Interface)
از طرف حرکت جوهری (http://substantialmotion.ir/) برنامه نویس فوق حرفه ای (http://substantialmotion.ir/)http://www.forum.98ia.com/images/smilies/2/-2-32-.gif
LostOfMind
دوشنبه 26 مرداد 1394, 17:30 عصر
من همین کار رو انجام دادم اما صفحه موقعی که خط طولانی میشه بهم میریزه:گریه:
134378
habibb
دوشنبه 26 مرداد 1394, 17:42 عصر
به احتمال زیاد CSS Selectorهای هم نامی یا هم کاربرد وجود داره. از Inspect Element باید خطاش رو پیدا کنی.



Pipeline - آموزش HttpHandler در ASP.NET ایجاد یک راه انداز شخصی با پیکربندی در Web.config (http://substantialmotion.ir/ShowNew.aspx?NID=60)



دانلود و نصب ویزیویگ CKEditor و CKFinder برای ASP.NET (فعال نمودن آپلود عکس) (http://barnamenevis.org/showthread.php?478188-%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%88-%D9%86%D8%B5%D8%A8-%D9%88%DB%8C%D8%B2%DB%8C%D9%88%DB%8C%DA%AF-CKEditor-%D9%88-CKFinder-%D8%A8%D8%B1%D8%A7%DB%8C-ASP-NET-(%D9%81%D8%B9%D8%A7%D9%84-%D9%86%D9%85%D9%88%D8%AF%D9%86-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D8%B9%DA%A9%D8%B3))

چطور اضافه کردن ویژگی SyntaxHighLighting در CKEditor برای ASP.NET با Syntaxhighlighter Interface (http://barnamenevis.org/showthread.php?478260-%DA%86%D8%B7%D9%88%D8%B1-%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D9%88%DB%8C%DA%98%DA%AF%DB%8C-SyntaxHighLighting-%D8%AF%D8%B1-CKEditor-%D8%A8%D8%B1%D8%A7%DB%8C-ASP-NET-%D8%A8%D8%A7-Syntaxhighlighter-Interface)
از طرف حرکت جوهری (http://substantialmotion.ir/) برنامه نویس فوق حرفه ای (http://substantialmotion.ir/)http://www.forum.98ia.com/images/smilies/2/-2-32-.gif
habibb
دوشنبه 26 مرداد 1394, 17:46 عصر
در ضمن از
Syntaxhighlighter جدید استفاده کن. ورژن شما قدیمیه. شاید با ورژن جدید مشکلتون حل شد.

Pipeline - آموزش HttpHandler در ASP.NET ایجاد یک راه انداز شخصی با پیکربندی در Web.config (http://substantialmotion.ir/ShowNew.aspx?NID=60)




دانلود و نصب ویزیویگ CKEditor و CKFinder برای ASP.NET (فعال نمودن آپلود عکس) (http://barnamenevis.org/showthread.php?478188-%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%88-%D9%86%D8%B5%D8%A8-%D9%88%DB%8C%D8%B2%DB%8C%D9%88%DB%8C%DA%AF-CKEditor-%D9%88-CKFinder-%D8%A8%D8%B1%D8%A7%DB%8C-ASP-NET-(%D9%81%D8%B9%D8%A7%D9%84-%D9%86%D9%85%D9%88%D8%AF%D9%86-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D8%B9%DA%A9%D8%B3))

چطور اضافه کردن ویژگی SyntaxHighLighting در CKEditor برای ASP.NET با Syntaxhighlighter Interface (http://barnamenevis.org/showthread.php?478260-%DA%86%D8%B7%D9%88%D8%B1-%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D9%88%DB%8C%DA%98%DA%AF%DB%8C-SyntaxHighLighting-%D8%AF%D8%B1-CKEditor-%D8%A8%D8%B1%D8%A7%DB%8C-ASP-NET-%D8%A8%D8%A7-Syntaxhighlighter-Interface)
از طرف حرکت جوهری (http://substantialmotion.ir/) برنامه نویس فوق حرفه ای (http://substantialmotion.ir/)http://www.forum.98ia.com/images/smilies/2/-2-32-.gif
LostOfMind
دوشنبه 26 مرداد 1394, 17:49 عصر
در ضمن از
Syntaxhighlighter جدید استفاده کن. ورژن شما قدیمیه. شاید با ورژن جدید مشکلتون حل شد.


من از نسخه جدیدش استفاده کردم بسیار نامطلوب تر از این بود مجبور به استفاده از این نسخه شدم
habibb
دوشنبه 26 مرداد 1394, 17:58 عصر
من از نسخه جدیدش استفاده کردم بسیار نامطلوب تر از این بود مجبور به استفاده از این نسخه شدم
فایلشو ضمیمه کن تا ی بررسیش کنم.

Pipeline - آموزش HttpHandler در ASP.NET ایجاد یک راه انداز شخصی با پیکربندی در Web.config (http://substantialmotion.ir/ShowNew.aspx?NID=60)





دانلود و نصب ویزیویگ CKEditor و CKFinder برای ASP.NET (فعال نمودن آپلود عکس) (http://barnamenevis.org/showthread.php?478188-%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%88-%D9%86%D8%B5%D8%A8-%D9%88%DB%8C%D8%B2%DB%8C%D9%88%DB%8C%DA%AF-CKEditor-%D9%88-CKFinder-%D8%A8%D8%B1%D8%A7%DB%8C-ASP-NET-(%D9%81%D8%B9%D8%A7%D9%84-%D9%86%D9%85%D9%88%D8%AF%D9%86-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D8%B9%DA%A9%D8%B3))

چطور اضافه کردن ویژگی SyntaxHighLighting در CKEditor برای ASP.NET با Syntaxhighlighter Interface (http://barnamenevis.org/showthread.php?478260-%DA%86%D8%B7%D9%88%D8%B1-%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D9%88%DB%8C%DA%98%DA%AF%DB%8C-SyntaxHighLighting-%D8%AF%D8%B1-CKEditor-%D8%A8%D8%B1%D8%A7%DB%8C-ASP-NET-%D8%A8%D8%A7-Syntaxhighlighter-Interface)
از طرف حرکت جوهری (http://substantialmotion.ir/) برنامه نویس فوق حرفه ای (http://substantialmotion.ir/)http://www.forum.98ia.com/images/smilies/2/-2-32-.gif
LostOfMind
دوشنبه 26 مرداد 1394, 18:02 عصر
فایلشو ضمیمه کن تا ی بررسیش کنم.

Pipeline - آموزش HttpHandler در ASP.NET ایجاد یک راه انداز شخصی با پیکربندی در Web.config (http://substantialmotion.ir/ShowNew.aspx?NID=60)





دانلود و نصب ویزیویگ CKEditor و CKFinder برای ASP.NET (فعال نمودن آپلود عکس) (http://barnamenevis.org/showthread.php?478188-%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%88-%D9%86%D8%B5%D8%A8-%D9%88%DB%8C%D8%B2%DB%8C%D9%88%DB%8C%DA%AF-CKEditor-%D9%88-CKFinder-%D8%A8%D8%B1%D8%A7%DB%8C-ASP-NET-(%D9%81%D8%B9%D8%A7%D9%84-%D9%86%D9%85%D9%88%D8%AF%D9%86-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D8%B9%DA%A9%D8%B3))

چطور اضافه کردن ویژگی SyntaxHighLighting در CKEditor برای ASP.NET با Syntaxhighlighter Interface (http://barnamenevis.org/showthread.php?478260-%DA%86%D8%B7%D9%88%D8%B1-%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D9%88%DB%8C%DA%98%DA%AF%DB%8C-SyntaxHighLighting-%D8%AF%D8%B1-CKEditor-%D8%A8%D8%B1%D8%A7%DB%8C-ASP-NET-%D8%A8%D8%A7-Syntaxhighlighter-Interface)
از طرف حرکت جوهری (http://substantialmotion.ir/) برنامه نویس فوق حرفه ای (http://substantialmotion.ir/)http://www.forum.98ia.com/images/smilies/2/-2-32-.gif



کل فایل syntax رو ضمیمه کردم اما مشکل فکر نکنم از اینجا باشه
بدون استفاده از syntaxhighlighter از کلاس های پیش فرض بوت استرپ استفاده میشه که خیلی خوب نمایش میده اما اگه از syntax استفاده کنم اینجوری میشه
حتما باید خطهای طولانی رو یکبار اینتر بزنم تا بخط بعدی بره و کوتاه تر بشه
habibb
دوشنبه 26 مرداد 1394, 18:10 عصر
منظورم لینک اون صفحه که خطا داره رو بگذار یا Save کن ضمیمشو. تا خطاش رو بررسی کنم.
LostOfMind
دوشنبه 26 مرداد 1394, 18:13 عصر
منظورم لینک اون صفحه که خطا داره رو بگذار یا Save کن ضمیمشو. تا خطاش رو بررسی کنم.

http://astanweb.ir/article.aspx?id=1077
habibb
دوشنبه 26 مرداد 1394, 19:08 عصر
http://astanweb.ir/article.aspx?id=1077
من Width رو با Inspect Element به 90% به جای 100% تغییر دادم و اسکرول افقی نشون داده شد. در ضمن توی صفحه مانیتور من مشکلی از بهم ریختگی ندیدم. فقط اسکرول افقی ندیدم ولی بهم ریختگی‌ای مثل اون شکل که گذاشته بودی ندیدم.
LostOfMind
دوشنبه 26 مرداد 1394, 22:31 عصر
مانیتور من crt و رزولوشن پایینه این مهم نیست
میخوام توی گوشی اسکرول بخوره که دیگه صفحه رو چپ و راست نبرم