การสร้าง extension ปุ่ม bbcode เป้น pop-up เพื่อกรอกลิ้งค์ แบบง่ายๆ

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies
BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: การสร้าง extension ปุ่ม bbcode เป้น pop-up เพื่อกรอกลิ้งค์ แบบง่ายๆ

การสร้าง extension ปุ่ม bbcode เป้น pop-up เพื่อกรอกลิ้งค์ แบบง่ายๆ

by Ittichai_chupol » 04/12/2018 11:44 am

--หลายๆคนคงเคยเห็นการที่กดปุ่มแล้ว มาหน้าต่าง popup แสดงขึ้นขึ้นแล้วให้เรากรอกข้อมูล เข้าไปเพื่อที่จะส่งค่าไปยังหน้าที่เราต้องการ ได้ ซึ่งการจะเขียนโคดเพื่อสร้าง pop-up แบบนั้นก็คงไม่ใช่ปัญหาที่ยากมากสำหรับใครบางคน แต่กว่า ถ้าการสร้าง pop-up นั้นจะเป็นการสร้างขึ้นมาเพื่อที่จะแทรกเข้าไปในโปรแกรมหรือระบบ ที่เราได้สร้างไว้ก่อนหน้าแล้วนั้น บางทีเราต้องคำนึกถึง Template ที่เราใช้อยู่เดิมด้วย(ในกรณีที่เราไม่ได้สร้าง Template เอง) เพราะว่าในบางกรณีนั้น popup ที่เรานำมาแทรก จะมี
Template หรือ javascript เฉพาะของมันอยู่ด้วย ซึ่งอาจจะทำให้เกิดการซับซ้อนกับ Template หรือ javascript ที่เราใช้อยู่ก็ได้

--การสร้าง Extension ใน phpbb คือการที่เราจะเพื่อส่วนขยาย (ส่วนที่เพิ่มความสามารถในกับ phpbb ) เป้นการที่เราจะเขียนโคดการทำงานที่ไม่มีใน phpbb ให้มีขึ้นมา
หรือ สร้างเสรืิมส่วนเดิมให้ทำงานที่ดีขึ้น

-- ซึ่งวันนี้เราจะมาสร้างส่วนขยายนี้ นั้นคือการที่เราจะสร้าง Extension เป็น ปุ่ม pop-up เพื่ที่จะบันทึก ลิ้งค์ แล้วส่งลงที่หน้าบอร์ดกระทู้ กัน

ขั้นตอนการทำงาน

1.เราจะต้องรู้การสร้าง Extension กันก่อน

2.จากนั้นเราจต้อทราบก่อนว่า ส่ววนที่เราจะสร้างนี้ เราจะสร้างเป็นแบบไหน ระหว่าง event หรือ controler
** event คือการเขียนเพื่อจากส่วนที่มีอยู่
** controler คือการเขียนเพื่อสร้าง ส่วนการทำงานใหม่
++ ในนนี้เราจะสร้างเป็นแบบ event ครับ

3. เมื่อเรารู้วิธีการที่สร้างแล้ว คราวนี้จะต้องมาเลือกว่า เราจะใช้ event ไหนเพื่อให้เเสดง ณ ตำแหน่งที่ต้องการ
**ตำแหน่งที่เราต้องการนั้นก็คือ
n2.png

** ซึ่ง event ที่ใช้ตำแหน่งนี้คือ
core.display_custom_bbcodes_modify_sql
4. จากนั้นเราจะสร้าง ส่วนของ listenner
5. เมื่อเรามีส่วน listenner แล้ว ให้เราเข้าใน สร้าง function ตามนี้

Code: Select all

  'core.display_custom_bbcodes_modify_sql' => 'custom_bbcode_modify_sql'


6. ไปที่สร้างไฟล์ชื่อ ---ชื่อ extension--posting_buttons.html ที่โฟลเดอร์ style -> all -> template

7.จากนั้นเขียนโคดแสดงปุ่ม ปรัมาณนี้

Code: Select all


<button type="button" class="button button-icon-only bbcode-img" accesskey="p" name="addbbcode14" value="Img"

 onclick="mpopimg()" //ชื่อฟังชั่น
 title="{L_BBCODE_P_HELP}">
<i class="icon fa-image fa-fw" aria-hidden="true"></i>

</button>

8. จากนั้นเราก็มาสร้างส่นของ javaScript เพื่อเป็นส่วนของ pop-up

Code: Select all


   function mpopup(){
   jQuery.MessageBox({
    buttonDone  : "OK",
    message     : "input URL Youtube",
    input       : true,
    speed       : 1000
}).done(function(data){
    if (jQuery.trim(data)) {
        mbbfontstyle('[youtube]', '[/youtube]', data) ;
        }
});
    }
9.ตัวอย่างโคดที่ส่งข้อมูล ลงมาที่ หน้ากระดาษ กระทู้

Code: Select all


function mbbfontstyle(bbopen, bbclose, data) {
	theSelection = false;
	var textarea = document.forms[form_name].elements[text_name];
	textarea.focus();
	var caret_pos = getCaretPosition(textarea).start;
	var new_pos = caret_pos + bbopen.length;
	insert_text(bbopen + data + bbclose);
	if (!isNaN(textarea.selectionStart)) {
		textarea.selectionStart = new_pos;
		textarea.selectionEnd = new_pos;
	}
	// IE
	else if (document.selection) {
		var range = textarea.createTextRange(); 
		range.move("character", new_pos); 
		range.select();
		storeCaret(textarea);
	}
              textarea.focus();
}

</script>

หลัการทำงานก็มีประมาณนี้ครับ

Top