Проблемы с добавлением 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>

Кто-нибудь знает, почему это происходит? Как я могу это исправить? Существует ли лучший вариант для этого?

Большое спасибо за чтение моего вопроса и извините за мой не слишком хороший английский.

0 ответов

Другие вопросы по тегам