Question

我正在使用JavaScript从头开始创建自定义WYSIWYG。所有这些都很好（比如插入图片），但是当我点击提交并将内容添加到我的数据库中时，YouTube视频会像这样插入：

<div><br></div><div><br><div><br></div></div>

我创建了一个WYSIWYG解析为的JavaScript文件：

function iImage(){
    var imgSrc = prompt('Enter image location', '');
    if (imgSrc != null){
        richTextField.document.execCommand('insertimage', false, imgSrc);
    }
}
function iVideo(){
    var urlPrompt = prompt("Enter Youtube Url:", "http://");
    var urlReplace = urlPrompt.replace("watch?v=", "embed/");
    var embed = '<iframe src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390">';
    if($.browser.msie){
        richTextField.document.createRange().pasteHTML(embed);
    }else{
        richTextField.document.execCommand("Inserthtml", false, embed);
    }
}
function submit_form(){
    var theForm = document.getElementById("blogForm");
    theForm.elements["blogbody"].value = window.frames['richTextField'].document.body.innerHTML;
    theForm.submit();
}

您可以看到我的iImage功能有效，但我的iVideo无效。

有人可以帮忙吗？

只是为了让你知道我已经编辑了我的脚本......

function iVideo(){
    var urlPrompt = prompt("Enter Youtube Url:", "http://");
    var urlReplace = urlPrompt.replace("http://www.youtube.com/watch?v=", "http://www.youtube.com/embed/");
    var embed = '<iframe src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390"></iframe>';
    if($.browser.msie){
        richTextField.document.createRange().pasteHTML(embed);
    }else{
        richTextField.document.execCommand("Inserthtml", false, embed);
    }
}

但仍然没有快乐

Answer 1

终极您没有看到Youtube.com的原因是因为您在上传时会添加它。在您编写要上传到您网站的内容的表单中，您需要点击添加视频链接，该链接会在代码的第一行开始，弹出一个窗口，要求您提交Youtube视频链接，比如http://youtube.com/theVideoLink。您添加的链接将放置在src="'+urlReplace+'"的位置。

Answer 2

嗯，我是javascript的初学者，但我没有看到它添加youtube.com的任何地方，我看到的只是手表？v =。正如我所说，初学者的意见。

Answer 3

您是否可以先尝试下面的硬编码/静态版本？ - 可能只是语法或未设置的变量之一。

<script type="text/javascript">
   function iVideo(){
      var youtubeiframe='<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/AsbagZvkrbo" frameborder="0"></iframe>';
      richTextField.document.execCommand ("insertHTML", false, youtubeiframe);
   }
</script>

Answer 4

我知道了。这是下面的代码

function iVideo(){
    var urlPrompt = prompt("Enter Youtube Url:", "http://");
    var urlReplace = urlPrompt.replace("watch?v=", "embed/");
    var embed = '<iframe title="YouTube video player" src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390">';
    if(embed != null){
        richTextField.document.execCommand("Inserthtml", false, embed);`
    }
}

它现在在我的网站上工作。

在WYSIWYG中渲染Youtube视频

4 个答案: