1

シンプルなコンテンツ管理システムに、このようなボタンをフォームに追加しました。記事などを書いているので、写真や動画も追加したいです。そして、カスタムタグを使用してそれらを追加したい

    function formatText (el,tagstart,tagend) { 

    if (el.setSelectionRange) {
    el.value = el.value.substring(0,el.selectionStart) + tagstart + el.value.substring(el.selectionStart,el.selectionEnd) + tagend + el.value.substring(el.selectionEnd,el.value.length)
    }
    else {
    var selectedText = document.selection.createRange().text;

    if (selectedText != "") { 
        var newText = tagstart + selectedText + tagend; 
        document.selection.createRange().text = newText; 
    } 

    }



} 


<form name="my_form"> 
<textarea name="my_textarea" id="mytext"></textarea><br /> 
<input type="button" value="IMAGE" onclick="formatText (document.getElementById('mytext'),'[IMAGE]','[/IMAGE]');" />

これは、テキスト領域に[IMAGE] [/ IMAGE]タグを追加することです。フォームを送信した後、このタグ間の画像リンクを表示したいと思います。同様に、[VIDEO] [/ VIDEO]タグを追加したいのですが、これらのタグの間にyoutubeリンクを書き込むと、ページを表示するときにビデオを表示します。

どうやってやるの？

4

2 に答える 2

0

編集:OPは、PHPコードの回答が必要であることを明確にしました(私の他の回答を参照してください)。他の人が JS ソリューションを必要とする場合に備えて、これをここに残します。

このコードをテストするのに苦労しています (jsfiddle は私にとってはうまくいきません) が、これはうまくいくはずだと思います:

YouTube ビデオの場合:

var el = document.getElementById('<your element id>');
while(true){
    var match = '/\[VIDEO\](https?:\/\/)?(www.)?youtube.com(\/watch\?v=|\/?\?)?(\w*)\[\/VIDEO\]/im.exec(el.innerHTML);
    if(match==null)break;
    el.innerHTML=el.innerHTML.replace(match[0],'<iframe width="420" height="315" src="http://www.youtube.com/embed/'+match[1]+'" frameborder="0" allowfullscreen></iframe>');
}​

画像に対して同様のことをしたいと思うでしょう。要素内の要素への参照がある場合、それらは壊れることに注意してください。お役に立てれば。

于 2012-11-08T15:05:49.890 に答える
0

このコードは機能するはずです。詳細については、コメントを参照してください。

//The data for this variable would be read from a database, user input, etc.
$content = "Non augue, ultrices[VIDEO]www.youtube.com/?vvddee[/VIDEO] ut elementum natoque tempor placerat. Egestas, penatibus urna, dis risus habitasse. Rhoncus augue urna porta, enim cum risus eu tortor in, p[IMAGE]images/abcde.png[/IMAGE]lacerat rhoncus mus tortor? Nec, magnis, enim elementum non urna eros augue, ridiculus porta dapibus? Parturient, dictumst nunc vel turpis! Eu eros vel tempor cum in.";

//Replace custom video tag with youtube embed
preg_match_all('/\[VIDEO\](https?:\/\/)?(www.)?youtube.com(\/watch\?v=|\/?\?)?(\w*)\[\/VIDEO\]/im', $content, $matches, PREG_SET_ORDER);
foreach($matches as $match){
    $content = str_replace($match[0],'<iframe width="420" height="315" src="http://www.youtube.com/embed/'.$match[4].'" frameborder="0" allowfullscreen></iframe>',$content);
}

//Replace custom image tag with html image tag
preg_match_all('/\[IMAGE\](.*)\[\/IMAGE\]/im', $content, $matches, PREG_SET_ORDER);
foreach($matches as $match){
    $content = str_replace($match[0],'<img src="'.$match[1].'"></image>',$content);
}
echo $content;

お役に立てれば。

于 2012-11-08T15:50:47.430 に答える