طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

آپلود عکس در TinyMCE با php


آپلود عکس در TinyMCE با php

آپلود عکس یکی از قابلیت های معمول ادیتور های WYSIWYG HTML است . اگر از ادیتور TinyMCE در textarea استفاده می کنید , به راحتی می توانید تصویر را در ادیتور اضافه کنید. ویرایشگر HTML در TinyMCE یک گزییه برای آپلود عکس و قرار دادن آن به بصورت data type را میدهد. اما همانطور که می دانید رندر شدن این تصاویر از طریق مرورگر کمی زمانبر است بنابراین همیشه آپلود عکس در php و سمت سرور برای قرار دادن تصویر در TinyMCE بهترین گزینه است .

ویرایشگر TinyMCE به شما امکان انتخاب فایل های لوکال را می دهد. اما , برای استفاده موثر از این قابلیت ها نیاز است چندین کانفیگ رو انجام بدید . همچنین , هندلر آپلود سمت سرور (server-side) برای آپلود فایل عکس در سرور نیاز است .

در این آموزش قصد داریم به شما نشان دهیم چگونه به کاربر اجازه آپلود عکس در TinyMCE با php را بدهید..

این مثال هماهنگ سازی قابلیت آپلود عکس در TinyMCE با image_upload_handler و هندلر php را نشان میدهد. با این قابلیت , کاربر می تواند تصاویر را از کامپیوتر شخصی آپلود و در ادیتور TinyMCE قرار دهد. همچنین با یک رابط کاربری دوستانه (UI) , امکان آپلود فایل با کشیدن و رها کردن را از کامپیوتر می دهد.

 

کد HTML

یک المنت HTML برای افزودن ویرایشگر TinyMCE مشخص میکنیم.

کد JavaScript

در ابتدا , کتابخانه جاوااسکریپت پلاگین TinyMCE را فراخوانی می کنیم.

تنظیمات زیر امکان انتخاب فایل محلی هاست و قابلیت آپلود عکس در TinyMCE را فعال می کند.

  • Image_upload_url – آدرس URL هندلر سمت سرور را مشخص می کند . همین که این مورد تعریف شد , یک زبانه (Tab) آپلود نمایان می شود .
  • Image_upload_handler – این کانفیک هندلر پیش فرض برای آپلود تصویر است . این هندلر دارای یک تابع با ۳ آرگومان است – blobinfo,success,failure . در صورتی که خروجی success باشد در نهایت یک آبجکت از نوع داده jSON برگشت می دهد.

هندلر آپلود (upload.php)

کد php زیر یک هندلر آپلود سمت سرور را برای آپلود عکس در TinyMCE با php نشان میدهد

  • در ابتدا با تابع is_uploaded_file() چک میکنیم آیا فایلی با HTTP POST بارگذاری شده است یا خیر
  • بررسی میکنیم که منبع ارسال فایل صحیح باشد .
  • با تابع pathinfo در php پسوند فایل را اعتبارسنجی میکنیم
  • با تابع move_uploaded_file() فایل را در سرور آپلود میکنیم .
  • پیام آپلود موفقیت آمیز را بصورت jSON برگشت می دهیم . از کلید location برای مشخص کردن مکان تصویر ذخیره شده استفاده می کنم.
حتما بخوانید  آپلود فایل با کشیدن و رها کردن در jQuery

نمایش پنجره آپلود عکس در TinyMCE

آیکون عکس در تولبار ادیتور یک پنجره برای آپلود تصویر را نمایان میکند . در تب Upload , می توانید یک تصویر ار از کامپیوتر انتخاب یا با drag & drop مستقیما بارگذاری کنید . تصویر در سمت سرور آپلود و نهایتا در ادیتور اضافه می شو .

آپلود عکس در TinyMCE با php

تظنیمات اضافی

به طور پیش فرض تمام URL ها به طور خودکار به url های نسبی (relative) تبدیل می شوند . اگر قصد دارید که آدرس URL های واقعی را اضافه کنید , مقدار convert_urls را false قرار بدید که باعث می شود تمام url ها به مقدار واقعی برگشت داده شوند .

امیدوارم از آموزش آپلود عکس در TinyMCE با php لذت برده باشید .

برای دانلود سورس کد کامل این مقاله می توانید به بخش باکس دانلود زیر این مقاله آموزشی مراجعه کنید.

هر سوالی داشتید ، از قسمت نظرات اقدام کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان php و امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

افزایش امنیت سایت

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه