استفاده Roxy Fileman در 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  دریافت خواهید کرد برای رفع آن باید وارد کنترل پنل هاست شوید و MIME types به آن اضافه کنید 

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

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

application/json .json

services.AddSession();
services.AddDistributedMemoryCache();

app.UseSession();

services.AddControllers();

    app.UseStaticFiles();
            app.UseRouting();
            app.UseCookiePolicy();
            app.UseSession();
            app.UseAuthentication();
            app.UseAuthorization();
            //
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapControllers();
            });