در سیستم جوملا قابلیت های متعددی برای ویرایش متن بکار گرفته شده اند تا کاربر بدون نیاز به یک برنامه جانبی متن خود را ویرایش ، اصلاح و ارائه نماید . از این دسته امکانات می توان به خاصیت الصاق استایل (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 قالب را ویرایش کنید و کد زیر را با نام فایل خود جایگزین و در تگ <head> </head>  بگذارید .


<link type="text/css" href="http://test.com/template/template-name/css/editor.css" rel="stylesheet">