0

「Blogger」のように機能するjavascript（jQuery）とHTMLを使用してリッチテキストエディタを作成したいと思います。

エディターのユーザーには、フォーマットされたテキスト（太字、さまざまなサイズのフォントなど）を追加したり、画像を追加したり、YouTubeからビデオを追加したりできるようにしたいと思います。私の検索結果は、すべてのWebベースのRTEが「document.execCommand」を使用していることを示しています。最初の2つ（フォーマットされたテキストと画像）の例は見つかりましたが、ビデオを追加する例は見つかりませんでした。

このコード（関数'test'）を使用しようとしましたが、機能しません。ボタン（ビデオ）をクリックすると、iframe（テキストエディタ）が空になります。

<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を使用しない他の解決策はありますか？

4

1 に答える 1

0

このコードは、Firefox、Chrome、IE で動作します。Opera と Safari を使用してテストしていません

<!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-24T21:29:27.863 に答える