Проблемы с добавлением YouTube для встраивания в текстовый редактор WYSIWYG с чистым Javascript
У меня есть небольшие проблемы с текстовым редактором contentEditable WYSIWYG. Я знаю, что использование div "contentEditable" - не лучшее решение, но я думаю, что оно выполнит свою работу. Тем не менее, у меня есть несколько проблем с возможностью добавления HTML-контента. Я хочу вставить встроенное видео на YouTube в текстовом редакторе, но когда я нажимаю клавишу Enter, он "клонирует" элемент div, в котором находилось видео, поэтому каждый раз, когда я нажимаю его, он помещает еще один элемент. Я искал на этом сайте, если у кого-то еще была эта проблема, но кажется, что я единственный.
Я оставлю изображение: Repeated video.png
Как вы можете видеть, есть два видео и два div, когда нет ни одной части моего кода, которая должна была бы это делать.
Я использую Angular и чистый код Javascript:
public insertVideo(){
document.getElementById('video-modal').style.display = "none";
var urlPrompt:String = (<HTMLInputElement>document.getElementById('inputVideo')).value;
var urlReplace = urlPrompt.replace("watch?v=", "embed/");
var embed = '<div style="background-color: Black;"> <iframe title="YouTube video player" src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390"> </div>';
var body = document.getElementById('richTextField');
if(urlPrompt !== null && urlPrompt !=='' && urlPrompt !== 'https://www.youtube.com/'){
document.getElementById('richTextField').focus();
document.execCommand("insertHTML", false, embed);
}
}
И это HTML для редактора
<div (click)="editorEnabled()" (keypress)="Enter(event);" id="richTextField" class="border border-dark" contenteditable="true"></div>
И для кнопки
<button id="insertVideo" title="Insertar un video con un enlace" (click)="iVideo();" ><i class="fab fa-youtube"></i></button>
Кто-нибудь знает, почему это происходит? Как я могу это исправить? Существует ли лучший вариант для этого?
Большое спасибо за чтение моего вопроса и извините за мой не слишком хороший английский.