bbc code
Beispiel weie man Bbccode in einen Textfeld einbaut
Der hier verwendete Code
<body style="max-width:600px;display:flex;flex-direction:column">
<script>
function bbcode(bb,c) {
var field = document.getElementById("message");
if (document.getSelection) {
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
var txt = field.value.substring(startPos, endPos);
if (txt != "") {
if(c==1){
var cp= `<span style="color:${bb}">${txt}</span>`;
}
if(bb=='b'){
var cp = `<span style="font-weight:900">${txt}</span>`;
}
if(bb=='u'){
var cp = `<span style="text-decoration:underline">${txt}</span>`;
}
if(bb=='h1'){
var cp = `<span style="font-size:30px">${txt}</span>`;
}
if(bb=='i'){
var cp = `<span style="font-family: cursive">${txt}</span>`;
}
field.value = field.value.substring(0, startPos) + cp +
field.value.substring(endPos, field.length);
}else {
if(c==1){
var cp= `<span style="color:${bb}">${txt}</span>`;
}
if(bb=='b'){
var cp = `<span style="font-weight:900">${txt}</span>`;
}
if(bb=='link'){
var cp = `<a href="${txt}">${txt}</a>`;
}
if(bb=='u'){
var cp = `<span style="text-decoration:underline">${txt}</span>`;
}
if(bb=='h1'){
var cp = `<span style="font-size:30px">${txt}</span>`;
}
if(bb=='i'){
var cp = `<span style="font-family: cursive">${txt}</span>`;
}
field.value = field.value.substring(0, startPos) + cp +
field.value.substring(endPos, field.length);
}
}
}
</script>
<label>
<button data-value="b" id="">[ b ]</button>
<button data-value="i" id="">[ i ]</button>
<button data-value="h1" id="">[ h1 ]</button>
<button data-value="u" id="">[ u ]</button>
<button data-value="link" id="">[ link ]</button>
<input id="col" type="color">
</label>
<script>
let but=document.querySelectorAll('button');
but.forEach(function(d){
d.addEventListener('click',function(){
var val=d.getAttribute('data-value');
var ty=0;
bbcode(val,ty)
})
})
let cc=document.querySelector('#col');
cc.addEventListener('change',function(){
var val=cc.value;
var ty=1;
bbcode(val,ty)
})
</script>
<textarea id="message" rows="12" cols="55" spellcheck="false">
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.
Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.
Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.
Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.
</textarea>
<iframe id="vorschau" srcdoc=""></iframe>
<p><input type="button" value="Zeige Vorschau" id="vor"></p>
<script>
document.getElementById('vor').addEventListener('click',function(){
var field1 = document.getElementById("message"); document.getElementById('vorschau').srcdoc=field1.value;
})
</script>
</body>