💻 آخرین فرصت یادگیری برنامه‌نویسی با آفر ویژه قبل از افزایش قیمت در ۵ آذر ماه (🎁 به همراه یک هدیه ارزشمند )
۰ ثانیه
۰ دقیقه
۰ ساعت
۳ آزاده نوری
باز شدن دیالوگ باکس به جای درج شورت کد
جامعه وردپرس (برنامه نویسی) ایجاد شده در ۱۰ مهر ۱۴۰۲

سلام استاد عزیز خسته نباشید

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

با سلام

لینک زیر از مستندات خود tinyMCE رو مطالعه کنید » راهنمای اضافه کردن دیالگو و گرفتن فرم‌های مختلف شرح داده شده است.
TinyMCE Dialog

موفق باشید

بهنام مرادی ۱۰ مهر ۱۴۰۲، ۱۴:۱۶

ممنون

من مستندات رو خونده بودم، اگه متوجه شده بودم باید چیکار کنم اینجا سوال نمی‌پرسیدم. 

توضیحات لینک یه ساختار خیلی متفاوتی از چیزی که تو دوره یاد گرفتیم داره و برای من که کل دانشم از TinyMCE، همین دوره هست پیچیده س. اگه دوستان دیگه موفق شدن پیاده سازی کنن ممنون میشم اینجا به اشتراک بذارن. 

آزاده نوری ۱۱ مهر ۱۴۰۲، ۰۵:۲۵

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

 

بخش اول : ریفکتور رو کدهای استاد فایل tinymce-custom-buttons

 

function add_tinymce_plugin_js( $plugins_array ) {
	# Define the base URL for your TinyMCE custom buttons' JS files
	$base_js_url = get_template_directory_uri().'/assets/js/tinymce-buttons.js';
	# Array of your custom TinyMCE button names
	$button_names = [
		'show_free_video',
		'show_blockquote',
		# Add new button names here as needed
	];
	# Loop through each button name and assign the JS URL to it in the plugin's array
	foreach ( $button_names as $button_name ) {
		$plugins_array[ $button_name ] = $base_js_url;
	}
	return $plugins_array;
}
add_filter( 'mce_external_plugins', 'add_tinymce_plugin_js' );
function register_custom_button_for_tinymce( $buttons ) {
	array_push( $buttons, 'show_free_video', 'show_blockquote' );
	return $buttons;
}
add_filter( 'mce_buttons', 'register_custom_button_for_tinymce' );

نکته: من اسم شورت کد ویدیو و نقل رو به صورت "show_blockquote" و "show_blockquote" پس اگه از کدهای من استفاده میکنید باید اسم هارو هم تغییر بدین

 

بخش دوم : ریفکتور فایل tinymce-buttons.js

(function () {
    tinymce.create('tinymce.plugins.custom.button', {
        init: function (editor, url) {
            editor.addButton('show_free_video', {
                title: 'افزودن ویدیو',
                image: url+'/tinymce-icon-image/player.png',
                onclick: function () {
                    editor.windowManager.open({
                        title: 'افزودن آدرس ویدیو',
                        body: [
                            {type: 'textbox', name: 'videoUrl', label: 'URL'}
                        ],
                        onsubmit: function(e) {
                            // Insert content when the window form is submitted
                            editor.insertContent('[show_free_video src="' + e.data.videoUrl + '"]');
                        }
                    });
                }
            });
            editor.addButton('show_blockquote', {
                title: 'Insert Blockquote',
                image: url + '/tinymce-icon-image/blockquote.png',
                onclick: function () {
                    editor.windowManager.open({
                        title: 'اضافه کردن Blockquote',
                        body: [
                            {type: 'textbox', name: 'name', label: 'نام', minWidth: 400},
                            {type: 'textbox', name: 'content', label: 'محتوا', minWidth: 400, multiline: true, minHeight: 100},
                            {type: 'textbox', name: 'note', label: 'نوت (اختیاری)', minWidth: 400},
                        ],
                        onsubmit: function(e) {
                            const shortcodeStr = '[show_blockquote name="' + e.data.name + '" note="' + e.data.note + '"]' + e.data.content + '[/show_blockquote]';
                            editor.insertContent(shortcodeStr);
                        }
                    });
                }
            });
        }
    });
    tinymce.PluginManager.add('show_free_video', tinymce.plugins.custom.button);
    tinymce.PluginManager.add('show_blockquote', tinymce.plugins.custom.button);
})();

 

نکته: من برای بخش نقل قول کنار اسم نویسنده نقل قول یک بخش نوت هم درست کردم برای تست و تمرین بیشتر که خواستین میتونید برش دارین.

 

میثم کیانی ۱۰ فروردین ۱۴۰۳، ۱۰:۵۲