Einfache Formatierung aus kopierten Texten übernehmen

07.02.2025 07:29
#1 Einfache Formatierung aus kopierten Texten übernehmen
avatar
Mitglied

In den Beiträgen wird ja aus gutem Grund der BB-Code verwendet!
Wird ein formatierter Text kopiert, gehen alle Formatierungen verloren!

Frage:
Ist es möglich die einfachsten Formatierungen, wie "fett, cursiv oder color" aus kopierten Texten in den Beitrag mit zu übernehmen, bzw. automatisch umzusetzen?

Wer weiß hier weiter oder hat eine Idee?

VG und besten Dank im Voraus
Wolfgang

07.02.2025 11:19
#2 RE: Einfache Formatierung aus kopierten Texten übernehmen
l2
Mitglied

interessante Aufgabe

elegant wäre direkt Navigator/clipboard zu nutzen.

einfacher ist wahrscheinlich, eine editierbare Ablagefläche zu definieren.

<div id="ablage" contenteditable>...</div>

wenn dort die Kopie abgelegt ist, kann man die DOM-struktur analysieren und Knoten für Knoten in #messagetext übertragen





... würde es „Fussball spielen” heissen

vG Bernd‍

 Antworten

 Beitrag melden
08.02.2025 09:49
#3 RE: Einfache Formatierung aus kopierten Texten übernehmen
avatar
Mitglied

Hallo l2otbart_57,
mmh, wie geht es dann weiter???
Die Ablagefläche müsste einem HTML → BB-Converter entsprechen und außerhalb vom "Beitrag antworten" oder "Beitrag bearbeiten" sein, oder....
Hast Du da eine Skriptvorlage?

Oder kann man in den Beiträgen nicht "HTML-Formatierung für "<b>, <i> ooder <color>" optional zulassen?
Wäre das nicht ein Feature für den Support, hier würden doch keine Sicherheitmaßnahmen überschritten, oder....

VG

08.02.2025 10:43 (zuletzt bearbeitet: 08.02.2025 10:47)
#4 RE: Einfache Formatierung aus kopierten Texten übernehmen
l2
Mitglied

in der Tat, kann schon einen 1. Versuch anbieten.

Das Script wird im HTML-Baustein als neues Icon abgelegt.
Das Icon darf nicht in ein submenue verschoben werden.

Admin → Layout → Iconbar



Name: icb_ablage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<style>
#ic_ablage{
background-color:blue;
overflow:hidden;
width:15em;
height:3em;
}
 
#ic_ablage:after{
content:" hier Ablagebereich per Drag&Drop ...";
}
</style>
 
<div id="ic_ablage" contenteditable style="display:none"
title="bei mouseOut wird der Text uebertragen"></div>
 
<script> // Vers 8.2.24
(function(){
 
const tags="b,i,u,h1,h2,h3,h4,h5,h6".split(",");
let h2b =function(node){ // HTML to BBC
let btxt="";
for (let nc=node.firstChild;nc;nc=nc.nextSibling){
if (nc.nodeType==3){
btxt=""+btxt+nc.textContent.replace(/\&nbsp;/g," ");
}
else if (nc.nodeType==1){
let nn=nc.nodeName.toLowerCase();
if (nn=="strong") nn="b";
if (nn=="a"){
btxt+="[url="+nc.href+"]"+h2b(nc)+"[/url]";
}
else if (nn=="img"){
btxt+="[img]"+nc.src+"[/img]";
}
else if ((nn=="span"||nn=="font") && nc.style.color!=""){
btxt+="[color="+nc.style.color+"]"+h2b(nc)+"[/color]";
}
else if (nn=="span" && nc.style.backgroundColor!=""){
btxt+="[mark="+nc.style.backgroundColor+"]"+h2b(nc)+"[/mark]";
}
else if (nn=="br"){
btxt+="\n";
}
else if(tags.includes(nn)){
btxt+="["+nn+"]"+h2b(nc)+"[/"+nn+"]";
}
else{
btxt+=h2b(nc);
}
}
}//nc
return btxt;
}
 

let ic=document.getElementById("ic_ablage");
// console.log(ic.id);
let icl=ic.closest(".xob_iconlist");
icl.parentNode.insertBefore(ic,icl);
ic.removeAttribute("style");
ic.onmouseout=function(){
let t=h2b(this);
if(t.length) xob_insert(" "+t+" ");
this.innerHTML="";
}
})();
 
</script>
 
 



ist noch nicht perfekt, die Farben werden nicht sicher behandelt und &nbsp wird nicht gut gewandelt

hoffe, habe hier jetzt keinen ganz groben Fehler drin,
Ansonsten kann man es auch Gast hier ausprobieren https://test-v6.xobor.de/t313f27612-Abla...ebernehmen.html

der formatierte Text wird auf der blauen Fläche abgelegt oder eingefügt.





... würde es „Fussball spielen” heissen

vG Bernd‍

 Antworten

 Beitrag melden
08.02.2025 13:39 (zuletzt bearbeitet: 08.02.2025 13:43)
#5 RE: Einfache Formatierung aus kopierten Texten übernehmen
avatar
Mitglied

Hallo l2otbart_57,
dass ist ja echt der Hammer.
Da werden mit einer Kopie die einfachen HTML-Codes gleich in BB_Codes umgewandelt und eingefügt!
Alles in der Iconbar.....
Das ist mehr als ich erwartet habe, einfach klasse!

**************************

Habe für die Leerzeichen eine Lösung gefunden:

Zeile25:

1
 
btxt=""+btxt+nc.textContent.replace('\&nbsp;', '\ ') ;
 



***************************

Welcher Farbcode, welche Farben gehen nicht, "background" oder "color"?
Vieleicht bei Farben mit Angabe der Durchsichtigkeit (rgba(0,0, 0, 0.4) )?

************

Klasse Skript, ich drücke die Dauen, bin gespannt!
VG
Wolfgang

08.02.2025 14:54 (zuletzt bearbeitet: 08.02.2025 14:55)
#6 RE: Einfache Formatierung aus kopierten Texten übernehmen
avatar
Mitglied

Hallo l2otbart_57,
der Code in Beitrag #5 hatte zuerst funktioniert, dann wollte er nicht mehr, komisch….

*********

Habe weiter ausprobiert, der sollte funktionieren:

Zeile 25:

1
 
btxt=""+btxt+nc.textContent.replace(/\s|&nbsp;/g, ' ');
 



Habe noch Zeile 18+67 ausgetauscht, funktioniert im V6 besser...

1
 
window.addEventListener('load', function(){ ... });
 




VG
Wolfgang

08.02.2025 14:58
avatar  Ingmar
#7 RE: Einfache Formatierung aus kopierten Texten übernehmen
avatar
Technik

Ich habe mich damit recht lange beschäftigt, als es um die Zitatfunktion ging (da machen wir ja am Ende nichts anderes).
Mit einfachen Formatierungen wie fett/cursiv etc klappt das noch ganz gut. "Leider" kann man als Admin bei Xobor aber sehr komplexe Forencodes anlegen und es ist schlicht unmöglich, aus dem fertigen HTML-Code alle zugrundeliegenden BB-Codes zu finden. Das ist auch der Grund, weshalb wir nicht einfach einen WYSIWYG Editor einbinden können.

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
09.02.2025 09:54
#8 RE: Einfache Formatierung aus kopierten Texten übernehmen
l2
Mitglied

hallo Wolfgang,
habe die Änderungen übernommen und stelle den aktuellen Code bei mir zur Verfügung.

Farben wie [rot],[blau] funktionieren noch nicht

denke, es muss möglich sein, den formatierten Text direkt in die <textarea> ohne den Umweg über den Ablagebereich einzufügen.

Der Weg führt bestimmt über event-Handler onpaste, ondrop,... Habe leider noch keine Beschreibungen dazu gefunden, die ich verstehe oder anwenden könnte





... würde es „Fussball spielen” heissen

vG Bernd‍

 Antworten

 Beitrag melden
11.02.2025 20:11 (zuletzt bearbeitet: 11.02.2025 20:24)
#9 RE: Einfache Formatierung aus kopierten Texten übernehmen
l2
Mitglied

... denke, dass ich nun ein Script gefunden habe, um formatierten Text direkt in das Textfeld einzufügen ohne Verwendung des blauen Ablagebereichs.

jetzt wird für das Textfeld zusätzlich ein onpaste-Eventhandler definiert.



Admin → Layout → Iconbar


Name: icb_ablage
HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
<style>	/*	 vers: 11.2.24	onpaste	*/
#ic_ablage{
background-color:blue;
color: white;
overflow:hidden;
width:12em;
height:3em;
}
 
#ic_ablage:hover {
background-color:darkblue;
cursor: help;
}
 
#ic_ablage:after{
content:" hier Ablagebereich per Drag&Drop ...";
}
 
</style>
 
<script> // Vers 11.2.24
window.addEventListener('load', function(){
 
const tags="b,i,u,h1,h2,h3,h4,h5,h6,small,big,ul,li".split(",");
let h2b =function(node){ // HTML to BBC
let btxt="";
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";
if (nn=="a"){
btxt+="[url="+nc.href+"]"+h2b(nc)+"[/url]";
}
else if (nn=="img"){
btxt+="[img]"+nc.src+"[/img]";
}
else if(tags.includes(nn)){
btxt+="["+nn+"]"+h2b(nc)+"[/"+nn+"]";
}
else if ((nn=="span") && nc.getAttribute("style") && nc.style.color!="" ){
btxt+="[color="+nc.style.color+"]"+h2b(nc)+"[/color]";
}
else if (nn=="span" && nc.getAttribute("style") && nc.style.backgroundColor!=""){
btxt+="[mark="+nc.style.backgroundColor+"]"+h2b(nc)+"[/mark]";
}
else if (nn=="font" && nc.getAttribute("color")){
let c= nc.getAttribute("color");
btxt+="[color="+nc.getAttribute("color")+"]"+h2b(nc)+"[/color]";
}
else if (nn=="br"){
btxt+="\n";
}
else if (nn=="script"||nn=="style"){
// ignorieren
}
else if (nn=="div" || nn=="blockquote"){
btxt+="\n"+h2b(nc)+"\n";
}
else{
btxt+=h2b(nc);
}
}
}//nc
return btxt;
}
 
let ic=document.getElementById("ic_ablage");
//console.log(ic.id);
if (ic) {
let icl=ic.closest(".xob_iconlist");
icl.parentNode.insertBefore(ic,icl);
ic.removeAttribute("style");
 
ic.onmouseout=function(){
let t=h2b(this);
if(t.length) xob_insert(" "+t+" ");
this.innerHTML="";
}
}//ic
 
const ta=document.querySelector("#messagetext,#metext");
console.log("onpaste: "+ta.id);
 
const div=document.createElement("div");
 
ta.onpaste= (ev) => {
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")};
} // ta.onpaste
 
});
</script>
 
<div id="ic_ablage" contenteditable style="display:none"
title="Ablagefläche für formatierten Text - hier drop oder einfügen - bei mouseOut wird der Text übertragen"></div>
 



diese Version ersetzt den bisherigen HTML-Baustein.
Wenn man den blauen Ablagebereich nicht mehr braucht, löscht man die letzten beiden Zeilen.

getestet mit Windows Chrome, Opera, Egde und Android Chrome.

habe noch die Tags small,big,ul,li ergänzt,

andere Blockelemente div,blockquote habe ich jetzt ungetestet hinzugefügt . (Zeile 61)

bin gespannt, ob es soweit erstmal funktioniert ...





... würde es „Fussball spielen” heissen

vG Bernd‍

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!