رفتن به مطلب
sms118

تنظیمات خاص ویرایشگر tinyMCE در جوملا

پست های پیشنهاد شده

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

ویرایشگر tinymce در جوملا خصوصیات بسیار متعددی دارد که خاصیت ذکر شده در این ویرایشگر به شما امکان می دهد تا یک بخش از متن ، تصویر ، لیست ، .و.. را انتخاب و به ان یک استایل نمایشی خاص را الصاق کنید . این امر باعث می شود تا شما به صادی خروجی های بسیار زیبا و کاربر پسندی تولید کنید .

در این روش مکان ویا محتوای انتخاب شده در ویرایشگر با تغییر لیست style دارای یک کلاص خاص می شوند که این کلاس خاص می تواند رنگ ، اندازه و دیگر پارامتر های مختلف را برای ان محتوای انتخاب شده تنظیم نماید .

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

1.ابتدا وارد صفحه مدریت جوملا می شوید.

2. از نو بالا بر روی تب گسترش دهنده ها (Extensions ) رفته و آیتم مدریت افزانه ها (Plugin Manager) را انتخاب می نمایید.

3.در صفحه مدریت افزانه ها می بایست افزانه tinyMCE را پیدا کرده و بعد از مشخص کردن آن بر روی گزینه ویرایش در بالای صفحه کلید نمایید. البته مستقیما هم ی توانید بر روی نام ان کلید کرده و به مرحله ویرایش بروید.

4. در صفحه باز شده فیلد های برای تنظیمات می بینید که مختصر آنها را توضیح می دهیم.

جزئیات :

نام ( Name ):

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

فعال شده (Enabled ) :

وضعیت فعال بودن الب متنی را معیین می کند.

نوع (Type ) :

این قسمت به صورت پیش فرض پر شده است.

فایل افزانه (Plugin File: ) :

نام افزانه ای که می خواهید زیر مجموعه آن باشید ( tinymce ) را وارد مینمایید.

سطح دسترسی (Access Level ) :

سطح دسترسی این قالب به افاد را مشخص می نمایید.

چینش ( Order ) :

در این قسمت (Edito – TinyMCE 2.0)0 را انتخاب نمایید.

حال در قسمت Template CSS classes ادر کامل فایل css که می خواهید لیست استایل های ان در ویریشگر افزوده شود وارد کنید . به طور مثال :

http://test.com/template/template-name/css/editor.css

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

.test-larg-text{

font-size:20px;

color:#0c0c0c;

}

.img-box{

padding:2px;

border:1px solid #0c0c0c;

}

با توجه به استفاده از استایل های فوق شما در لیست استایل ویرایشگر گزینه های test-larg-text و img-box را مشاهده خواهید کرد و بعد از انتخاب قسمتی و یا شیئی که می خواهید استایل خاصی را داشته باشد و الصاق استایل موزد نظر از طریق انتخاب از لیست ، ان بخش با خصوصیات تعریف شده برای ان استایل نمایش داده می شود .

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

برای این منظرو به قسمت مدیریت قالب ها رفته و فایل html قالب را ویرایش کنید و کد زیر را با نام فایل خود جایگزین و در تگ

بگذارید .

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
ارسال شده در (ویرایش شده)

با اجازه دوست گرامی جناب sms118یه توضیحاتی رو هم من اضافه کنم

 

میتونید توی قسمت Custom CSS classes نام یه فایل دیگه رو هم به ادیتور معرفی کنید.

که این فایل باید در قالب پیشفرض  در فولدر css باشد.

البته اگر فایل در جای دیگری بود باید آدرس فایل به صورت کامل قرار گیرد.

 

اگه که روی این گزینه چند ثانیه ماوس رو نگه دارید. توضیحات کامل رو براتون میاره

ویرایش شده توسط تیرداد

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

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

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


×
×
  • افزودن...