آموزش قرار دادن فیلم و عکس در ckeditor

علی رضایی

https://www.npmjs.com/package/@ckeditor/ckeditor5-react

ش ذ

سلام استاد

منم الان دقیقا دارم از همین پکیج استفاده میکنم، همه قسمت هاش به درستی کار میکنه ولی قسمت قرار دادن فیلمش فقط url قبول میکنه و نمیتونم مثل عکس مستقیما عکس رو وارد کنم.

همینطور که در تصویر میبینید، آدرس url میخواد برای قرار دادن فیلم و مثل عکس هر کار میکنم نمیتونم، مستقیما وارد کنم

برای عکس به شکل زیر عمل کردم، در قسمت config مربوط به ckeditor 

<CKEditor
                    type=""
                    name={name}
                    editor={ClassicEditor}
                    config={{
                        ckfinder: {
                            // Upload the images to the server using the CKFinder QuickUpload command
                            // You have to change this address to your server that has the ckfinder php connector
                             uploadUrl: "https://localhost:44380/api/FileUpload",
                        },
                        language:"fa",
                    }}
                    data={value}
                    onChange={(event, editor) => {
                        const data = editor.getData();
                        // console.log({ event, editor, data })
                        onChange(data);
                    }}
                />

و در بک اند به شکل زیر استفاده کردم برای عکس

    public class FileUploadController : baseApiController
    {
        [HttpPost]
        public JsonResult UploadImage()
        {
            var myFiles = Request.Form.Files;
            if (myFiles.Count == 0)
            {
              var fileNotSelect = new
              {
                   uploaded = false,
                   url = string.Empty
               };
               return new JsonResult(fileNotSelect);
           }
            var myFile = myFiles[0];
            var oldFileName = myFile.FileName;
            var newFileName = Guid.NewGuid() + System.IO.Path.GetExtension(oldFileName);
            var pathSaveFile = System.IO.Path.Combine("wwwroot/Content/Image", newFileName);
           using (var fs = System.IO.File.Create(pathSaveFile))
            {
                myFile.CopyTo(fs);
            }
            var pathFile = "https://localhost:44380/Content/Image/" + newFileName;
            var uploadSuccess = new
            {
                uploaded = true,
              url = pathFile
            };
         return new  JsonResult(uploadSuccess);
        }
    }

حالا میخوام مثل این عکس که انجام دادم و به درستی کار میکنه، برای فیلم هم انجام بدم، که هر کار میکنم کار نمیکنه و نمیتونم فیلم رو هم مستقیم وارد کنم.

خواهش میکنم راهنمایی کنید که چطوری فیلم رو مستقیم بتونم وارد کنم.

مرسی

ش ذ

سلام استاد، لطفا اگه خواستید جواب بدید

بعد از اینکه login و jwt آموزشش تموم شد جواب بدید،

زمانتون را و تمرکزتون رو لطفا بزارید روی تموم شدن jwt 

همه منتظر تموم شدن jwt هستن، چون خیلی مهمتره و بعد از اون واسه این سوال اگه خواستید زمان بزارید

فعلا چیزی که مهمه تموم شدن قسمت ورود به سایته

مرسی

علی رضایی

سلام عزیز خوبی؟ وقتت بخیر

کدهای زیر رو لطفا تست کن

npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
import React from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

import '@ckeditor/ckeditor5-build-classic/build/translations/en-gb';
import '@ckeditor/ckeditor5-build-classic/build/translations/es';
import '@ckeditor/ckeditor5-media-embed/theme/mediaembed.css';
import '@ckeditor/ckeditor5-image/theme/image.css';


function handleVideoUpload(file) {
  // Handle the uploaded video here
  console.log('Uploaded video:', file);
}


function MyEditor() {
  return (
    <CKEditor
      editor={ClassicEditor}
      config={{
        mediaEmbed: {
          previewsInData: true,
          extraProviders: [
            {
              name: 'uploadVideo',
              url: '/your-upload-video-endpoint',
              uploadUrl: '/your-upload-video-url-endpoint',
              supports: {
                video: true,
              },
            },
          ],
        },
      }}
      onReady={(editor) => {
        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
          return new MyUploadAdapter(loader, handleVideoUpload);
        };
      }}
    />
  );
}


class MyUploadAdapter {
  constructor(loader, handleVideoUpload) {
    this.loader = loader;
    this.handleVideoUpload = handleVideoUpload;
  }

  upload() {
    return this.loader.file.then((file) => {
      return new Promise((resolve, reject) => {
        // Simulate video upload delay
        setTimeout(() => {
          this.handleVideoUpload(file);
          resolve({ default: 'your-uploaded-video-url' });
        }, 2000);
      });
    });
  }
}

ش ذ

سلام استاد این کد ها رو کجاش قرار بدم

در چه قسمتی

چون فقط ی دونه جا داره که من واسه عکس گذاشتمش

چطوری واسه فیلم قرار بدم