اندازهی قلم متن
تخمین مدت زمان مطالعهی مطلب:
سه دقیقه
در این مقاله سعی در پیاده سازی Roxy FileMan در Asp.net mvc داریم. البته خود وب سایت آن (اینجا) برای .net Framework 4.5 پروژهایی را آماده کرده است که بنده بنا دارم همان پروژه را توضیح دهم.
6- کل مدیریت فایل در فایل index.html میباشد و اگر تمایل به تغییر عنوان، درج لوگوی خودتان و ... را دارید به این فایل مراجعه کنید.
خوب، اکنون فایل Tinymce.html را اجرا کنید و نتیجه را ملاحظه بفرمایید.
قبل از شروع به کار، ابتدا نمایی از این ابزار مدیریت فایل (File Manager) را ملاحظه فرمایید:
1- ابتدا یک پروژهی جدید MVC میسازیم
2- جهت بخش سمت سرور، کد هندلری به نام main.ashx نوشته شده است که در فولدر asp_net قرار دارد و در ادامه به توضیح آن خواهم پرداخت. با هندلر بیشتر آشنا شوید.
3- پیشنهاد میشود جهت راحتی کار و انتقال بین پروژههای خود در فولدر scripts فولدری را به نام RoxyFileManager بسازید. این کار سبب میشود جهت پروژههای مختلف فقط فولدر RoxyFileManager را بین پروژههای خود کپی و پیست کنید.
4- از داخل پروژه دانلود شده، فولدر های asp_net ،css، Images، js، lang را به پروژهی جدید کپی میکنیم.
5- اکنون به سراغ web.config میرویم. موارد قرمز ضروری هستند که به web,config اضافه شوند.
6- کل مدیریت فایل در فایل index.html میباشد و اگر تمایل به تغییر عنوان، درج لوگوی خودتان و ... را دارید به این فایل مراجعه کنید.
7- فایل conf.json، همانطور که از نام این فایل برداشت میشود، تنظیمات را میتوان به فرمت json در این فایل جستجو کرد. مهمترین تنظیمات، بحث تغییر زبان میباشد که میتوان با تعویض قسمت LANG از en به هر زبان دلخواهی که داخل پوشهی lang میباشد، آنرا تغییر داد که البته بنده آنرا به زبان فارسی هم ترجمه کردهام که در فولدر lang جهت استفاده موجود میباشد.
8- اکنون به فولدر asp_net میرویم و با handler بیشتر آشنا میشیم. در خطهای اول، به متغییر confFile بر میخوریم که آدرس فایل conf.json را داده است.
9- آدرس دایرکتوری اصلی را در متد GetFilesRoot جستجو کنید. (من معمولا در پروژههای خود، فولدری دارم به نام uploads که داخل آن تمام فولدرهام که مربوط به ماژولهای مختلف است، نگه داری میشوند و خود کاربر آپلود میکند. اکنون برای این پروژه میتوان یک فولدر جدید باز کرد و به آن آدرس داد تا در روند پروژهی شما اختلالی ایجاد نشود. من نام آن فولدر را web گذاشتهام)
نکته جالب همین جاست که شما به کمک این آدرس دهی از source پروژه میتوانید خیلی کارها را انجام دهید. مثلا در یک پروژه میخواهید به فولدرها طبق نقشی که کاربران در سیستم دارند دسترسی بدهید تا فایلها را آپلود کنند و ... به راحتی میتوانید با کمی کد نویسی این تغییرات را در متد GetFilesRoot اعمال کنید.
اگر بخواهید مدیریت فایل را بر اساس زبان سیستم تغییر دهید کافیست، یک فایل conf.json دیگر ایجاد کنید و در سورس به ازای هر زبان، آن فایل conf.json را لود کنید. البته در هر فایل شما باید زبان را تغییر دهید.
راست چین کردن این ادیتور را در اسرع وقت انجام میدهم و برای شما آپلود میکنم. تا کاملا نسخهی بومی سازی آن در اختیار شما قرار گیرد.
10- اکنون به سراغ تنظیمات Tiny mce میرویم.
خوب، ابتدا با دستور Install-Package TinyMCE در Package Manager Console و انتخاب سورس Nuget آخرین نسخه را نصب میکنیم. در حال حاضر آخرین نسخه نگارنده 4.2.5 می باشد.
کل این تنظیمات در فایل Tinymce.html میباشد (این فایل در پروژه شما میتواند همان viewها و partial viewهای شما باشد که تنظیمات اولیه tinymce را مینویسید). حال بررسی مواردی که به tinymce اضافه میشوند تا با مدیریت فایل ادغام شود:
و اسکریپتی جهت افزونهی مدیریت فایل Roxy FileMan را در پایین متد اضافه میکنیم.
خوب، اکنون فایل Tinymce.html را اجرا کنید و نتیجه را ملاحظه بفرمایید.
Roxy FileMan را میتوان با CKEditor هم سازگار کرد، که جهت اطلاعات بیشتر اینجا را مطالعه فرمایید.
فایل پروژه: RoxyFileManager.rar