Forum - Einfache HTML-Formatierungen aus kopierten Texten in Forenbeiträgen übernehmen!

<style>
[placeholder]:empty:before {
  content: attr(placeholder);
  opacity:0.8;  
  white-space: pre;
}
[placeholder]:empty:focus:before {
  content: "";
}
#icon_xpaste.xob_icon_cont > div {
  border: 1px solid #aaaaaa;
  border-radius: 5px;
  display: inline-block;
  min-width:16px; height: auto;
  text-align: center;
  margin: 5px 0 0 5px;
  color: #000000;
 }
#icon_xpaste.xob_icon_cont > div:after {
  content:"\00A0"; 
}
#icon_xpaste.xob_icon_cont.icon_xpaste > div:after {
  content:"\2716";
  background-color: #aaeeaa;
  padding:0px 2px 0 2px;
  border-radius: 5px;
}
</style>
 
<script>
window.addEventListener('load', function(){ 
 
  // Zugelassene Textfelder (Neuer Beitrag, Beitrag bearbeiten, Blog, Bildergalerie)
  const ta=document.querySelector("#messagetext,#metext, #edit_text, #commentar:not(#commentspost #commentar), #nachricht, #new_text");
 
  // Button setzen
  var check= document.createElement("div");
  check.className = "checkbutton";
  check.innerHTML = "<div id='icon_xpaste' class='xob_icon_cont' title='HTML-Eingabe aktivieren/deaktivieren'><div></div> Eingabe HTML</div><div style='clear:both;'></div>";
  ta.parentNode.insertBefore(check, ta.nextSibling);
  
  // HTML-Elemente
  const tags="b,i,u,h1,h2,h3,h4,h5,h6,small,big,ol,ul,li,table,tr,th,td,pre,sup,sub,center".split(",");
  const lf_tags="li,tr".split(",");
  var code_mode=false;
  let h2b =function(node){ // HTML to BBC
	let btxt="";
 
	let b=function(tag){return "["+tag+"]";}
	let bb=function(tag,x){return b(tag)+x+b("/"+tag);}
	let bbv=function(tag,v,x){return b(tag+"="+v)+x+b("/"+tag);}
	const	lgrp="list-group";
 
	if (node) for (let nc=node.firstChild;nc;nc=nc.nextSibling){
		if (nc.nodeType==3){
			btxt+=""+nc.textContent.replaceAll("&nbsp;", ' ').replaceAll("\u00A0", ' ').replaceAll("\n", ' ');
			}
		else if (nc.nodeType==1){
			let nn=nc.nodeName.toLowerCase();
			if (nn=="strong") nn="b";
			let cl=nc.getAttribute("class");
			let sty=nc.getAttribute("style");
 
			if (nn=="br"){
				btxt+="\n";
				}
			else if (code_mode){
				btxt+=h2b(nc);
				}
			else if (nn=="a"){
				btxt+=bbv("url", nc.href, h2b(nc));
				}
			else if (nn=="img"){
				btxt+=bb("img",nc.src);
				}
			else if(nn=="ul" && nc.classList.contains(lgrp)){
				btxt+=bb("list",h2b(nc));
				}
			else if(nn=="li" && nc.parentNode.classList.contains(lgrp)){
				btxt+="\n[*]"+h2b(nc);
				}
			else if(tags.includes(nn)){
				if(lf_tags.includes(nn)) btxt+="\n";
				btxt+=bb(nn,h2b(nc));
				}
			else if ((nn=="span") && sty && sty.includes("line-through") ){
				btxt+=bb("strike",h2b(nc));
				}
			/* else if (0	&&	(nn=="span") && sty && nc.style.color!="" ){
				btxt+=bbv("color",nc.style.color, h2b(nc));
				}
			else if (nn=="span" && sty && nc.style.backgroundColor!=""){
				btxt+=bbv("mark", nc.style.backgroundColor, h2b(nc));
				}
			else if (nn=="font" && nc.getAttribute("color")){
				let c= nc.getAttribute("color").toLowerCase();
				let c_c="#0000ff,#ff0000,#00c000,#ff8000,#ff00ff,#ffffff,#000000,".split(",");
				let c_n="blau,rot,gruen,orange,lila,weiss,schwarz".split(",");
				let i=c_c.indexOf(c);
				if(i<0)
					btxt+=bbv("color",c, h2b(nc))
				else
					btxt+=bb(c_n[i],h2b(nc));
				} */
			else if (nn=="hr"){
				btxt+="[line]";
				}
			else if (nn=="script"||nn=="style"){
				// ignorieren
				}
			else if (nn=="blockquote"){
				btxt+=bb("quote",h2b(nc));
				}
			else if (nn=="em"){
				btxt+=bb("i",h2b(nc));
				}
			else if (nn=="div"){
				if(cl=="bbcode_code") {
					code_mode=true;
					btxt+=bb("code",h2b(nc.querySelector("code")));
					code_mode=false;
					}	
				else if(cl=="hpm_spoiler") {
					let ip=nc.querySelector(".hpm_spoiler_headinput");
					btxt+=bbv("spoiler",(ip?ip.value: "Spoiler"), h2b(nc.querySelector(".hpm_spoiler_body")))
					}	
				else if(sty.includes("text-align: left"))
					btxt+=bb("left",h2b(nc))	
				else if(sty.includes("text-align: right"))
					btxt+=bb("right",h2b(nc))
				else		
					btxt+="\n"+h2b(nc)+"\n";
				}
			/* else if (nn=="details" && cl=="spx"){
				let ndsum=nc.querySelector("summary");
				ndsum.parentNode.removeChild(ndsum);
				btxt+=bbv("spx",h2b(ndsum),h2b(nc));
				} */
			else if (nn=="p" ){
					btxt+="\n"+h2b(nc)+"\n";
				}
			else{
				btxt+=h2b(nc);
				}
			}
		}//nc
		return btxt;
    }
 
   const div=document.createDocumentFragment().appendChild(document.createElement("div"));
   const name_xp="icon_xpaste";
   const ic_xp=document.getElementById(name_xp);
 
    // Hinweis HTML im Textfeld - Placeholder
    let placeholder="Einf\u00FCgen von einfachen formatierten HTML-Text per Copy \u0026 Paste m\u00F6glich!";
	if (ic_xp){ 
		let flag=localStorage.getItem(name_xp)==1?1:0;
		ic_xp.classList.toggle(name_xp,flag);
		ic_xp.onclick=function() {
			this.classList.toggle(name_xp);
			let flag=this.classList.contains(name_xp);
			localStorage.setItem(name_xp,flag?1:0);
                          if (document.getElementsByClassName('icon_xpaste').length > 0) {
                            ta.setAttribute('placeholder',placeholder);
                          } else {
                            ta.setAttribute('placeholder','');
                          }
		} 
	} 
 
	ta.onpaste= (ev) => {
		if(ic_xp && ic_xp.classList.contains(name_xp))	try	{
		let cb_Data=ev.clipboardData || window.clipboardData;
		if(cb_Data.types.indexOf('text/html') > -1){
			ev.stopPropagation();
			ev.preventDefault();
			let html=cb_Data.getData('text/html');
			div.innerHTML=html;
			let bbc=h2b(div);
 			xob_insert(" "+bbc+" ");
			 }
   		 } catch(err) {
                  /* xob_insert("\n*§§* "+err+" *§§* \n") */
                  xob_insert("\n Fehler beim Konvertieren! \n")
                };
	} // ta.onpaste
 
         if (document.getElementsByClassName('icon_xpaste').length > 0) {
           ta.setAttribute('placeholder',placeholder);
         } 
});
</script>