Bitte geben Sie einen Grund für die Verwarnung an
Der Grund erscheint unter dem Beitrag.Bei einer weiteren Verwarnung wird das Mitglied automatisch gesperrt.
Einfache Formatierung aus kopierten Texten übernehmen

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
#2 RE: Einfache Formatierung aus kopierten Texten übernehmen
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
vG Bernd

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
#4 RE: Einfache Formatierung aus kopierten Texten übernehmen
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
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(/\ /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   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.

vG Bernd
#5 RE: Einfache Formatierung aus kopierten Texten übernehmen

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:
btxt=""+btxt+nc.textContent.replace('\ ', '\ ') ;
***************************
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
#6 RE: Einfache Formatierung aus kopierten Texten übernehmen

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:
btxt=""+btxt+nc.textContent.replace(/\s| /g, ' ');
Habe noch Zeile 18+67 ausgetauscht, funktioniert im V6 besser...
window.addEventListener('load', function(){ ... });
VG
Wolfgang

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.
#8 RE: Einfache Formatierung aus kopierten Texten übernehmen
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
vG Bernd
#9 RE: Einfache Formatierung aus kopierten Texten übernehmen
... 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:
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(" ", ' ')
.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 ...
vG Bernd
- Informationen
- Aktuelle News
- Forum Tutorials - Tipps und Anleitungen
- SEO / Werbung fürs Forum
- Verwaltung
- Extras
- Design
- Plugin(system)
- Eure Fragen zu Tutorials
- Forum Support
- Fragen und Antworten
- Pluginsystem
- Plugins
- Templates & Sprachen
- Bugreport
- Verbesserungsvorschläge
- Sponsoren gesucht
- Das neue Xobor Business-Template
- News und Updates
- Bugreport
- Allgemeines Feedback
- Verbesserungsvorschläge
- Sonstiges
- Kaffeeklatsch
- Lob & Kritik
- Verbesserungsvorschläge
- Allgemeine Fragen
- Fehlermeldungen
- Verbesserungsvorschläge Responsive Design
- Bugreport Responsive Design
- Archiv - Alter Betatest
- Responsive Design - Verbesserungsvorschläge
- Responsive Design - Bugreport
- Fragen zum neuen Template
- Neue Administration Beta Test
- Bugreport Neue Administration
- Allgemeines Fragen & Feedback
- Verbesserungsvorschläge zur neuen Administration
- Shoutbox
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
© 2017 Xobor | Forum-Software