<div onclick="insertMyLinkTag()" class="xob_icon_cont multiTag_true"><img class="xob_hassub" title="[url][/url]" alt="[url][/url]" class="xob_icon" src="//img.homepagemodules.de/ds/static/gaia/link.png"></div>
 

<div onclick="insertMyVideoTag()" class="xob_icon_cont multiTag_true"><img class="xob_hassub" alt="[video][/video]" title="[video][/video]" src="//img.homepagemodules.de/ds/static/gaia/movie.png"></div>
 

<div onclick="insertMyIMGTag()" class="xob_icon_cont multiTag_true"><img class="xob_hassub" title="[img][/img]" alt="[img][/img]" src="//img.homepagemodules.de/ds/static/gaia/picture.png"></div>
 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
 
<script type='text/javascript' src='//code.jquery.com/ui/1.12.0/jquery-ui.min.js'></script> 
<script>
/* Gegenseitige Auslösung! */
window.addEventListener('load', function(){
  $('.xob_hassub').click(function(){
    $('#addMyVideo,#addMyLink,#addMyIMG').not(this).dialog("close");
  });
});
 
/* Dialoge */
var dialog;
 
//Video
function insertMyVideoTag(){ 
  if(!$("#addMyVideo").length){
    dialog = $(`<div id="addMyVideo">
 
    <ul class="myText">
      <li>Geben Sie die Adresse für das Video ein, z.B.:
      <br>"https://www.youtube.com/watch?v=bGJOmGL6mYM" 
      <br>"https://www.youtube.com/embed/bGJOmGL6mYM" 
      <br>"https://youtu.be/bGJOmGL6mYM"</li>
      <li>Ändern Sie gegebenfalls die Größe des Videos!<br></li>
      <li>Oder klicken Sie einfach auf "Video einfügen"!</li>
    </ul>
 
    <br><br>
    Adresse:<br><input class="gotovideo" type="text" placeholder="https://......" value=""><br><br>
    Breite: <input id="gotovideobreite" type="text" value="360px" style="text-align:center;width:50px;margin-right:10px;"> 
    Höhe: <input id="gotovideohoehe" type="text" value="200px" style="text-align:center;width:50px;margin-right:10px;"> 
    Autoplay: <input type="checkbox" class="checkbox" onclick=\'$(".myCheckbox_videoplay_toggle").toggle();\'> 
 
    <br><br><br>
    <input class="myCheckbox_videoplay_toggle" id="insertvideo" type="button" value="Video einfügen" onclick=\'xob_insert("[videobox="+$("#gotovideobreite").val()+","+$("#gotovideohoehe").val()+"]",""+$(".gotovideo").val()+"[/videobox]");$("#addMyVideo").dialog("close");\'>
    <input style="display:none;" class="myCheckbox_videoplay_toggle" id="insertvideo" type="button" value="Video einfügen" onclick=\'xob_insert("[videobox="+$("#gotovideobreite").val()+","+$("#gotovideohoehe").val()+"]",""+$(".gotovideo").val()+"?autoplay=1&mute=1[/videobox]");$("#addMyVideo").dialog("close");\'> 
    <input type="button" value="Abbrechen" onclick=\'$("#addMyVideo").dialog("close");\'>
 
    <br><br></div>`).appendTo("body").dialog({title:"Video einbinden",resizable: false,});
  } else {
     $("#addMyVideo").dialog("open");
  } 
}
 
//URL
function insertMyLinkTag(){ 
if(!$("#addMyLink").length){
dialog = $(`<div id="addMyLink">
 
  <ul class="myText">
    <li>Geben Sie die URL des Links ein.
    <br>z.B.: "https://www.hilfe-tricks-tipps.de"</li>
    <li>Geben Sie einen Namen oder eine Grafik ein.
    <br>z.B.: "Forum" oder "[smile]"</li>
  </ul>
 
  <br><br>
  URL:<br><input id="gotourl" type="url" placeholder="https://www......" value=""><br><br>
  Name:<br><input id="gototext" type="text" value="Forum">
 
  <br><br><br>
  <input type="button" value="Link einbinden" onclick=\'xob_insert("[url=",""+$("#gotourl").val()+"]"+$("#gototext").val()+"[/url]");$("#addMyLink").dialog("close");\'> <input type="button" value="Abbrechen" onclick=\'$("#addMyLink").dialog("close");\'>
 
  <br><br></div>`).appendTo("body").dialog({title:"Link einbinden",resizable: false});
  } else{
    $("#addMyLink").dialog("open");
  } 
} 
 
//Bild
function insertMyIMGTag(){ 
if(!$("#addMyIMG").length){
  dialog = $(`<div id="addMyIMG">
 
    <ul class="myText">
      <li>Geben Sie die Bildadresse und die Bildbreite ein oder wenn notwendig, ein Bildbeschreibung.</li>
      <li>Oder klicken Sie einfach auf "Bild einbinden"!</li>
    </ul>
 
    <br><br>
    Bildadresse:<br><input id="gotoimg" type="url" placeholder="https://www......" value=""><br><br>
    Bildbreite (auto, px, em, %):<br><input id="insertimg" type="text" value="300px"><br><br>
 
    <span class="myCheckbox_modal_toggle">
      <input type="checkbox" class="checkbox" onclick=\'$(".myCheckbox_img_toggle").toggle();\'> Bildbeschreibung
    </span>
    <span class="myCheckbox_modal_toggle" style="display:none;">
      <input type="checkbox" class="checkbox" onclick=\'$(".myCheckbox_img_mo_toggle").toggle();\'> Bildbeschreibung
    </span> &nbsp;&nbsp;&nbsp;
 
    <input type="checkbox" class="checkbox" onclick=\'$(".myCheckbox_modal_toggle").toggle();\'> Modal<br><br>
    <span class="myCheckbox_modal_toggle">
      <span class="myCheckbox_img_toggle" style="display:none;">
        <textarea id="gotobildtext" name="text" style="height:100px;"></textarea><br><br><br>
        <input type="button" value="Bild einbinden" onclick=\'xob_insert("[unterschrift][img="+$("#insertimg").val()+"]",""+$("#gotoimg").val()+"[/img][beschreibung]"+$("#gotobildtext").val()+"[/beschreibung][/unterschrift]");$("#addMyIMG").dialog("close");\'>
      </span>
 
      <span class="myCheckbox_img_toggle"><br>
        <input type="button" value="Bild einbinden" onclick=\'xob_insert("[img="+$("#insertimg").val()+"]",""+$("#gotoimg").val()+"[/img]");$("#addMyIMG").dialog("close");\'>
      </span>
    </span>
 
    <span class="myCheckbox_modal_toggle" style="display:none;">
      <span class="myCheckbox_img_mo_toggle" style="display:none;">
        <textarea id="gotobildtext_mo" name="text" style="height:100px;"></textarea><br><br><br>
        <input type="button" value="Bild modal einbinden" onclick=\'xob_insert("[img_modal="+$("#insertimg").val()+" "+$("#gotobildtext_mo").val()+"]",""+$("#gotoimg").val()+"[/img]");$("#addMyIMG").dialog("close");\'>
      </span>
      <span class="myCheckbox_img_mo_toggle"><br>
        <input type="button" value="Bild modal einbinden" onclick=\'xob_insert("[img_mod="+$("#insertimg").val()+"]",""+$("#gotoimg").val()+"[/img]");$("#addMyIMG").dialog("close");\'>
      </span>
    </span> 
    <input type="button" value="Abbrechen" onclick=\'$("#addMyIMG").dialog("close");\'> 
 
    <br><br></div>`).appendTo("body").dialog({title:"Bild einbinden",resizable: false});
  } else{
    $("#addMyIMG").dialog("open");
  } 
}
</script>
 

<!-- Modal-Modus Bilder einfügen -->
<div id="myModal">
  <div id="closeImg">&times;</div>
  <img id="imgAll">
  <div id="caption"></div>
</div>
 
<script>
$('.myImgModal').click(function(){
  $('#myModal').show(500).click(function(){$('#myModal,#caption').hide(500);});
  $('#imgAll').attr('src', $(this).attr('src'));
  $('#caption').html($(this).attr('data')).show();
});
</script>
 
<script>
/* YouTube Konverter  Video einfügen*/
window.addEventListener('load', function ( ) {
  $('.convert_youtube, .embed-responsive').html(function(index, link) {
    return link.replace("/watch?v=", "/embed/").replace("youtu.be/" , "youtube.com/embed/").replace("/shorts/" , "/embed/").replace(/&.+/g, '">');
  });
}); 
</script>