Forum PHP.pl > [JavaScript] html w textarea

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] html w textarea

Pitter

1.02.2009, 15:57:33

Witam. Otóż chce zrobić sobie edytor tekstu na stronę. Wiem, jest dużo gotowców ale ja chce wiedzieć co tam jest i jak to się robi. Jak na razie mam taki kod:

Kod

<head>
<script type="text/javascript">
function creatSelect(txtarea)
{
    var startPos = txtarea.selectionStart;
    var endPos = txtarea.selectionEnd;
    return startPos+'.'+endPos;
}

function addStyle(button)
{
    var txtarea = document.getElementById('text');
    var cs = creatSelect(txtarea).split('.');
    var startPos = cs[0];
    var endPos = cs[1];
    var newSV;
    var newEV = '</span>';

    var startValue = txtarea.value.substring(0,startPos);
    var valueSelect = txtarea.value.substring(startPos,endPos);
    var endValue = txtarea.value.substring(endPos + newEV.length, txtarea.value.length);

    if(button.value=='B') newSV = '<span style="font-weight: bold;">';
    if(button.value=='/') newSV = '<span style="text-underline: underline;">';

    txtarea.value = startValue + newSV + valueSelect + newEV + endValue;

    txtarea.focus();
    txtarea.setSelectionRange(cs);
}
</script>
</head>
<body>
<form name="form">
<input type="button" id="b2" value="B" style="background: #F5F5F5;" onclick="addStyle(this);">
<input type="button" id="i2" value="/" style="background: #F5F5F5;" onclick="addStyle(this);">
<input type="button" id="tab2" value="tab" style="background: #F5F5F5;" onclick="addStyle(this);">
<br>
<select name="family" style="margin-top: 10px;">
<option value="comic">Comic</option>
<option value="ariel">Arial</option>
</select>
<br>
<textarea id="text" style="width: 300px; height: 200px; margin-top: 20px;" onselect="creatSelect(this);">
</textarea>
</form>
</body>

I Problem w tym że nie wiem jak zrobić aby html czyli <span... nie był wyświetlany jako tekst tylko tak jak bezpośrednio w przeglądarce.

erix

2.02.2009, 16:20:02

W textarea? Zapomnij. Jak już, to użyj TinyMCE/FCKEditor.

Sadu2

2.02.2009, 16:58:58

Po:

Cytat

txtarea.value = startValue + newSV + valueSelect + newEV + endValue;

Dodaj:

Cytat

txtarea.style.fontWeight = 'bold';

listę dostępnych stylów w JS masz tutaj:

http://www.comptechdoc.org/independent/web.../javastyle.html

Musisz kombinować, bo teraz ci wyświetli cały kod pogrubiony.

EDIT:
Albo w ifie:

Cytat

if(button.value=='B') {
newSV = '<span style="font-weight: bold;">';
txtarea.style.fontWeight = 'bold';

}
if(button.value=='/') {
newSV = '<span style="text-underline: underline;">';
txtarea.style.textDecoration = 'underline';
}

Kombinuj, kombinuj i jeszcze raz kombinuj

PS: wybacz nie zrozumiałem Cię dobrze. Myślałem, że chodzi Ci o te style.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.