WordPress 3.9+ TinyMCE 4 نکات: افزودن سبک ها ، دکمه ها ، فونت ها ، کشویی و بازشو

یکی از به روزرسانی های مورد علاقه من در وردپرس 3.9 ساخت هسته TinyMCE نسخه 4.0 بود. TinyMCE جدید به نظر می رسد تمیز تر است (واقعاً با داشبورد WP مطابقت دارد) و دارای قابلیت های اضافه شده ای بسیار زیبا است. برای کار با TinyMCE جدید ، بسیاری از تم ها و افزونه های قدیمی من به روز شده بودند ، بنابراین من مدتی را صرف حفر کردن کردم API و فهمیدن چیزهای جالب در زیر چند مثال در مورد چگونگی گسترش عملکرد TinyMCE به شما ارائه می دهم. من نمی خواهم همه مراحل را طی کنم یا کد دقیقاً به چه معنی است (این برای برنامه نویسان در نظر گرفته شده است) بلکه کد دقیقی را در اختیار شما قرار می دهیم که می توانید در موضوع یا افزونه خود کپی / چسباندن کنید و سپس متناسب با آن.


اندازه فونت و فونت خانواده را انتخاب می کنید

به طور پیش فرض ، قلم های سفارشی و اندازه فونت ها به ویرایشگر TinyMCE اضافه نمی شوند. عملکرد زیر هر دو این کرکره را به سمت چپ ویرایشگر در ردیف دوم اضافه می کند. اگر می خواهید آن را در ردیف دیگری بخواهید بگویید “mce_buttons_2” را تغییر دهید (به عنوان مثال: برای “ردیف 3” از “mce_buttons_3” استفاده کنید).

// فعال کردن اندازه قلم و خانواده قلم را در ویرایشگر انتخاب کنید
اگر (! function_exists ('wpex_mce_buttons')) {
عملکرد wpex_mce_buttons (دکمه $) {
array_unshift (دکمه $ ، "انتخاب")؛ // افزودن قلم را انتخاب کنید
array_unshift (دکمه $ ، 'fontsizeelect')؛ // افزودن اندازه قلم را انتخاب کنید
دکمه های $ بازگشت؛
}
}
add_filter ('mce_buttons_2'، 'wpex_mce_buttons')؛

افزودن اندازه فونت های سفارشی

به طور پیش فرض اندازه فونت روی مقادیر pt تنظیم می شود که همیشه ایده آل نیست. من ترجیح می دهم از مقادیر پیکسل (12px، 13px، 14px، 16px..etc) استفاده کنم و گزینه های بیشتری برای انعطاف پذیری grater ارائه دهم. عملکرد زیر گزینه های پیش فرض اندازه فونت را در انتخاب کشویی تغییر می دهد.

// سفارشی کردن اندازه فونت ویرایشگر mce
اگر (! function_exist ('wpex_mce_text_size')) {
عملکرد wpex_mce_text_size ($ initArray)
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px"؛
بازگرداندن $ initArray؛
}
}
add_filter ('tiny_mce_before_init'، 'wpex_mce_text_size')؛

افزودن قلم های سفارشی

گزینه های پیش فرض قلم در انتخاب خانواده فونت ها ، همه قلم های “ایمن از وب” هستند ، اما اگر می خواهید فونت های بیشتری به انتخاب کننده اضافه کنید ، چه می کنید؟ ممکن است برخی از فونت های Google؟ واقعاً آسان خواهیم بود که به مثال زیر نگاهی بیندازید.

// افزودن قلم های سفارشی به لیست قلم ها
اگر (! function_exists ('wpex_mce_google_fonts_array'))) {
عملکرد wpex_mce_google_fonts_array ($ initArray)
$ initArray ['font_formats'] = 'Lato = Lato؛ Andale Mono = andale mono، Times؛ Arial = arial، Helvetica، sans-serif؛ Arial Black = arial black، avant Garde؛ Book Antqua = antiqua book، palatino؛ MS = طنز sms ms، sans-serif؛ پیک جدید = پیک جدید، پیک؛ جورجیا = جورجیا، پالاتینو؛ Helvetica = helvetica؛ Impact = ضربه، شیکاگو؛ Symbol = نماد؛ Tahoma = tahoma، arial، helvetica، sans-serif؛ ترمینال = ترمینال ، موناکو ؛ تایمز نیو رومان = بار جدیدی از رومن ، زمان ؛ Trebuchet MS = trebuchet ms ، geneva؛ Verdana = verdana ، ژنو ؛ Webdings = webdings؛ Wingdings = بال های ، zapf dingbats '؛
بازگرداندن $ initArray؛
}
}
add_filter ('tiny_mce_before_init'، 'wpex_mce_google_fonts_array')؛

توجه کنید که چگونه “کد” را در کد بالا به لیست اضافه کردم؟ ساده است! در موضوع Total WordPress من واقعاً هر نوع قلم سفارشی را که در سایت استفاده شده است مطابق تعریف در صفحه تمایل حلقه می کنم و آنها را به جعبه انتخاب اضافه می کنم تا ضمن ویرایش پست ها و صفحات شما (شیرین) نیز در دسترس باشند. اما کد فقط خانواده فونت را به حالت کشویی آن تبلیغ می کند ، اسکریپت را جادویی بارگیری نمی کند ، به طوری که وقتی متن خود را در ویرایشگر تغییر می دهید ، می توانید واقعاً آن فونت سفارشی را که روی آن اعمال شده است مشاهده کنید … این همان کد زیر است!

// اضافه کردن اسکریپت های Google برای استفاده با ویرایشگر
اگر (! function_exists ('wpex_mce_google_fonts_styles')) {
عملکرد wpex_mce_google_fonts_styles ()
$ font_url = 'http://fonts.googleapis.com/css؟family=Lato:300،400،700'؛
add_editor_style (str_replace ('،'، '٪ 2C'، $ font_url))؛
}
}
add_action ('init'، 'wpex_mce_google_fonts_styles')؛

منوی کشویی قالبها (سبک) را فعال کنید و سبکهای جدید اضافه کنید

روند نزولی “سبک ها” در WP 3.8 را به خاطر می آورید؟ خیلی عالی بود! شما می توانید از آن برای افزودن کلاسهای جالب استفاده کنید تا در ویرایشگر پست مورد استفاده قرار گیرد (من از آن در WPExplorer برای دکمه ها ، دهانه های رنگی ، جعبه ها و … استفاده می کنم). ما در WP 3.9 خواهیم بود. شما هنوز هم می توانید سبک اضافه کنید ، با این حال در TinyMCE 4.0 جدید به “فرمت ها” تغییر نام داده است ، بنابراین کمی متفاوت است. در زیر مثالی از نحوه فعال سازی کشویی فرمت ها و همچنین اضافه کردن برخی موارد جدید به آن آورده شده است.

منوی کشویی فرمت های وردپرس TInyMCE

منوی کشویی فرمت ها را فعال کنید

این در واقع به همان روش قبل از WP 3.9 انجام شده است ، اما من به اشتراک گذاری incase شما نمی دانید چگونه آن را انجام دهید.

// اضافه کردن منو کشویی فرمت ها به MCE
اگر (! function_exists ('wpex_style_select')) {
عملکرد wpex_style_select (دکمه $) {
array_push (دکمه $ ، "سبک انتخاب")؛
دکمه های $ بازگشت؛
}
}
add_filter ('mce_buttons'، 'wpex_style_select')؛

موارد جدید را به فرمت ها اضافه کنید

اضافه کردن موارد جدید بسیار آسان است. لطفاً توجه کنید که چگونه “تنظیمات $ [[style_formats_merge”] = صحیح را اضافه کردم ” به کد زیر ، این اطمینان می دهد که ویرایش های شما به منوی کشویی فرمت ها به همراه سایر موارد اضافه شده اند – کل موارد را نادیده بگیرید (شاید سایر افزونه ها بخواهند از آن نیز استفاده کنند).

// اضافه کردن سبک های جدید به منوی کشویی "قالب" TinyMCE
اگر (! function_exists ('wpex_styles_dropdown')) {
عملکرد wpex_styles_dropdown ($ تنظیمات) {

// آرایه ای از سبک های جدید ایجاد کنید
$ new_styles = آرایه (
آرایه(
'title' => __ ('سبک های سفارشی' ، 'wpex'),
'موارد' => آرایه (
آرایه(
'عنوان' => __ ("دکمه تم" ، "wpex"),
'selector' => 'a',
'کلاس' => 'دکمه تم'
),
آرایه(
'title' => __ ('Highlight'، 'wpex'),
'inline' => 'دهانه',
'کلاس' => 'برجسته متن',
),
),
),
)؛

// ادغام سبک های قدیمی و جدید
$ settings ['style_formats_merge'] = true؛

// اضافه کردن سبک های جدید
$ settings ['style_formats'] = json_encode ($ new_styles)؛

// تنظیمات جدید را برگردانید
تنظیمات $ را برگردانید.

}
}
add_filter ('tiny_mce_before_init'، 'wpex_styles_dropdown')؛

یک دکمه ساده MCE اضافه کنید

افزودن یک دکمه جدید به ویرایشگر TinyMCE مخصوصاً برای کد های کد مفید است ، زیرا به عنوان یک کاربر لازم نیست کد های کوتاه را به خاطر بسپارید ، می توانید به راحتی یک دکمه را کلیک کنید و آن را وارد کنید. من نمی گویم که برای تمام کد های کوتاه خود دکمه های 100 را به TinyMCE اضافه کنید (من متنفرم وقتی توسعه دهندگان این کار را می کنند ، این چنین کار بدی است و وحشتناک به نظر می رسد) اما اگر 1 یا چند مورد اضافه کنید من اجازه می دهم آن را منتقل کنم. می خواهید یک دسته اضافه کنید ، پس باید همانطور که در بخش زیر توضیح داده شده است ، یک زیرمنو ایجاد کنید.

دکمه جدید وردپرس MCE

PHP Code – پلاگین جدید MCE را در WP اعلام کنید

با استفاده از این کد ، پلاگین MCE جدید شما اعلام خواهد کرد که مکان فایل جاوا اسکریپت “mce-button.js” را تغییر دهید تا محل پرونده شما مطابقت داشته باشد (که من در زیر بخش بعدی کد را به شما ارائه می دهم). بدیهی است که پیشوند “من” را به چیزی منحصر به فرد تر تغییر می دهد!

// توابع خود را در فیلترهای صحیح قرار می دهد
عملکرد my_add_mce_button ()
// بررسی مجوزهای کاربر
اگر (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
برگشت؛
}
// بررسی کنید که WYSIWYG فعال است یا خیر
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins'، 'my_add_tinymce_plugin')؛
add_filter ('mce_buttons'، 'my_register_mce_button')؛
}
}
add_action ('admin_head'، 'my_add_mce_button')؛

// اعلام اسکریپت برای دکمه جدید
عملکرد my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js'؛
$ plugin_array را برگردانید
}

// دکمه جدید را در ویرایشگر ثبت کنید
عملکرد my_register_mce_button (دکمه $) {
array_push (دکمه $ ، "my_mce_button")؛
دکمه های $ بازگشت؛
}

JS Code – دکمه را به MCE اضافه کنید

این کد js در پرونده js ثبت شده در قطعه بالا در عملکرد “Symple_shortcodes_add_tinymce_plugin” می رود. این باید یک دکمه متنی جدید را اضافه کند که می گوید “دکمه جدید” را در ویرایشگر خود قرار داده و با کلیک بر روی آن متن “WPExplorer.com عالی است!” (البته).

(تابع() {
tinymce.PluginManager.add ("my_mce_button" ، عملکرد (ویرایشگر ، آدرس اینترنتی) {
editor.addButton ('my_mce_button'، {
متن: "دکمه جدید",
نماد: false,
onclick: function ()
editor.insertContent ('WPExplorer.com عالی است!')؛
}
})؛
})؛
}) ()؛

نماد سفارشی را به دکمه جدید MCE خود اضافه کنید

در بالا به شما نشان دادم که چگونه یک دکمه جدید اضافه کنید که به عنوان “دکمه جدید” در ویرایشگر نمایش داده می شود ، این کمی لنگ است … بنابراین کد تغییر یافته به شما نشان می دهد که چگونه نماد دلخواه خود را اضافه کنید.

یک صفحه سبک با CSS خود بارگیری کنید

از این تابع برای بارگیری یک شیوه نامه جدید برای استفاده در صفحه مدیریت خود استفاده کنید – ممکن است برخی از افزونه ها / تم ها یک سبد سبک اضافه می کنند ، بنابراین اگر موضوع / افزونه شما این کار را انجام داده است از این گزینه عبور کرده و فقط CSS دلخواه خود را اضافه کرده و js را تغییر دهید (تصویر زیر).

عملکرد my_shortcodes_mce_css ()
wp_enqueue_style ('Symple_shortcodes-tc'، plugins_url ('/ css / my-mce-style.css'، __FILE__))؛
}
add_action ('admin_enqueue_scriptts'، 'my_shortcodes_mce_css')؛

CSS سفارشی شما

این CSS است برای اضافه کردن شیوه نامه بارگذاری شده در گذشته.

i.my-mce-icon
پس زمینه-تصویر: url ('آدرس اینترنتی شما')؛
}

جاوا اسکریپت خود را نیشگون بگیرید

اکنون جاوا اسکریپت ساده ای را که قبلاً اضافه کرده اید برای حذف پارامتر متن ببندید و به جای تنظیم آیکون به غلط ، به آن یک کلاس کلاس دلخواه بدهید.

(تابع() {
tinymce.PluginManager.add ("my_mce_button" ، عملکرد (ویرایشگر ، آدرس اینترنتی) {
editor.addButton ('my_mce_button'، {
icon: 'my-mce-icon',
onclick: function ()
editor.insertContent ('WPExplorer.com عالی است!')؛
}
})؛
})؛
}) ()؛

دکمه اضافه کردن با Submenu

دکمه MCE Submenu

در ابتدا ذکر کردم که اضافه کردن یک تن از آیکون های جدید به نوار TinyMCE یک ایده بد است (و آن این است) بنابراین کد زیر را بررسی کنید تا ببینید چگونه می توانید جاوا اسکریپت را ویرایش کنید تا یک زیرمنو را برای دکمه دلخواه خود نمایش دهید. اگر می خواهید آن را در عمل مشاهده کنید ، من را ببینید کد کوتاه کد تصویری.

(تابع() {
tinymce.PluginManager.add ("my_mce_button" ، عملکرد (ویرایشگر ، آدرس اینترنتی) {
editor.addButton ('my_mce_button'، {
متن: 'نمونه کشویی',
نماد: false,
نوع: "menubutton",
منو: [
{
متن: "مورد 1",
منو: [
{
متن: "مورد 1",
onclick: function ()
editor.insertContent ('WPExplorer.com عالی است!')؛
}
},
{
متن: "مورد زیر 2",
onclick: function ()
editor.insertContent ('WPExplorer.com عالی است!')؛
}
}
]
},
{
متن: "مورد 2",
منو: [
{
متن: "مورد 1",
onclick: function ()
editor.insertContent ('WPExplorer.com عالی است!')؛
}
},
{
متن: "مورد زیر 2",
onclick: function ()
editor.insertContent ('WPExplorer.com عالی است!')؛
}
}
]
}
]
})؛
})؛
}) ()؛

با کلیک بر روی دکمه خود ، پنجره بازشو اضافه کنید

در مثال بالا ممکن است توجه داشته باشید که هر دکمه متن “WPExplorer.com عالی است!” جالب است ، اما در مورد ایجاد یک پنجره پاپ آپ که کاربر می تواند موارد وارد شده در متن را تغییر دهد ، چطور؟ حالا این شیرین خواهد بود! و این چیزی است که من به نسخه 1.6 کد های Symple من اضافه کرده ام ، و این پلاگین را بسیار کاربر پسند تر کرده است.

پنجره پاپ آپ MCE وردپرس

(تابع() {
tinymce.PluginManager.add ("my_mce_button" ، عملکرد (ویرایشگر ، آدرس اینترنتی) {
editor.addButton ('my_mce_button'، {
متن: 'نمونه کشویی',
نماد: false,
نوع: "menubutton",
منو: [
{
متن: "مورد 1",
منو: [
{
متن: 'پاپ آپ',
onclick: function ()
editor.windowManager.open ({
عنوان: 'درج کد کوتاه تصادفی',
بدن: [
{
نوع: "جعبه متن",
نام: 'textboxName',
برچسب: جعبه متن,
مقدار: '30'
},
{
نوع: "جعبه متن",
نام: 'multilineName',
برچسب: "جعبه متن چند خطی",
مقدار: "می توانید مطالب زیادی را در اینجا بیان کنید",
چند خطی: درست است,
minWidth: 300,
minHeight: 100
},
{
نوع: "جعبه لیست",
نام: 'listboxName',
برچسب: "جعبه لیست",
'ارزش های': [
{متن: "گزینه 1" ، مقدار: "1",
{متن: "گزینه 2" ، مقدار: "2",
{متن: "گزینه 3" ، مقدار: "3"
]
}
],
onsubmit: function (e)
editor.insertContent ('[[random_shortcode textbox = "" + e.data.textboxName + "" multiline = "" + e.data.multilineName +' "listbox =" "+ e.data.listboxName + '"] ")؛
}
})؛
}
}
]
}
]
})؛
})؛
}) ()؛

این جالب است … حالا چه?

سؤال خوبی بود! اکنون زمان آن رسیده است که این ترفندهای جالب را بکشید و بروید حماسه ای ایجاد کنید یا افزونه ها / تم های خود را به روز کنید تا با TinyMCE جدید در وردپرس 3.9 سازگار باشد. به من اطلاع دهید که در کامنتهای زیر به چه نتیجه ای رسیده اید!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map