میلاد هدایت پور
4 سال پیش توسط میلاد هدایت پور مطرح شد
4 پاسخ

آپلود عکس با ادیتور tinymce

سلام کسی با ادیتور tinymce عکس آپلود کرده؟
من هر کدی از نت برمیدارم جوریه که توی خود فیلد تکست ادرس عکس رو میزاره و جایی توی پروژه آپلودش نمیکنه! یا حداقل من پیداش نمیکنم
و همین باعث میشه موقع پرینت اطلاعات اون عکسایی که توی فیلد تکست هستن رو نمایش نمییده تو صفحه پرینت
کسی تجربه کار با این ادیتور رو داره راهنمایی کنه؟


ثبت پرسش جدید
سعید
تخصص : برنامه نویس وب
@Saeeed 4 سال پیش آپدیت شد
0

@miladparsi1070
سلام من با این ادیتور کار نکردم ولی بنظر خوب میاد ، فکر میکنم از froala editor و summernote editor باشه.
خلاصه داخل لینک زیر خیلی خوب توضیح داده که چطور میشه عکس آپلود کرد:
upload-images

خیلی ساده وقتی عکس select میشه ، یک کالبک صدا زده میشه و داخل اون میتونی راحت درخواست ajax بزنی به سرورت و عکس رو آپلود کنی و url عکس رو با نام location ، از سرور برگردونی .
البته روش ساده تری هم داره ، مثل اینکه به متد آپلود و کالبک خود ادیتور تکیه کنید.
البته برای روش اول این مثال رو زده.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  images_upload_handler: function (blobInfo, success, failure) {
    var xhr, formData;
    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open('POST', 'postAcceptor.php');
    xhr.onload = function() {
      var json;

      if (xhr.status != 200) {
        failure('HTTP Error: ' + xhr.status);
        return;
      }
      json = JSON.parse(xhr.responseText);

      if (!json || typeof json.location != 'string') {
        failure('Invalid JSON: ' + xhr.responseText);
        return;
      }
      success(json.location);
    };
    formData = new FormData();
    formData.append('file', blobInfo.blob(), fileName(blobInfo));
    xhr.send(formData);
  }
});

و خروجی سرور باید به این صورت باشه :

{ location : '/uploaded/image/path/image.png' }

میلاد هدایت پور
تخصص : در حال پیشرفت
@miladparsi1070 4 سال پیش مطرح شد
0

اینی که نوشتینو تست کردم ولی اصلا دکمه ای توی ادیتور برای آپلود عکس نمیاره
من خودم اینو استفاده کردم:

  tinymce.init({
            selector: '#about',
            images_upload_handler: function (blobInfo, success, failure) {
                var xhr, formData;
                xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
                xhr.open('POST', 'ckeditor/upload');
                var token = '{{ csrf_token() }}';
                xhr.setRequestHeader("X-CSRF-Token", token);
                xhr.onload = function () {
                    var json;
                    if (xhr.status != 200) {
                        failure('HTTP Error: ' + xhr.status);
                        return;
                    }
                    json = JSON.parse(xhr.responseText);

                    if (!json || typeof json.location != 'string') {
                        failure('Invalid JSON: ' + xhr.responseText);
                        return;
                    }
                    success(json.location);
                };
                formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                xhr.send(formData);
            }
        });

این آپلود میکنه ولی عکس رو هم توی فیلد description ذخیره میکنه و بعد موقع پرینت گرفتن از اطلاعات عکسو نشون نمیده


سعید
تخصص : برنامه نویس وب
@Saeeed 4 سال پیش مطرح شد
0

@miladparsi1070

خب برای فعال شدن image باید پلاگینش رو فعال کنی :
Insert an image into TinyMCE.


میلاد هدایت پور
تخصص : در حال پیشرفت
@miladparsi1070 4 سال پیش مطرح شد
0

@Saeeed
نه بازم اکی نشد
اپلود نمیکنه


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام