Lösungen ,

zitate-zum-chat-hinzufugen.php

Quell Code

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
      button{
  width:22px;
  height:22px;
  border:1px solid red;
  border-radius:50%;
}
#chat{
  margin-top:50px;
}
.text::selection{
  background:blue;
}
.messages{
  border:1px solid black;
  display:flex;
  margin:10px 0;
  padding:5px;
  flex-direction:column;
}
.oben{
  display:flex;
}
.chat_zitate:hover:after{
  content:'kompletten Text makieren für Zitat';
  display:block;
  width:200px;
  background:black;
  color:white;
  top:-50px;

  position:relative;
}

.chat_zitate:hover{
    cursor:pointer;
}
textarea,#senden{
  width:60%;
  margin-left:20%;
  margin-top:20px;
}

.zit{
  background:grey;
  border:2px solid orange;
  display:block;
}
h5{
  margin:0;
  padding:0;
}
    </style>
  </head>
<body>
  <h1>Chat</h1>
  <input type="hidden" id="chat1">
    <input type="hidden" id="chat2">
<div id="chat">
  
  
    <div class="messages">
      <div class="oben">
    <button class="chat_zitate">Z</button><div class="user" id="user-peter">Peter</div>
      </div>
      <div class="unten">
  <div class="text">hallo Werner alles klar</div>
      </div>
  </div>
  
    <div class="messages">
      <div class="oben">
    <button class="chat_zitate">Z</button><div class="user" id="user-werner">Werner</div>
      </div>
      <div class="unten">
  <div class="text">Ja Peter alles bestens</div>
   
      </div>
  </div>
  
  
  
</div>
  <textarea id="text_area" ></textarea> 
       <input type="button" id="senden" value="senden">
  <input type="button" id="php" value="Php Script simulieren">
<script>
$('#chat1').val($('#chat').html());


function start(){



$('.messages .text').mousedown(function(e){ 
  user=$(this).parent().parent().children().children().next().html();
  dest1 = e.pageX;  
  p=0;
  //   console.log('START'+dest1); 
  $('.messages .text').on('click',function(r){ 
         var	dest2 = r.pageX;     
         //console.log('ENDE'+dest2);   
         var jj=dest1-dest2;     
         if(jj<=3){    
           console.log('Zu wennig makiert');
         }        
         if(jj>=4){        
              console.log('Fired= Minimum: '+dest1+'Ist: '+jj+' Maximum:  '+dest2)    
              tool()     
         }else{      
         }   
     });
     function tool(){   
          if (document.getSelection){      
              txt = document.getSelection();    
              toolaus(txt);   
          }else if (document.selection){
              txt = document.selection.createRange().text;     
              toolaus(txt);
          }else{}   
          function toolaus(txt){   
            p++;
            if(p==1){
               var vorhanden_inhalt=$('#text_area').val();
               $('#text_area').val(vorhanden_inhalt+' [ZITAT='+user+']'+txt+'[/ZITAT]');  
              
              
   
     $('#chat2').val(vorhanden_inhalt+' '+vorhanden_inhalt+'<span class="zit"><h5> Zitat von '+user+'</h5>'+txt+'</span>');            
              
              
            }
            //document.execCommand("copy");
         } 
     }
   });



 
    $('.chat_zitate').click(function(){
        user=$(this).next().html();
        txt=$(this).parent().next().children().html();
        $(this).parent().next().children().css('background','red')
        var vorhanden_inhalt=$('#text_area').val();
        $('#text_area').val(vorhanden_inhalt+' [ZITAT='+user+']'+txt+'[/ZITAT]');  
      
      
  
  $('#chat2').val(vorhanden_inhalt+'<span class="zit"><h5> Zitat von '+user+'</h5>'+txt+'</span>');     
      
      
      
      
      
      
      
    });
   
}
start();
$('#senden').click(function(){
    $('.text').css('background','none');
    var inhalttextarea=$('#text_area').val();
      var inhalttextarea1=$('#chat2').val();
    $('#text_area').val('');
    var chatin=$('#chat').html();
    $('#chat').html(chatin+"<div class='messages'><div class= 'oben'>   <button class='chat_zitate'>Z</button><div class='user' id='user-basti'>basti</div></div><div class='unten'><div class='text'>"+inhalttextarea+"</div></div></div>"); 
  
  
      var chatin1=$('#chat1').val();
                   $('#chat1').val(chatin1+"<div class='messages'><div class= 'oben'>   <button class='chat_zitate'>Z</button><div class='user' id='user-basti'>basti</div></div><div class='unten'><div class='text'>"+inhalttextarea1+"</div></div></div>"); 
  
  
  
  
  
  
  setTimeout(function(){
  start();
  },2500);
})

  



$('#php').click(function(){
  
  $('#chat').html($('#chat1').val());
  start();
})
</script>


</body>
</html>