자바 스크립트 (또는 jQuery)로 iframe (웹 기반 RTE)에 youtube 비디오를 추가하는 방법

자바 스크립트 (jQuery)와 "Blogger"중 하나와 유사한 HTML로 서식있는 텍스트 편집기를 만들고 싶습니다.자바 스크립트 (또는 jQuery)로 iframe (웹 기반 RTE)에 youtube 비디오를 추가하는 방법

저는 편집기 사용자가 형식이 지정된 텍스트 (굵게, 다양한 글꼴 크기 등)를 추가하고 이미지를 추가하고 YouTube에서 비디오를 추가 할 수있는 기능을 갖춰야합니다. 내 검색 결과에 따르면 모든 웹 기반 RTE는 "document.execCommand"를 사용합니다. 처음 두 개의 예제 (서식있는 텍스트 및 이미지)의 예제를 발견했지만 비디오 추가를위한 예제를 찾지 못했습니다.

이 코드 (함수 'test')를 사용하려고했지만 작동하지 않습니다. 버튼 (theVideo)을 클릭 한 후 iframe (texteditor)이 비어 있습니다.

<body onLoad="def()"> 
    ... 
    <input type="button" id="theVideo" value="video..." onClick="test()" /> 
    ... 
</body> 

<script type="text/javascript"> 
function def(){ 
    var testframe = document.createElement("iframe"); 
    testframe.name = testframe.id = "textEditor"; 

    if (testframe.addEventListener){ 
     testframe.addEventListener("load",function(e){this.contentWindow.document.designMode = "on";}, false); 
    } else if (testframe.attachEvent){ 
     testframe.attachEvent("load", function(e){this.contentWindow.document.designMode = "on";}); 
    } 

    document.body.appendChild(testframe); 

    textEditor.document.designMode="on"; 
    textEditor.document.open(); 
    html="<head><style type='text/css'>body{ font-family:arial; font-size:13px; }</style> </head>"; 
} 

function test(){ 
    sembed = "<div>"; 

    sembed +="<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0'"; 
    sembed +="data-thumbnail-src='http://3.gvt0.com/vi/JQu2OSyFZNM/0.jpg' height='266' width='320'>"; 

     sembed +="<param name='movie' value='http://www.youtube.com/v/JQu2OSyFZNM&fs=1&source=uds' />"; 

     sembed +="<embed width='320' height='266' src='http://www.youtube.com/v/JQu2OSyFZNM&fs=1&source=uds' type='application/x-shockwave-flash' >"; 
     sembed +="</embed>"; 
    sembed +="</object>"; 

    sembed +="</div>"; 

    textEditor.document.execCommand("Inserthtml", "", sembed); 
} 
</script>

사람이 비디오를 iframe에 추가하는 방법을 알고 있습니까? execCommand를 사용하지 않고 다른 솔루션이 있습니까?

출처

2012-08-23 user1621010

iframe의'.contentWindow.document' 문서 객체를'open','write' 및'close'와 함께 사용하십시오. – TheZ

이 코드는 Firefox, Chrome, IE에서 작동합니다. 나는 오페라와 사파리를 사용하여 테스트하지 않았다.

<!DOCTYPE html> 
<html> 
<head> 

<script> 
function changeStyle(){ 
    sembed = "<div>"; 

     sembed +="<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0'"; 
     sembed +="data-thumbnail-src='http://3.gvt0.com/vi/JQu2OSyFZNM/0.jpg' height='266' width='320'>"; 

       sembed +="<param name='movie' value='http://www.youtube.com/v/JQu2OSyFZNM&fs=1&source=uds' />"; 

       sembed +="<embed width='320' height='266' src='http://www.youtube.com/v/JQu2OSyFZNM&fs=1&source=uds' type='application/x-shockwave-flash' >"; 
       sembed +="</embed>"; 
     sembed +="</object>"; 

    sembed +="</div>"; 

    var x=document.getElementById("myframe"); 
    var y=(x.contentWindow || x.contentDocument); 
    if (y.document) y=y.document; 

    y.open(); 
    y.write(sembed); 
    y.close(); 
} 

</script> 
</head> 

<body> 

<iframe id="myframe" width=850 height=500> 
    <p>Your browser does not support iframes.</p> 
</iframe><br /><br /> 

<input type="button" onclick="changeStyle()" value="Add Video.." /> 

</body> 
</html>

출처

2012-08-24 21:29:27 user1621010

자바 스크립트 (또는 jQuery)로 iframe (웹 기반 RTE)에 youtube 비디오를 추가하는 방법

답변

관련 문제