افزودن فونت و تغییر فونت پیش فرض در CkEditor

افزودن فونت و تغییر فونت پیش فرض در CkEditor

یکی از مواردی که خیلی از برنامه نویسان بعد از استفاده از ادیتور CkEditor به فکر اون هستن این هست که چجوری میتونن فونت های پیش فرض Ckeditor رو تغییر بدن که سوال شما هم هست. این کار خیلی ساده هست که براتون توضیح میدم. اول اینکه این لینک رو در این رابطه میتونید مطالعه کنید چون خیلی خوب و کامل توضیح داده ولی خب بنده هم در ادامه براتون توضیح میدم.

مراحل افزودن فونت دلخواه و تغییر فونت پیش فرض CkEditor

• مرحله اول : خب ابتدا در پوشه ckEditor که در روت پروژه خودتون دارید یک فایل css درست کنید و اسمش رو بذارید fonts.css. در تصویر زیر میتونید ببینید که دقیقا منظور چی هست 

• مرحله دوم : خب در فایل fonts.css آدرس فونتی رو که میخواید به ckeditor خودتون اضافه کنید بنویسید. (این فونت رو باید از قبل توی یک پوشه ای در روت سایت قرار داده باشید.)

@font-face {
    font-family: 'IRANSansWeb';
    src: url('/fonts/IRANSansWeb.eot');
    src: url('/fonts/IRANSansWeb.eot') format('embedded-opentype'), url('/fonts/IRANSansWeb.woff') format('woff'), url('/fonts/IRANSansWeb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

همونطوری که در کدهای css بالا میبینید یک پوشه به نام fonts هم در روت سایت داریم که فونت مورد نظر توش کپی شده. حالا باید از این فایل css استفاده کنیم.

• مرحله سوم : فایل config.js مربوط به ادیتور رو باز کنید و دستورات زیر رو توش بنویسید :

CKEDITOR.editorConfig = function( config ) {
	config.contentsCss = '/lib/ckeditor/fonts.css';
	config.font_names = 'IRANSansWeb';
}

خب مراحل کار تمام هست. شما الان اگر ckEditor رو اجرا کنید می بینید که فونت IranSansWeb توی قسمت فونت های ادیتور شما نمایش داده میشه.