نوشته های من !

راجع به تجربه های شخصی از دنیای برنامه نویسی می نویسم، یا از روزمرگی هام …
آموزش استفاده از tinyMCE + حل مشکل آن با فونت های فارسی
نویسنده:
۱۹ بهمن ۹۲

tinyMCE

شاید تا به حال تو پروژه هایی که انجام دادین نیاز به ویرایشگر متن داشتین یا در آینده حتما خواهید داشت، در واقع دیدم بر اساس سوال کاربران تو این مبحث ظاهرا ابهام زیاد هست پس گفتم یه مطلبی بنویسم به عنوان راهنمایی و این که شاید بتونه مرجعی برای رفع سوال های بعضی از دوستان باشه .

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

ویرایشگر متن چی هست ؟

همینطور که از تصویر مطلب مشخص هست، ویرایشگر متن به چیزی میگن که نوشته کاربرها رو تبدیل می کنه به زبان HTML، درواقع کاربر درگیر استفاده از کد ها نمیشه، بلکه با فشار دادن دکمه هایی، نوشته خودش رو ویرایش میکنه و در خروجی کد HTML این نوشته ها نشون داده میشه.

ویرایشگر های بسیار زیادی توی دنیای انترنت هستن، ولی خب انتخاب سلیقه ای هست و من به شخصه از TinyMCE استفاده میکنم، به شما هم پیشنهاد می کنم ازش استفاده کنید . ( متن باز بودن، انعطاف بالا، پشتیبانی از زبان فارسی، طراحی شده برای سیستم های مدیریت محتوا مثل وردپرس و جوملا و … ، پشتیبانی از مرورگرها و سیستم عامل های متعارف و … از قابلیت های این ویرایشگر هست . )

آموزش استفاده از TinyMCE :

قدم اول ( دانلود و فارسی سازی ) : می تونین آخرین ورژن این ویرایشگر رو از لینک زیر دانلود کنین :

TinyMCE – Download

شما باید لینک اول رو دانلود کنین . ( لینک دوم قابلیت های ویژه jQuery داره و لینک سوم برای توسعه دهنده ها هست . )

برای سازگار کردن با زبان فارسی، نیاز به بسته زبان فارسی دارین، بسته زبان فارسی رو می تونین از لینک زیر دانلود کنین :

TinyMCE – Languages for TinyMCE

در محتویات جدولی که در این صفحه هست بگردین و  Persian رو پیدا کنین و از لینک دانلودی که آخر هر سطر هست، بسته مورد نظر رو دانلود کنین .

بسته های دریافت کرده رو از حالت ZIP خارج کنید، از فایل دوم ( بسته زبان فارسی ) محتویات پوشه langs که همون تک فایل fa.js هست رو در پوشه ی langs از محتویات بسته اول ( یا همون فایل اصلی ویرایشگر ) به این آدرس کپی کنید:

tinymce -> js -> tinymce -> langs

( یا می تونین فایل نمونه ای که آخر مطلب هست رو دانلود کنید، در فولدر tinymce اطلاعات مورد نیاز شما برای استفاده در سایر پروژه ها موجود هست . )

قدم دوم ( بارگذاری در صفحه HTML ) : برای استفاده از این ویرایشگر، پوشه tinymce دوم از مسیر بالا را در هاست آپلود میکنیم یا در سرور محلی خود کپی می کنیم، یک فایل HTML ایجاد می کنیم و کد های زیر رو توش می نویسیم : ( به آدرس دهی صحیح به فایل tinymce.min.js دقت شود . )

<script type="text/javascript" src="/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
language : 'fa'
});
</script>
<form method="post">
<textarea></textarea>
</form>

در خط اول فایل جاوا اسکریپت رو آدرس دهی میکنیم و در خط های ۲ الی ۷ اختصاص داره به تنظیمات این ویرایشگر، معنی خط چهارم این هست که تمام عناصر textarea که در صفحه موجود هست با استفاده از tinyMCE بارگذاری بشن، خط پنجم هم برای تغییر زبان به فارسی هست .

اگه این کار رو به درستی انجام بدین، باید توی صفحه به جای textarea یک ویرایشگر متن ببینین، که البته با عکس این مطلب از نظر ظاهری فرق داره، دلیل این تفاوت بودن یک سری تنظیمات هست در تابع tinymce.init که در قدم بعدی راجع بهش توضیح میدم .

قدم سوم ( تابع tinymce.init و اضافه کردن پلاگین ها ) : تمام تنظیمات این ویرایشگر بر اساس فایل tinymce.init انجام میشه، از جمله اضافه کردن پلاگین ها و یا تغییرات ظاهری. من تابع تنظیماتی رو میزارم که حاصلش عکس این مطلب میشه :

tinymce.init({
selector: "textarea",
language : 'fa',
plugins : 'link',
menubar:false,
statusbar: false,
});

فکر نمی کنم خط های این کد نیاز به توضیح داشته باشه، این نکته رو بگم که برای اضافه کردن بیشتر از یک پلاگین باید اسم اون ها رو با یک فاصله از هم جدا کنید، مانند کد زیر :

tinymce.init({
...
plugins : 'advlist autolink link image lists charmap print preview'
});

لیستی از پلاگین های موجود رو میتونین در پوشه plugins مشاهده کنین.

برای مشاهده لیست کامل تنظیمات به این صفحه مراجعه کنید  و همچنین پلاگین های بیشتر و نحوه ی استفاده از اون ها رو در این صفحه مشاهده کنین .

برخورد مرورگر ها و یا زبان های برنامه نویسی با این ویرایشگر دقیقا مشابه یک textarea معمولی هست با خاصیت های معمول که در فورم ها موجود هست، می تونید با روش های معمولی به اطلاعات دسترسی داشته باشین ( مثل متدهای action و get ) .

مشکل تغییر فونت به حالت پیش فرض هنگام استفاده از فونت های فارسی در TinyMCE :

در یکی از پروژه هام از فونت های فارسی استفاده کردم و  همچنین برای قسمت مدیریت سایت این ویرایشگر متن استفاده شده بود، پروژه کامل شد و من پروژه رو تحویل دادم. بعد از مدتی که سایت فعالیت کرد، من برای دیدن حاصل نهایی کار وارد سایت شدم، وقتی وارد قسمت اخبار سایت شدم، دیدم در بعضی از خبرها در نقاطی تصادفی، فونت یکی از خطوط نوشته شده به حالت پیش فرض صفحه تبدیل میشه ( برای مثال تبدیل به فونت arial میشه )، وقتی وارد پایگاه داده شدم و متن مطالب رو بررسی کردم، متوجه حضور فاصله جدا نشدنی ( یا non-breaking-space ) در متن بعضی از خبرها شدم و بعد از حذف اون فهمیدم که مشکل تغییر حالت فونت بعضی از خطوط از همین کد هست .

tinyMCE error

تصویری که در بالا مشاهده میکنین حاصل کد زیر هست، که در اون فونت نازنین سری B لود شده است :

بنی آدم اعضای یکدیگرند بنی آدم اعضای یکدیگرند بنی آدم اعضای یکدیگرند &amp;amp;amp;amp;amp;amp;amp;amp;nbsp; بنی آدم اعضای یکدیگرند

همینطور که میبینین در این کد استایل خاصی استفاده نشده و کل متن با یک استایل نوشته شده، ولی نتیجه نهایی کد در خط سوم با بقیه خطوط متفاوت هست، نمیدونم این ناسازگاری به وجود آمده از استاندارد نبودن فونت ها هست یا از سیستم عامل یا حتی ورژن مرورگر ( ویندوز هشت – گوگل کروم ورژن ۳۲ ) به هر حال بعد از کمی تحقیق فهمیدم که این فاصله جدا نشدنی به خاطر auto-save خود ویرایشگر متن توی کدها ظاهر میشه و بعد از تغییر کوچکی توی تابع  tinymce.initمشکل حل شد، کد نهایی تابع تنظیمات من به این صورت هست :

<script type="text/javascript">
tinymce.init({
selector: "textarea",
language : 'fa',
plugins : 'link',
menubar:false,
statusbar: false,
paste_auto_cleanup_on_paste : true,
paste_postprocess : function(pl, o) {
o.node.innerHTML = o.node.innerHTML.replace(/&nbsp;/ig, " ");
}
});
</script>

کاری که این تابع اضافه انجام میده، این هست که اون فاصله جدا نشدنی را با یک فاصله معمولی جایگزین می کنه . مشکل سایت بعد از اعمال این تنظیمات حل شد، امیدوارم مشکل شما هم حل بشه .

فایل نمونه این آموزش شامل تمام کد ها رو میتونین از این لینک دانلود کنید. ( ورژن ۴.۰.۱۶ )


(به روز رسانی ۱۳۹۵/۰۱/۰۱)

با توجه به نظر آقای بنیامین پاینده ظاهرا در ورژن‌های جدید این ویرایشگر متن، شیوه مشخص کردن زبان (فارسی‌سازی) تغییر کرده. نظر ایشون رو در ادامه قرار دادم:

لازم دیدم ذکر کنم در آپدیت جدید تاینی ام.سی.ای زبان فارسی رو با

langugage : ‘fa’

نمیشناسه و حتما باید از نام پکیج زبان استفاده بشه
که برای استفاده – اگر Persian -fa دانلود شده باشه باید اینطور استفاده بشه :



tinymce.init{
language : ‘fa_IR’
}

من این مورد رو در نسخه‌های جدید آزمایش نکردم، صرفا نظر رو منعکس کردم که در جریان باشین.
و همچنین ممنون از آقای بنیامین پاینده که این نکته رو گفتن.

66 پیام برای آموزش استفاده از tinyMCE + حل مشکل آن با فونت های فارسی

  1. ناصر ر. گفت:

    ممنون از مطلب مفیدتون

  2. ممنونم بابت آموزش خوبی ارائه دادید .
    خیلی روون توضیح دادید

  3. رمضانی گفت:

    سلام خیلی ممنون از توضیحاتتون فقط همچنان مشکل تایپ اعداد فارسی وجود دارد … اعداد فارسی در ادیتور انگلیسی نوشته میشن … ممنون میشم اگه راهنمایی کنین

    • علا عالم فلکی گفت:

      با سلام،
      مشکل از ویرایشگر متن نیست، شما اگر یک فونت فارسی رو ضمیمه سایت ( یا ویرایشگر متن ) کنید، اعداد هم فارسی نشان داده می شوند.

  4. رمضانی گفت:

    فونت فارسی ضمیمه سایت هست اما باز هم این مشکل وجود داره … نمیدونم چطوری باید فونت فارسی را ضمیمه ویرایشگر متن کنم … میشه راهنمایی کنید
    خیلی ممنون

    • علا عالم فلکی گفت:

      آیا اعداد در بقیه قسمت های سایت فارسی نمایش داده میشن ؟ اگر بعله، پس فرض کنید اسم فونتی که ضمیمه کردین persian باشه، باید داخل استایل تکست باکس فونت رو وارد کنید، به این صورت :
      <textarea style="font-family: persian;"></textarea>

  5. رمضانی گفت:

    خیلی ممنون از توضیحتون … مشکل اینجا بود که با وجود فونت فارسی چون متن از جایی کپی شده و در ادیتور قرار داده شده بود، کلی استایل وکلاس بهش اضافه شده بود و فونت از css تبعیت نمیکرد … آیا راهی وجود دارد برای حذف این کلاس ها … چون من نمیخوام متون استایل های متفاوت بگیرن و میخوام همه از css استایل بگیرن … اما در حال حاضر اگر متنی برای مثال از ویکی پدیا کپی شود کلی استایل بهش اضافه میشود …

    • علا عالم فلکی گفت:

      سلام مجدد، شما اول باید پلاگین paste رو به لیست پلاگین ها اضافه کنین (‌توضیح داده شده به چه صورت چند پلاگین اضافه بشه.)
      و بعد از اون paste_text_sticky: true رو به کانفیگ اضافه کنین. در نهایت تابع کانفیگتون باید چیزی شبیه این بشه :

      tinyMCE.init({
      ...
      plugins : "paste",
      paste_text_sticky : true,
      setup : function(ed) {
      ed.onInit.add(function(ed) {
      ed.pasteAsPlainText = true;
      });
      }
      ....
      })

      بعدش میتونین بقیه مواردی که نیاز دارین به این تابع اضافه کنین. باید مشکلتون حل بشه.

  6. امیر گفت:

    سلام ممنون بابت مطالبی که توضیح دادی
    میخواستم بدونم چطوری میشه درون این ادیتور مطلبی رو که قبلا در بانک اطلاعاتی ذخیره هستش دوباره فراخوانی کرد ویرایش کرد و دوباره در بانک اطلاعاتی ذخیره کرد
    ممنون میشم اگه راهنمایی کنی

    • علا عالم فلکی گفت:

      سلام و تشکر از شما،
      همونطور که تو متن ذکر شده کار کردن با این ویرایشگر مانند کار کردن با یک textarea معمولی هست.

      <textarea>Your Sample String.</textarea>

      اگر این کد رو بنویسید رشته Your Sample String. داخل ویرایشگر متن نمایش داده میشه، حالا می تونید به جای این متن، اطلاعات رو از پایگاه داده فراخوانی کنین.

  7. bahar گفت:

    سلام من در پروژه asp.net از این ادیتور استفاده کردم ولی هنگام اجرا با موزیلا این ادیتور نمایش داده نمیشه اما با IE مشکلی نداره.چطور میتونم مشکلمو حل کنم؟

    • علا عالم فلکی گفت:

      با سلام، نکته اول این ویرایشگر HTML هست و با زبان های سمت کاربر پیاده سازی شده، وقتی جواب نمیده ربطی به زبان ASP نداره. تو جستجویی که داشتم شخصی رو دیدم که مشکل مشابه داشته، این لینک رو مشاهده کنین :
      goo.gl/qxClf9

  8. محمد علی گفت:

    دمت خیلی گرم

  9. محسن گفت:

    سلام. توضیحات عالی است ولی این نسخه min از tinymce است. لطف کنید نسخه کاملش رو که خیلی با امکانات است قرار بدین

    • علا عالم فلکی گفت:

      با سلام و عرض تشکر،
      منظورتون چه امکاناتی هست ؟
      ورژن min به این معنا نیست که قابلیتی حذف شده، نحوه ذخیره سازی فایل تغییر کرده و در نتیجه حجم نهایی کاهش پیدا میکنه. ( البته اگر نظر شما رو به درستی فهمیده باشم. )

  10. خانم گفت:

    سلام خیلی ممنون از توضیحتون اما وقتی من این کد ها رو گذاشتم هرچی textarea هست حذف میشه وجاش هیچش دیده نمیشه میشه راهنمایی کنید ممنون.
    محتویات textarea های من از دیتا بیس <?php echo $row['body'] خوانده میشه

    • علا عالم فلکی گفت:

      من به پیوست این مطلب یک فایل قرار دادم که کدها در اون نوشته شده اند، اون فایل رو دانلود کنین ببینین آیا به درستی نمایش داده میشه ؟ اگر بعله سعی کنین کد های نمونه نوشته شده رو با کد های خودتون مقایسه کنین تا بفهمید مشکل از کجا هست.

  11. تازه کار گفت:

    سلام من فایل ایندکس شما رو برای ورژنTinyMCE 4.1.7 کپی پیست کردم ولی تکست اری آ معمولی نشون میده!
    ولی وقتی خودشو اجرا میکنم خود پوشه شما رو و ورژن شما رو درست کار میکنه!

    • علا عالم فلکی گفت:

      با سلام،
      من کدهای شما رو باید ببینم که بتونم نظر بدم، ولی این رو میتونم بگم که طریقه کانفیگ کردن توی ورژن جدید عوض نشده.

  12. asal گفت:

    خیلی ممنون از شما. من پلاگین image رو اضافه کردم ول نمیتونم عکس درج کنم.چهکاری باید انجام بدم

  13. asal گفت:

    سلام و ممنون از وبلاگ خوبتون.من این ادیتور رو در سایتم قرار دادم.فقط اینکه چطور میتونم عکس هم درج کنم.پلاگین image رو هم جلوی لیست پلاگین ها نوشتم ولی نشد

  14. asal گفت:

    بازم سلام .اقای علا وقتی اینو بنویسم میشه از table هم داخل ادیتور استفاده کرد؟ ,’plugins : ‘link image table ‘

  15. حسن گفت:

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

    • علا عالم فلکی گفت:

      با سلام،
      من همچین مشکلی رو مشاهده نکردم، احتمالا مشکل از سرور نمیتونه باشه، شاید آدرس‌دهی فایل‌ها مشکل داشته باشه برای مثال.

  16. محمد گفت:

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

  17. اسی گفت:

    دمت گرم عزیز
    خیلی حال دادی

  18. حمید گفت:

    سلام. شما برای نمایش کدهاتون از همین ویرایشگر استفاده می کنید. میخوام ویرایشگر کدم در حالت نمایش به کاربر این شکلی باشه
    http://www.w3schools.com/

  19. بهراد گفت:

    سلام
    خیلی ممنون.کاملا کاربردی بود

  20. سلام.
    مرسی از آموزش خوبت
    لازم دیدم ذکر کنم در آپدیت جدید تاینی ام.سی.ای زبان فارسی رو با
    langugage : ‘fa’
    نمیشناسه و حتما باید از نام پکیج زبان استفاده بشه
    که برای استفاده – اگر Persian -fa دانلود شده باشه باید اینطور استفاده بشه :
    tinymce.init{
    language : ‘fa_IR’
    }

    thanks a lot 🙂

  21. نیما گفت:

    سلام. وقتی که من توی ادیتور tinymce توی متن میخام از تگ های HTML مثل یا استفاده کنم، برای بار اول این کار انجام میشه و توی دیتا بیس ذخیره میشه. اما وقتی که میخام متنو ویرایش کنم این تگ ها حذف می شه. اینم بگم که این تگ ها قسمتی از متن هستش نه قسمتی از source برنامه. ممنون میشم اگه بتونید راهنمایی کنید که چطوری این مشکلو بر طرف کنم.

    • نیما گفت:

      توی سوال بالا من از تگ های style و script نام برده بودم که توی سوال بالا حذف شدند. البته احتمالا چون این فقط یک Textarea هستش و ادیتور نیست احتمالا به خاطر XSS حذف شده. اما من XSS هم غیر فعال کردم. ایراد از ادیتور هست.

    • علا عالم فلکی گفت:

      با سلام،
      این ویرایشگر وقتی کد HTML نوشته میشه، کدها رو تبدیل به unicode میکنه.به همین دلیل نباید مشکلی پیش بیاد. موقع ویرایش مطلب، این تگ‌ها از ابتدا نشان داده نمی‌شوند؟ یا بعد از ویرایش حذف می‌شوند؟
      شما می‌تونین پلاگین code رو به ویرایشگر متن خودتون اضافه کنین، موقع واکشی مطالب از پایگاه داده ببینید چه کد HTMLی داخل ویرایشگر قرار میگیره.

  22. نیما گفت:

    سلام مجدد.
    زمانی که برای اولین بار تگی را داخل محیط ادیتور مینویسیم و اونو آپلود میکنیم ایرادی پیش نمیاد و اونو به درستی هم توی ادیتور و هم توی صفحه اصلی سایت نشون میده. اما زمانی که میریم متنو ادیت کنیم، اصلا اون تگ ها توی محیط tiny و هم توی قسمت source نمایش داده نمی شند. یعنی موقعی که tiny اینیشیال می شه به طور اتوماتیک این تگ ها را حذف میکنه. حتی اگه داخل تگ Code هم باشند باز این اتفاق میوفته. حتی کدهایی که درون تگهای pre هم هستند (برای پلاگین codesample که برای های لایت کردن کد ازش استفاده میشه) نشون داده نمیشند. این نشون ندادنشون باعث میشه که وقتی حتی بدون تغییر توی متن اونو دوباره آپدیت میکنی، چون این اطلاعات توی source نیستند، باز از متن حذف میشند و توی دیتا بیس ذخیره میشند. امیدوارم تونسته باشم بگم مشکلم دقیقا چی هست.

    • علا عالم فلکی گفت:

      سلام مجدد،
      شرمنده طول کشید جواب بدم، متوجه مشکلتون شدم، یک سری تگ‌ها رو خود tinyMCE فیلتر میکنه، فکر میکنم باید راجع‌به valid_element بخونین. یک سری تگ‌ها هم همونطور که خودتون گفتین به خاطر مشکلات امنیتی فیلتر میکنه، برای مثال تگ اسکریپت. البته فکر میکنم اون هم راه داره درست کردنش. من چون خودم درگیر این مشکل نبودم به همین خاطر درگیر حل مشکل هم نشدم. ولی توی جستجویی که کردم به تنظیمات valid_element و extended_valid_elements رسیدم. شما هم راجع‌به این موارد جستجو کنین، ایشالا مشکلتون حل میشه.

  23. رها گفت:

    سلام من توی formapplication دارم از tiny استفاده می کنم
    وقتی از دستور tinymce.init استفاده میکنم ویرایشگر اعمال نمیشه
    ولی وقتی از دستور tinyMce_Init استفاده میکنم اعمال میشه
    و بجای texterea از textbox استفاده کردم
    حالا وقتی محتویات ویرایشگر رو توی دیتابیس ذخیره می کنم اطلاعات با تگ P ذخیره می شن چطور می تونم این تگ P رو از بین ببرم

    • علا عالم فلکی گفت:

      با سلام،
      تگ P رو خود ویرایشگر به صورت پیش‌فرض قرار میده. شاید راهی باشه که شما بتونین این تگ رو حذف کنین. ولی منطقی نیست، برای مثال اگه یک کاربر رنگ متن رو عوض کرد، این تغییر رنگ با استفاده از کدهای HTML نشون داده میشن. پس اگه قراره شما کدهای HTML نداشته باشین توی متن بهتره اصلا از ویرایشگر متن استفاده نکنین. البته شاید من مشکل شما رو کامل متوجه نشدم.

  24. فاطمه گفت:

    سلام دوست عزیز. مرسی بابت مطالب جالبت.من از این ادیتور توی سایتم استفاده کردم. مشکلی در اجراش ندارم ولی وقتی اینتر بزنم و به خط بعد برم و یه چیزی تایپ کنم به مشکل میخوره وفکر کنم که تگ p و br رو نخونه. یه دنیا ممنون اگه بتونین راهنماییم کنین

    • علا عالم فلکی گفت:

      با سلام و تشکر،
      من دقیقا متوجه مشکلتون نشدم، یعنی بعد از زدن Enter به خط بعد میره، ویرایشگر تگ p رو درج نمیکنه؟

      • فاطمه گفت:

        سلام و عرض خسته نباشید. این عکس اون پیجی هس که داخلش ادیتور گذاشتم
        http://uupload.ir/files/jljc_p1.jpg
        توی تایپ کردنای بدون اینتر مشکلی نیس ولی وقتی اینتر میزنم داخل ادیتور این خطا رو میده:
        http://uupload.ir/files/9be6_p2.jpg

        • علا عالم فلکی گفت:

          سلام مجدد،
          متاسفانه من ASP کار نکردم، اما از پیام خطایی که برای شما نمایش داده میشه، مشکل از تگ‌های HTMLی هست که ویرایشگر متن تولید میکنه. به دلایل امنیتی ASP اجازه نمیده از تگ‌های HTML استفاده بشه. باید کمی جستجو کنین تا به جواب برسین. برای مثال لینک مقابل رو مشاهده کنین، امیدوارم مشکل شما رو حل کنه. [لینک]

  25. فاطمه گفت:

    مرسی دوست عزیز.

  26. سام گفت:

    با سلام
    جناب مهندس, من تازه با ورد پرس آشنا شدم میخام مثلا فونت مادر دسته بندی هارو تغییر بدم راهنمای کنید لطفا

  27. ممد گفت:

    عرض ادب و احترام
    میخواستم بدونم میشه اپلود عکس رو هم اضافه کرد به این ادیتور؟

    • علا عالم فلکی گفت:

      با سلام،
      تا جایی که یادمه فکر کنم یک پلاگین برای اضافه کردن عکس داشت.
      می‌تونید از صفحه پلاگین‌ها که لینکش توی مطلب هست جستجو کنین ببینین پیدا می‌کنین، روش نصب هم که توضیح داده شده.

      • ممد گفت:

        سرچ کردم اونایی که بودن خوب بودن ولی پولی !
        رایگان ها هم یا نصب نمیشدن یا درست کار نمیکردن
        میشه یه دکمه گذاشت و کاربر عکس رو اپلود کنه فقط؟
        میشه راهنمایی کنید
        ؟
        یعنی کاربر وقتی روی اون دکمه کلیک کرد عکسشو اپلود کنه خب ..حالا تا انیجاش اوکیه میدونم چوریه ! مشکلم انیجاست نمیدونم چطوری وارد textarea کنم اون عکس رو و چطوری دقیقا همونجایی که کاربر میخواد !

        • علا عالم فلکی گفت:

          سلام مجدد،
          منظور بنده این بود که برای خود tinyMCE پلاگین دانلود کنین. نه یک پلاگین جدا صرفا برای آپلود عکس.
          و منظورم از شیوه نصب هم گفته شده این بود که داخل همین مطلب من شیوه نصب پلاگین‌های tinyMCE رو شرح دادم.
          لینک‌های زیر رو هم نگاه کنین حتما متوجه میشین.
          [لینک۱] [لینک۲]

          • ممد گفت:

            ممنون بابت پاسخگویی به موقع
            http://justboil.me/
            این رو پیدا کردم
            همون چیزیه که من میخواستم
            کارک کرد
            بازم تشکر
            اینو فرتسادم کسی دیگه کارش گیر بود از این استفاده کنه رایگانم هست

  28. محمد علی خاصه پز گفت:

    با سلام و تشکر از مقاله عالیتون
    من یک مشکل دارم اینکه وقتی اسکریپت های ادیتور رو به صفحه اضافه می کنم و وقتی برنامه را run می کنم دیگه textare نمایش داده نمی شه میشه لطفا راهنمایی بفرمایید و بگید مشکل از کجاست.
    فکر نمی کنم ربطی داشته باشه ولی من دارم با asp.net mvc کد می زنم.
    با تشکر

  29. vahid گفت:

    سلام من با asp یه وب تو local درست کردم الان میخوام فونت ای فارسی رو به این ادیتور اضافه کنم باید چیکار کنم

    ممنون میشم جواب بدین…

  30. vahid گفت:

    آقا یه سوال چطور فونت ای دیگه رو بهش اضافه می کنیم…..

  31. vahid گفت:

    Create fonts folder : tinymce/themes/advanced/ – if not exists.
    Put font in fonts “tinymce/themes/advanced/fonts/aphrodite_pro.ttf.

    Add font in editor_template.js & editor_template_src.js include in “theme_advanced_fonts”

    Ex: theme_advanced_fonts: “Aphrodite Pro=aphrodite pro”,

    Maintain “theme_advanced_fonts” font name sequence in above both js files.

    Most important part: “Aphrodite Pro” name is defined by us where “aphrodite pro” is the name of the font.

  32. ناهید گفت:

    سلام توی این ادیتور میشه خاصیت alt واسه عکسا گذاشت ؟

    • علا عالم فلکی گفت:

      سلام،
      بله امکانش هست، اگر فیلد «image description» رو پر کنین، تگ alt هم پر میشه.
      می‌تونین برای اطمینان دموی این قابلیت رو ببینین و کدهای تولیدی ویرایشگر رو مشاهده کنین. [لینک]

پاسخ دهید

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