使用自定义标签在 php 中显示图像或视频

Question

我在我的简单内容管理系统中添加了这样的按钮到我的表单中。我写文章等。所以我也想添加图片和视频。我想通过自定义标签添加它们

    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 链接，则在显示页面时显示视频。

我该怎么做？

Answer 1

这段代码应该可以工作。更多解释请参见 cmets。

//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;

希望这会有所帮助。

Answer 2

编辑：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>');
}​

您希望对图像执行类似的操作。请注意，如果您对元素中的任何元素有任何引用，它们将被破坏。希望这会有所帮助。