Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > แจก textbox(contentEditable div)แทรกรูปได้ คลิกเคอร์เซ่อไว่ตรงไหนก็จำได้



 

แจก textbox(contentEditable div)แทรกรูปได้ คลิกเคอร์เซ่อไว่ตรงไหนก็จำได้

 



Topic : 071191

Guest




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<div style="float:left">
	<div id="area" contentEditable="true" style="width:290px;height:300px;border:1px solid gray" onblur="onDivBlur();" onmousedown="return cancelEvent(event);" onmouseup="captureSelection();fadd=true;" onkeyup="captureSelection();fadd=true;" onfocus="restoreSelection();"></div>
	
	<div id="emo" style="width:290px;"></div>
	<div>ขอขอบคุณไอคอนสวยๆจาก findicons.com<br /><a href="http://findicons.com/pack/178/popo_emotions/2">http://findicons.com/pack/178/popo_emotions/2</a></div>

</div>
<div style="float:left">

	<button onclick="show()">Show HTML»</button>
</div>

<div style="float:left">
	<textarea id="show" style="width:600px;height:600px;border:1px solid gray"></textarea>

</div>

<script type="text/javascript">


	var link, savedRange, isInFocus, editable=document.getElementById('area'), selection, fadd=true, blank, img=[
	'http://images-1.findicons.com/files/icons/178/popo_emotions/24/byebye.png',
	'http://images-1.findicons.com/files/icons/178/popo_emotions/24/canny.png',
	'http://images-1.findicons.com/files/icons/178/popo_emotions/24/oh.png',
	'http://images-1.findicons.com/files/icons/178/popo_emotions/24/sweet_kiss.png',
	'http://images-1.findicons.com/files/icons/178/popo_emotions/24/hungry.png',
	'http://images-1.findicons.com/files/icons/178/popo_emotions/24/still_dreaming.png',
	'http://images-1.findicons.com/files/icons/178/popo_emotions/24/beat_plaster.png',
	'http://images-1.findicons.com/files/icons/178/popo_emotions/24/adore.png',
	'http://images-1.findicons.com/files/icons/178/popo_emotions/24/hell_boy.png',
	'http://images-1.findicons.com/files/icons/178/popo_emotions/24/after_boom.png',
	'http://images-1.findicons.com/files/icons/178/popo_emotions/24/dribble.png',
	'http://cdn3.iconfinder.com/data/icons/fugue/bonus/icons-24/thumb-up.png'
	];
	

while (img.length>0){

link=img.shift();
var oImg=document.createElement("img");
oImg.setAttribute('src', link);
oImg.setAttribute('alt', 'na');
//oImg.setAttribute('height', '24px');
oImg.setAttribute('onclick', 'add(\''+link+'\')');
document.getElementById('emo').appendChild(oImg);

}

function captureSelection() {
    // Don't capture selection outside editable region
    var isOrContainsAnchor = false,
        isOrContainsFocus = false,
        sel = window.getSelection(),
        parentAnchor = sel.anchorNode,
        parentFocus = sel.focusNode;

    while(parentAnchor && parentAnchor != document.documentElement) {
        if(parentAnchor == editable) {
            isOrContainsAnchor = true;
        }
        parentAnchor = parentAnchor.parentNode;
    }

    while(parentFocus && parentFocus != document.documentElement) {
        if(parentFocus == editable) {
            isOrContainsFocus = true;
        }
        parentFocus = parentFocus.parentNode;
    }

    if(!isOrContainsAnchor || !isOrContainsFocus) {
        return;
    }

    selection = window.getSelection();

    // Get range (standards)
    if(selection.getRangeAt !== undefined) {
        savedRange = selection.getRangeAt(0);

    // Get range (Safari 2)
    } else if(
        document.createRange &&
        selection.anchorNode &&
        selection.anchorOffset &&
        selection.focusNode &&
        selection.focusOffset
    ) {
        savedRange = document.createRange();
        savedRange.setStart(selection.anchorNode, selection.anchorOffset);
        savedRange.setEnd(selection.focusNode, selection.focusOffset);
    } else {
        // Failure here, not handled by the rest of the script.
        // Probably IE or some older browser
    }

};


function restoreSelection()
{
    isInFocus = true;

    if (savedRange != null) {
        if (window.getSelection)//non IE and there is already a selection
        {
            var s = window.getSelection();
            if (s.rangeCount > 0) 
                s.removeAllRanges();
				s.addRange(savedRange);

        }
        else 
            if (document.createRange)//non IE and no selection
            {
                window.getSelection().addRange(savedRange);
            }
            else 
                if (document.selection)//IE
                {
                    savedRange.select();
                }
    }

}
//this part onwards is only needed if you want to restore selection onclick
var isInFocus = false;
function onDivBlur()
{
    isInFocus = false;
}

function cancelEvent(e)
{
    if (isInFocus == false && savedRange != null) {
        if (e && e.preventDefault) {
            //alert("FF");
            e.stopPropagation(); // DOM style (return false doesn't always work in FF)
            e.preventDefault();
        }
        else {
            window.event.cancelBubble = true;//IE stopPropagation
        }
    restoreSelection();
        return false; // false = IE style
    }
}

function add(png){

	if (document.getElementById('area').innerHTML==''){
	blank=true;
	}else{
	blank=false;	
	}

    var cursorStart = document.createElement('img'),
        collapsed = savedRange.collapsed;
        
    //cursorStart.appendChild(document.createTextNode('-'));
    ///cursorStart.id = 'cursorStart';
    
    cursorStart.src=png;
    //cursorStart.style.width="30px"

    // Insert beginning cursor marker
    savedRange.insertNode(cursorStart);

    // Insert end cursor marker if any text is selected
    
    
      
if (fadd==true){
	if (blank!=true){
	
	savedRange.setEndAfter(savedRange.startContainer);
	savedRange.setStartAfter(savedRange.startContainer);
	
	}

fadd=false;
}

savedRange.setEnd(savedRange.startContainer, savedRange.startOffset+1);
savedRange.setStart(savedRange.startContainer, savedRange.startOffset+1);

restoreSelection();
captureSelection();

}

function end(){

savedRange.setStartAfter(savedRange.startContainer);
savedRange.setEndAfter(savedRange.startContainer);

restoreSelection();

}


function show(){

	document.getElementById('show').innerHTML=document.getElementById('area').innerHTML;

}
</script>
	
</body>
</html>




Tag : JavaScript







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-01-01 16:38:41 By : cybercombat View : 898 Reply : 1
 

 

No. 1



โพสกระทู้ ( 21 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook

ขอบคุณ สำหรับเนื้อหาดี ๆ ครับ พี่เสือ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-01-02 21:57:10 By : ApBank
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : แจก textbox(contentEditable div)แทรกรูปได้ คลิกเคอร์เซ่อไว่ตรงไหนก็จำได้
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่