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

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

Ittichai_chupol
PHP Super Member
PHP Super Member
โพสต์: 479
ลงทะเบียนเมื่อ: 19/09/2018 10:33 am

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

โพสต์โดย 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 ตามนี้

โค้ด: เลือกทั้งหมด

  'core.display_custom_bbcodes_modify_sql' => 'custom_bbcode_modify_sql'


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

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

โค้ด: เลือกทั้งหมด


<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

โค้ด: เลือกทั้งหมด


   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.ตัวอย่างโคดที่ส่งข้อมูล ลงมาที่ หน้ากระดาษ กระทู้

โค้ด: เลือกทั้งหมด


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>




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

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน