افزونه مدیریت فایل های رایگان Roxy FileMan برای TinyMce و CkEditor

اندازه‌ی قلم متن

تخمین مدت زمان مطالعه‌ی مطلب: سه دقیقه

در این مقاله سعی در پیاده سازی Roxy FileMan در Asp.net mvc داریم. البته خود وب سایت آن (اینجا) برای .net Framework 4.5 پروژه‌ایی را آماده کرده است که بنده بنا دارم همان پروژه را توضیح دهم.

قبل از شروع به کار، ابتدا نمایی از این ابزار مدیریت فایل (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

‫۸ سال و ۱۲ ماه قبل، جمعه ۳ مهر ۱۳۹۴، ساعت ۰۰:۴۰

۷۴۸۳

ASP.Net MVC CKEditor tinymce Html Editor

مطالب مشابه

اشتراک‌ها مشکل امنیتی رفع شده در Roxy FileManager

اشتراک‌ها یک مدیریت فایل قدرتمند برای ویرایشگر متن

پروژه‌ها فروشگاه IrisStore

مطالب معرفی پروژه فروشگاهی Iris Store

مطالب Globalization در ASP.NET MVC

مطالب یکپارچه سازی CKEditor با Lightbox

نظرات اشتراک‌ها یک ادیتور سبک مخصوص bootstrap

نظرات مطالب افزونه مدیریت فایل های رایگان Roxy FileMan برای TinyMce و CkEditor

نظرات مطالب آپلود فایل‌ها توسط برنامه‌های React به یک سرور ASP.NET Core به همراه نمایش درصد پیشرفت

نظرات مطالب افزونه مدیریت فایل های رایگان Roxy FileMan برای TinyMce و CkEditor

#

میثم99

‫۸ سال و ۱۲ ماه قبل، جمعه ۳ مهر ۱۳۹۴، ساعت ۱۵:۲۲

سلام؛ ممنون بابت مطلب خوبتون. برای امنیت سرور که کسی نتونه فایل شل آپلود کنه. چگونه می‌توان مسیر فایلها رو به App_Data تغییر داد؟ برای عکس مشکلی نیست ولی باز کردن نوع فایلهای دیگر مثل pdf فیلمها. فقط چک کردن پسوند کفایت نمی‌کنه. فکر کنم در پوشه App_Data باشه امنیت بیشتری دارد.
- #
  
  وحید نصیری
  
  ‫۸ سال و ۱۲ ماه قبل، جمعه ۳ مهر ۱۳۹۴، ساعت ۱۶:۰۶
  
  برای امنیت آپلود، مراجعه کنید به مطالبی مانند:
  «تشخیص نوع فایل با استفاده از محتوای فایل»
  «کنترل عمومی فایل‌های آپلودی در ASP.NET MVC»
  «محدود کردن کاربر‌ها به آپلود فایل‌هایی خاص در ASP.NET MVC»
  
  در مورد accessPolicy=Read در نظرات مورد آخری بیشتر بحث شده‌است و در این حالت حتی اگر یک فایل شل هم آپلود شود، قابلیت اجرا نخواهد داشت.
#

صابر ف

‫۷ سال و ۱۲ ماه قبل، پنجشنبه ۱ مهر ۱۳۹۵، ساعت ۰۴:۳۳

با عرض سلام و تشکر
خیلی وقت‌ها زمانی که صفحه ای که از Roxy استفاده کردم داره بالا میاد خطای زیر رو میده
E_LoadingAjax asp_net/main.ashx?a=DIRLIST

حتی لینکی که ( مثلا "انتخاب تصویر") پنجره مربوط به filemanager رو باز میکنه هم کلیک کنیم FileManager باز میشه با همون خطای بالا ، و نه لیست فایل هارو نشون میده و نه اجازه آپلود و تعریف پوشه
ممنون میشم راهنماییم کنید
- #
  
  محسن خان
  
  ‫۷ سال و ۱۲ ماه قبل، پنجشنبه ۱ مهر ۱۳۹۵، ساعت ۰۴:۵۰
  
  باید توسط فایرباگ یا developer tools مرورگرها دقیق این مساله رو دیباگ کنید.
- #
  
  حسین صفدری
  
  ‫۷ سال و ۱۲ ماه قبل، پنجشنبه ۱ مهر ۱۳۹۵، ساعت ۱۳:۵۰
  
  سلام،
  به نظرم گزینه 9 یعنی فولدری که فایل‌ها رو در آن ذخیره کنید رو درست آدرس دهی نکردید.

#

صابر ف

‫۷ سال و ۱۱ ماه قبل، یکشنبه ۱۱ مهر ۱۳۹۵، ساعت ۱۹:۳۰

با تشکر از دوستان بابت راهنمایی
توی فایل conf.json آدرس فولدری که قراره تصاویر توش قرار بگیره رو به آیتم FILES_ROOT داده بودم که حذفش کردم و بردم داخل main.ashx متد GetFilesRoot()

protected string GetFilesRoot()
    {
        string ret = GetSetting("FILES_ROOT");
        if (GetSetting("SESSION_PATH_KEY") != "" && _context.Session[GetSetting("SESSION_PATH_KEY")] != null)
            ret = (string)_context.Session[GetSetting("SESSION_PATH_KEY")];

        if (ret == "")
            ret = _context.Server.MapPath("~/UploadedFiles/Files");//("../Uploads");
        else
            ret = FixPath(ret);
        return ret;
    }

#

فرمانی

‫۶ سال و ۹ ماه قبل، سه‌شنبه ۲۸ آذر ۱۳۹۶، ساعت ۱۵:۲۷

چطور میشه از این به جای fileupload در وب فرم استفاده کرد؟ چیزی مثل انتخاب فایل در وردپرس. که هم بتوان فایل آپلود کرد و هم بتوان از فایل‌های موجود انتخاب کرد.
- #
  
  محسن خان
  
  ‫۶ سال و ۹ ماه قبل، سه‌شنبه ۲۸ آذر ۱۳۹۶، ساعت ۱۵:۳۹
  
  بهتر است از ابزارهای مرتبط‌تری استفاده کنید. مانند:
  
  - آپلود فایل‌ها با استفاده از PlUpload در Asp.Net Mvc
  
  - افزونه jQuery جالب برای ارسال تصویر
  
  - بررسی ویجت Kendo UI File Upload
  
  - Mvc File Manager
  
  - آپلود فایل‌ها در یک برنامه‌ی Angular به کمک کامپوننت ng2-file-upload
  
  - بررسی چند کتابخانه آپلود با پشتیبانی از DragDrop
  
  - آموزش Backload (آپلود چندین فایل به طور همزمان با آجاکس )