Published on Sake.in.th (https://sake.in.th)

หน้าแรก > หน้าหลัก > ปัญหา insertAdjacentHTML ใน TinyMCE กับ Firefox

ปัญหา insertAdjacentHTML ใน TinyMCE กับ Firefox [1]

เขียนโดย sake [2] เมื่อ 2008-02-16 05:20

ทำการปรับปรุงหน้าตาเว็บ หลังจากที่ไม่ได้ปรับปรุงมาเป็นเวลาเกือบปี
แต่พอเปลี่ยน Theme กลับพบว่า TinyMCE ทำงานแปลก ๆ
เลยเปลี่ยนเป็นเวอร์ชันใหม่แต่กลับพบว่า ดันใช้งานไม่ได้
ไม่แน่ใจว่าเกิดจาหหารที่ใช้ TinyMCE compressor ด้วยหรือไม่
แต่ช้าไปแล้ว เลยหาวิธีแก้

เรื่องของเรื่องคือ TinyMCE มีการใช้ฟังก์ชัน insertAdjacentHTML()
ซึ่งเป็นฟังก์ชันมีเฉพาะ IEไม่มีในมาตรฐาน ECMA Script ทำให้เกิดข้อผิดพลาดขึ้น
วิธีแก้คือ สร้างฟังก์ชันมาแทน โดยเพิ่มฟังก์ชันที่ท้ายไฟล์
/modules/tinymce/tinymce/jscripts/tiny_mce/tiny_mce_src.js

 HTMLElement.prototype.insertAdjacentElement = function
(where,parsedNode)
 {
  switch (where){
  case 'beforeBegin':
   this.parentNode.insertBefore(parsedNode,this)
   break;
  case 'afterBegin':
   this.insertBefore(parsedNode,this.firstChild);
   break;
  case 'beforeEnd':
   this.appendChild(parsedNode);
   break;
  case 'afterEnd':
   if (this.nextSibling)
this.parentNode.insertBefore(parsedNode,this.nextSibling);
   else this.parentNode.appendChild(parsedNode);
   break;
  }
 };

 HTMLElement.prototype.insertAdjacentHTML = function
(where,htmlStr)
 {
  var r = this.ownerDocument.createRange();
  r.setStartBefore(this);
  var parsedHTML = r.createContextualFragment(htmlStr);
  this.insertAdjacentElement(where,parsedHTML)
 };


 HTMLElement.prototype.insertAdjacentText = function
(where,txtStr)
 {
  var parsedText = document.createTextNode(txtStr)
  this.insertAdjacentElement(where,parsedText)
 };

เพียงเท่านี้ก็สามารถแก้ปัญหาได้บางส่วน ถึงแม้ว่ายังมี warning อีกแสนแปดก็ช่วงเหอะ :P

 

Tags: 
TinyMCE [3]
Firefox [4]
IE [5]

Source URL (modified on 2008-02-16 05:31): https://sake.in.th/node/51

Links
[1] https://sake.in.th/blog/%E0%B8%9B%E0%B8%B1%E0%B8%8D%E0%B8%AB%E0%B8%B2-insertadjacenthtml-%E0%B9%83%E0%B8%99-tinymce-%E0%B8%81%E0%B8%B1%E0%B8%9A-firefox
[2] https://sake.in.th/users/sake
[3] https://sake.in.th/category/sitetags/tinymce
[4] https://sake.in.th/category/sitetags/firefox
[5] https://sake.in.th/category/sitetags/ie