اضافه کردن قابلیت اپلود عکس و فیلم به ادیتور TinyMCE در Django

خب سلام دوستان، تو این قسمت میخوایم به ادیتور TinyMCE یه اپشن اضافه کنیم که بتونیم عکس ها رو با استفاده از file browser دیفالت سیستم اپلود کنیم چون در حالت دیفالت همچین اپشنی نیست و مجبوریم url رو دستی بدیم بهش یا بریم از پکیج های دیگه کمک بگیریم مثلا بیایم از پکیج filebrowser استفاده کنیم که باز خود این باز دیپندنسی داره به grappelli (django-grappelli) که اون هم تمپلیت پنل ادمین جنگو رو تغیر میده و خب این برای من زیاد جالب نبود که این همه دیپندنسی نصب کنم صرفا برای یه اپلود عکس؟؟! زیاد بود واقعا برای همین بیاید بدونه نصب کردن این دیپندنسی ها مشکل رو حل کنیم ...

- اضافه کردن قسمت اپلود به ادیتور TinyMCE

مرحله اول میایم یه فایل داخل دایرکتوری static مون ایجاد میکنیم :

ساختار دایرکتوری مون فرض کنیم اینشکلیه

. 
├── core
│   ├── urls.py
│   ├── settings.py
│   └── ...
├── post
│   ├── admin.py
│   ├── models.py
│   └── ...
└── static
    └── js
        └── uploader.js

خب الان ما یه دایرکتوری به اسم static داریم که فایل های static مون داخلش قرار میگین(اطلاعات بیشتر راجب static فایل ها...)، اینجا ما میایم یه دایرکتوری برای فایل های js مون ایجاد میکنیم و داخل دایرکتوری یه فایل به اسم uploader.js یا هر اسم دیگه که میخواید ایجاد میکنیم، بعد داخل این فایل میایم کد زیر رو قرار میدیم:

- Uploader.js

tinymce.init({
      selector: &quottextarea#id_body&quot,      
      height: &quot700&quot,
      width: &quot1300&quot,
      plugins: &quotinsertdatetime media image preview&quot,
      toolbar: &quotundo redo |  bold italic | alignleft alignright aligncenter alignjustify | image media | preview&quot,
      image_title: true,
      image_caption: true,
      automatic_uploads: true,
      image_advtab: true,
      file_picker_types: &quotimage media&quot,

      file_picker_callback: function (cb, value, meta) {
        var input = document.createElement(&quotinput&quot);
        input.setAttribute(&quottype&quot, &quotfile&quot);
        if (meta.filetype == &quotimage&quot) {
            input.setAttribute(&quotaccept&quot, &quotimage/*&quot);}
        if (meta.filetype == &quotmedia&quot) {
        input.setAttribute(&quotaccept&quot, &quotvideo/*&quot);}

        input. = function () {     
            var file = this.files[0];
            var reader = new FileReader();
            reader. = function () {
                var id = &quotblobid&quot + (new Date()).getTime();
                var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                var base64 = reader.result.split(&quot,&quot)[1];
                var blobInfo = blobCache.create(id, file, base64);
                blobCache.add(blobInfo);
               cb(blobInfo.blobUri(), { title: file.name });
             };
             reader.readAsDataURL(file);
         };
         input.click();
      },
      content_style: &quotbody { font-family:Helvetica,Arial,sans-serif; font-size:14px }&quot
  });

این چند خط کد برای اپلود کرد فیلم و عکس کافیه و چیز دیگه ای نیاز نیست ولی خب این رو در نظر داشته باشید کانفیگ هایی که داخل settings برای TinyMCE ست کردیم(البته اگه ست کردید!) دیگه الان با این تغیر اینجا بدرد نمیخوره و اعمال نمیشه پس اگر اپشنی چیزی میخواید نمایش داده بشه اینجا اعمال کنید مثلا چیز های بیشتری داخل toolbar میتونید قرار بدید(کلی اپشن دیگه داره که داخل داکیومنتش میتونید بخونید...)

برای کانفیگ قسمت مربوط به image دوتا لینک زیر رو میتونید بخونید:

- Edit Admin Panel

مهم ترین قسمت ماجرا این هستش که چطوری داخل ادمین پنل بتونیم گذینه اپلود رو اضافه کنیم(این رو هم بگم هرجا نیاز داشتید به اپلود از همین کدی که نوشتیم میتونید استفاده کنید و...)، برای این کار ما باید فایل زیر رو پیدا و ادیت کنیم :

/django/contrib/admin/templates/admin/change_form.html

ته این فایل قبل از خط {% endblock %} باید بیایم و این خط زیر رو بهش اضافه کنیم که فایل js مون لود بشه :

<script src=&quot{% static 'js/uploader.js' %}&quot><\/script>

نکته: این خط بالا تگ script وقتی میبستمش <script/> داخل ویرگول نمایشش نمیداد برای همین \ زدم که اوکی بشه این \ رو پاک کنید....

خب الان کار ما تموم شده بعد از ادیت و ذخیره فایل کافیه یک بار reload بشه قسمت مربوط به ادیتور مون و بعدش میتونیم مثل تصویر زیر گذینه جدیدی که بهش اضافه شده رو ببینیم و عکس و فیلم هامون رو اپلود کنیم:

خب امید وارم مفید بوده باشه براتون، مثل همیشه میتونید لایک کنید کامنت بزارید و اگر دوست داشتید با بقیه هم شیر بکنید و... اگه مشکلی، حرفی چیزی هم بود میتونید کامنت بزارید ❤️