Tagbar: Markierten Text umschließen

P

PhoenixDH

Erfahrenes Mitglied
Ich habe im Moment eine Tagbar für mein Board, bei dem man auf einen Button klicken muss und dann den Text eingeben um z.B. fett zu schreiben !

Jetzt hätte ich aber gerne, das wenn man einen Text markiert hat und dann auf den Button klickt, das sich dann automatisch der Text mit dem Tag umschließt ! Falls kein Text markiert wurde soll er das Popup mit dem einzugebenden Text bringen ?

Grundsätzliche Frage, ist sowas möglich ?
 
Ja, das geht... im IE und Gecko-Browsern... die bieten die nötigen Methoden, um einen "Range" aus markierten Text zu erzeugen.

Ist dieser Bereich leer, kannst du den User zur Texteingabe auffordern, andernfalls kannst du ihn auslesen und die Tags aussenrum packen.
Der Editor hier im Board... (nicht die Schnellantwortbox) benutzt das übrigens auch.
 
Wie müsste das dann aussehen wenn eine Funktion so aussieht ?

Code: 
function insertcolor(color)
{
    textarea = window.document.forms['$form'].elements['$textarea'];
    colored = prompt( 'Geben sie den gefärbten Text ein.' );
    textarea.value += '[ color=\"' + color + '\" ]' + colored + '[ /color ]';
    textarea.focus();
}

Danke für eure Hilfe !
 
Hier mal nen Beispiel:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function format(strTag)
{
objEditor = document.formular.textfeld;
blnIe     = document.selection;
blnMoz    = (objEditor.selectionStart || objEditor.selectionStart == '0');
if(blnIe)
    {
        objEditor.focus();
        strTxt=document.selection.createRange().text
        if(strTxt=='')
            {
                strTxt=prompt('Text eingeben','');
                if(!strTxt||strTxt=='')return;
            }
        document.selection.createRange().text='['+strTag+']'+strTxt+'[\/'+strTag+']';
        document.selection.createRange().select();
    }
else if (blnMoz)
	{ 
		intStart = objEditor.selectionStart;
		intEnd = objEditor.selectionEnd;
		
		strTxt=String(objEditor.value).substring(intStart,intEnd);
		if(strTxt=='')
            {
                strTxt=prompt('Text eingeben','');
                if(!strTxt||strTxt=='')return;
            }
		objEditor.value = String(objEditor.value).substring(0, intStart) +'['+strTag+']'+strTxt+'[\/'+strTag+']'+ String(objEditor.value).substring(intEnd, objEditor.value.length);
		objEditor.focus();
	}
else
	{
		strTxt=prompt('Text eingeben','');
        if(!strTxt||strTxt=='')return;
        objEditor.value+='['+strTag+']'+strTxt+'[\/'+strTag+']';
	}
}
//-->
</script>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<form name="formular">
<textarea name="textfeld"></textarea>
<input type="button" onclick="format('b')"value="phat:D">
</form>
</body>
</html>
 
Ich hatte es so das es funktionierte, nur ist mir jetzt aufgefallen, das es im Mozilla geht und im IE nicht, woran kann das liegen, hier der Code:

Code: 
function inserttag( tag, color )
{
    textarea = window.document.forms['$form'].elements['$textarea'];
    var start = 0;
    var end   = 0;
    var insText = '';
    var mode = 0;
    if(typeof textarea.selectionStart != 'undefined')
    {
        start = textarea.selectionStart;
        end = textarea.selectionEnd;
        insText = textarea.value.substring(start, end);
    }
    else if(typeof document.selection != 'undefined')
    {
        textarea.focus();
        var range = '';
        range = document.selection.createRange();
        insText = range.text;
        mode = 1;
    }
    else
    {
        mode = 2;
    }
    
    if( tag == 'url' )
    {
        urlurl = prompt( 'Geben Sie die URL des Links ein.' );
        urlname = prompt( 'Geben Sie den Namen des Links ein.' );
        textarea.value += '[ url=\"' + urlurl +'\" ]' + urlname + '[ /url ]';
        textarea.focus();
    }
    else if( tag == 'mail' )
    {
        mail = prompt( 'Geben Sie die Mailadresse ein.' );
        mailname = prompt( 'Geben Sie den Namen der Adresse ein.' );
        textarea.value += '[ mail=\"' + mail +'\" ]' + mailname + '[ /mail ]';
        textarea.focus();
    }
    else if( tag == 'sign' )
    {
        sign = prompt( 'Geben Sie den Schilder-Beschriftungstext ein.' );
        textarea.value += 'sign:' + sign + ': ';
        textarea.focus();
    }
    else
    {
        if( tag == 'b' )
        {
            var aTag = '[ b]';
            var eTag = '[ /b]';
            var anweisung = 'Geben Sie denn fett geschriebenen Text ein.';
        }
        else if( tag == 'i' )
        {
            var aTag = '[ i]';
            var eTag = '[ /i]';
            var anweisung = 'Geben Sie denn kursiv geschriebenen Text ein.';
        }
        else if( tag == 'u' )
        {
            var aTag = '[ u]';
            var eTag = '[ /u]';
            var anweisung = 'Geben Sie denn unterstrichenen Text ein.';
        }
        else if( tag == '-' )
        {
            var aTag = '[ -]';
            var eTag = '[ /-]';
            var anweisung = 'Geben Sie denn durchgeschtrichenen Text ein.';
        }
        else if( tag == 'center' )
        {
            var aTag = '[ center]';
            var eTag = '[ /center]';
            var anweisung = 'Geben Sie den zentrierten Text ein.';
        }
        else if( tag == 'color' )
        {
            var aTag = '[ color=\"' + color + '\"]';
            var eTag = '[ /color]';
            var anweisung = 'Geben Sie den gefärbten Text ein.';
        }
        else if( tag == 'size' )
        {
            var aTag = '[ size=\"' + color + '\"]';
            var eTag = '[ /size]';
            var anweisung = 'Geben Sie den Text in einer anderen Schriftgröße ein.';
        }
        else if( tag == 'face' )
        {
            var aTag = '[ face=\"' + color + '\"]';
            var eTag = '[ /face]';
            var anweisung = 'Geben Sie den Text in einer anderen Schriftart ein.';
        }
        else if( tag == 'code' )
        {
            var aTag = '[ code]';
            var eTag = '[ /code]';
            var anweisung = 'Geben Sie den Code ein.';
        }
        else if( tag == 'php' )
        {
            var aTag = '[ php]';
            var eTag = '[ /php]';
            var anweisung = 'Geben Sie den PHP Quellcode ein.';
        }
        else if( tag == 'quote' )
        {
            var aTag = '[ quote]';
            var eTag = '[ /quote]';
            var anweisung = 'Geben Sie das Zitat ein.';
        }
        else if( tag == 'img' )
        {
            var aTag = '[ img]';
            var eTag = '[ /img]';
            var anweisung = 'Geben Sie die URL des Bildes ein.';
        }
        
        if( mode == 0 )
        {
            insert( aTag, eTag, insText, anweisung, start, end, 0 );
        }
        else if( mode == 1 )
        {
            insert( aTag, eTag, insText, anweisung, range, '', 1 );
        }
        else
        {
               bold = prompt( anweisung );
               textarea.value += aTag + bold + eTag;
        }
    }
}



      <select name="select" class="tbselect" id="select">
        <option value="2">Schriftgröße</option>
        <option value="1" onClick="inserttag( \'size\', this.value)" style="size:1">klein</option>
        <option value="2" onClick="inserttag( \'size\', this.value)" style="size:2">normal</option>
        <option value="3" onClick="inserttag( \'size\', this.value)" style="size:3">mittel</option>
        <option value="4" onClick="inserttag( \'size\', this.value)" style="size:4">groß</option>
        <option value="5" onClick="inserttag( \'size\', this.value)" style="size:5">sehr groß</option>
      </select>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück