استفاده Roxy Fileman در TinyMCE

7/15/2016 MVC
4542

اپلود فایل و یا تصیور توسط کد ادیتور ها مانند TinyMCE و یا CKEditor  یکی از ملزومات یک ادیتور خوب است ، به صورت پیشفرض د رهیچ کدام از آنها چنین امکانی را ندیدم (شاید باشد ) اما این امکان را میدهند تا بتوانید با استفاده از BROWSER  خودتان از آن استفاده کنید ماند این لینک در tinyMCE 

امروز سعی کردم از Roxy Fileman استفاده کنم ، این سایت فایل دانلود را از دسترس ای پی ایران خارج کرده است برای همین شاید نیاز باشد برای دسترسی کمک بگیرید.

ابتدا فایل اصلی را از سایت آن دانلود کنید(با توجه به اینکه من از tinyMce به عنوان ادیتور در MVC  استفاده میکنم ورژن مربوط به آن را دانلود میکنم و در انتهای همین متن قرار خواهم داد.).,و پس از خارج کردن از حالت فشرده پوشه Fileman را در پروژه خود کپی کنید.من این پوشه را در پوشه مربوط به tinyMCE کپی میکنم ، 

در tinymce  من از فایل js  جداگانه برای تنظیمات استفاده میکنم که تمام آن را در زیر کپی میکنم 

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

قطعه کد بالا فقط برای تنظیمات پیش فرض tinyMce  است و برای اضافه کردن file manger  باید قطعه کدی با آن اضافه کنیم و در این کد نیز یک تغییر کوچک اعمال کنیم.

در کد بالا ابتدا خط کد مربوط به 

file_browser_callback: RoxyFileBrowser,

را از حالت کامنت خارج کنید 

و کد زیر را به آن اضفه کنید ، برای تکرار از نوشتن کد اضافی کل فایل را پس از اضافه کردن کد و نهایی شده در زیر نمایش میدهم 

tinyMCE.init({
   
    language: 'fa',
    theme: "modern",
    directionality: "rtl",
    mode: "specific_textareas",
    editor_selector: "mceEditor",
    plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code autoresize '
    ],
    image_advtab: true,
    toolbar: 'insertfile undo redo | styleselect | bold italic |' +
        ' alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media code | ' ,
    //' file_browser_callback: RoxyFileBrowser',
    file_browser_callback: RoxyFileBrowser,
    autoresize_min_height:250,
    autoresize_max_height:550
});
function RoxyFileBrowser(field_name, url, type, win) {
    var roxyFileman = '/Scripts/tinymce/fileman/index.html';
    if (roxyFileman.indexOf("?") < 0) {
        roxyFileman += "?type=" + type;
    }
    else {
        roxyFileman += "&type=" + type;
    }
    roxyFileman += '&input=' + field_name + '&value=' + win.document.getElementById(field_name).value;
    if (tinyMCE.activeEditor.settings.language) {
        roxyFileman += '&langCode=' + tinyMCE.activeEditor.settings.language;
    }
    tinyMCE.activeEditor.windowManager.open({
        file: roxyFileman,
        title: 'Roxy Fileman',
        width: 850,
        height: 650,
        resizable: "yes",
        plugins: "media",
        inline: "yes",
        close_previous: "no"
    }, { window: win, input: field_name });
    return false;
}

نکته ای که باید در نظر داشته باشید 

var roxyFileman = '/Scripts/tinymce/fileman/index.html';

ادرس را تصحیح کنیدو

برای تغییر در ادرس فایلی که میخواهد در file manager  نمایش داده شود به فایل conf.json  بروید و "FILES_ROOT" را به ادرس دلخواه تغییر دهید زیرا که پیشفرض آن به پوشه fileman  تنظیم شده است.

 و حتما پس از آپلود بر روی هاست به پوشه ای که میخواهید تصاویر و عکسها در آن ذخیره شوند دسترسی دهید.

نکته مهم زمانی فایل را آپلود میکنید و میخواهید از fileman  استفاه کنید خطایی مبنی بر E_action Disable به صوزت alert  دریافت خواهید کرد برای رفع آن باید وارد کنترل پنل هاست شوید و 

File name extension: .json
MIME type: application/json

به این صورت در قسمت تنظیمات IIS  اضافه کنید 

application/json .json
نکته مهم : اگر فایل به راحتی آپلود شد و زمانی که تصویر و یا فایل را انتخاب مبکنبد و یا دوبار کلیک میکنید خطایی به صورت alert  دریافت میکنید که "مراحل نصب را از سایت ببینید" به فایل 
conf.json مراجعه کنید و به دنبال "INTEGRATION": بگردید و متناسب با ادیتور tinymce و یا CKEditor اطلاعات مربوطه را به جای custom قرار دهید اگر از CKEditor استفاده میکیند "ckeditor" اگر از TinyMCE 3.x استفاده میکیند "tinymce3" و اگر از TinyMCE 4.x استفاده میکنید "tinymce4"را قرار دهید 
 
آپدیت 99/02/07
نکات تکمیلی :
اول اینکه حتما 
services.AddSession();
services.AddDistributedMemoryCache();
رادر قسمت ConfigureServices اضافه نمایید.
و همچنین در Configure 
app.UseSession();
در پروژه mvc core 3.1 خواستم که از roxy man  استفاده کنم : 
برای اینکه بتوانیم از ;کنترلر در پروژه razor  استفاده کنیم حتما این serviceو configur را استفاده  نمایید
 
در قسمت service 
services.AddControllers();
,و در قسمت configur
    app.UseStaticFiles();
            app.UseRouting();
            app.UseCookiePolicy();
            app.UseSession();
            app.UseAuthentication();
            app.UseAuthorization();
            //
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapControllers();
            });
برای قسمت configur  همه کدهایی که خودم استفاده کرده بودم نوشتم شما با توجه به پروژه خودتان استفاده نمایید.
 
راهنما