استفاده از Syntax Highlighter در ادیتور TinyMce

11/19/2016 MVC
4058

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

ادیتوری که من توی این وبلاگ در مورد آن توضیح دادیم Tiny MCE هست 

 برای اضافه کردن پلاگین کد های برنامه نویسی پس از دانلود کردن TinyMce میتوان به صفحه دانلود پکیجهای مربوط به Tiny Mce  رفته و پکیج Tiny MCE را دانلود کنید و در پوشه Plugin که در پروژه گذاشته اید جایگذاری نمایید 

در مرحله بعد به فایل تنظیمات Tiny MCE  رفته و کدهای زیر را به آن اضافه کنید.

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "codesample",
  toolbar: "codesample"
});

  در مورد کدهای بالا انچه در قسمت Plugin  مینویسید ، میتواند ادامه پلاگینهای قبلی بوده باشد و همینطور برای toolbar  به طور مثال این فایل در پروژه من به این صورت خواهد بود 

tinyMCE.init({
   
    language: 'fa',
    theme: "modern",
    directionality: "rtl",
    mode: "specific_textareas",
    editor_selector: "mceEditor",
    content_css: "/content/tinymce_style.css",
    plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste autoresize codesample '
    ],
    image_advtab: true,
    toolbar: 'insertfile undo redo | styleselect | bold italic |' +
        ' alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media code codesample | ',
    
   
});

}

توضیح : اگر میخواهید عینا کد بالا را در در پروژه خود اضافه نمایید باید یاد آوری کنم ااین ادیتور فقط بر Text Area  هایی اعمال میشود که با کلاس mceEditor  مزین شده باشند.

برای رنگ کردن کده نیز باید به سایت prismjs.com رفته و ربانهایی که میخواهد در وبلاگ خود استفاده کنید را تیک بزنید در انتها فایل جاوا آن و CSS  را دانلود کنید و پس از کپی کردن در پوشه پروژه ، فایل css  ان را به صفحه ای که میخواید استفاده کنید و یا _Layout  اضافه کنید و همینطور فایل JS  را نیز حتما بعد از مکان معرفی شده فایل اصلی jQuery  اضافه کنید.