tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
614
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 02.09.04 19:12 #1
    shinbo shinbo ist offline Mitglied Bronze
    Registriert seit
    Sep 2003
    Beiträge
    45
    JS Anfänger braucht Hilfe.

    Ich bastele gerade an einem Online WYGIWYG auf JS Basis aus verschiedenen Tuts zusammen und hänge fest. Zur allgemeinen Info kommen die Texte aus einer ACCESS DB und werden über ASP (VB) in Flash ausgegeben. Ich habe schon viele Tutorials durch und kann wegen Flash nicht auf „execCommand“ vom IE zurückgreifen. Das ist ganz schnell erklärt.

    Das „execCommand“ generiert „Bold“ so:
    <strong> der Text </strong>.

    Flash braucht es aber so:
    <b> der Text </b>

    Dasselbe gilt auch für andere HTML-Tags

    Kann mir jemand Helfen dieses Scriptproblem zu beheben?

    Hier mein Versuch (Das ganze erstmals ohne DB anbindung):

    Code :
    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
109
110
111
112
113
114

    <html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
  <!--
  // Array mit den HTML-Tags zum Formatieren des Textes
    arrTags = new Array();
  arrTags['fett'] = new Array("<B>", "</B>");
 
  var txtBefore;
  var txtAfter;
  var txtMiddle;
 
    function splitSelection() {
      // TextArea den Fokus geben
      idContent.document.focus();
      // TextRange-Objekt des selektierten Textes erstellen
      var selText1 = document.selection.createRange();  // Zum Positionieren des Cursors an Anfang der Markierung
      var selText2 = document.selection.createRange();  // Zum Positionieren des Cursors an Ende der Markierung
 
    // Markierten Text auslesen
      txtMiddle = selText1.text;
      // Bewegt den Cursor vor den markierten Text
      selText1.collapse(true);    // Start- und Endpunkt sind gleich
      // Bewegt den Cursor an das Ende des markierten Textes
      selText2.collapse(false); // Start- und Endpunkt sind gleich
 
      // Markierte Bereiche duplizieren
      var selTxtBefore = selText1.duplicate();  // Endpunkt selTextBefore vor markiertem Bereich
      var selTxtAfter = selText2.duplicate();       // Startpunkt selTextAfter nach markiertem Bereich
 
      // Setzt das Objekt auf den Text der TextArea -> selText1 enthält den gesamten Text der Area
 
[COLOR=red]//AB HIER IST DER FEHLER[/COLOR] 
 
  selText1.moveToElementText(document.Content);
      // Der Startpunkt von selTxtBefore wird der Startpunkt des gesamten Area-Textes
      selTxtBefore.setEndPoint("StartToStart", selText1);
      // Der Endpunkt von selTxtAfter wird der Endpunkt des gesamten Area-Textes
      selTxtAfter.setEndPoint("EndToEnd", selText1);
 
      txtBefore = selTxtBefore.text;
      txtAfter = selTxtAfter.text;
    }
 
 function insert(strFormat) {
  splitSelection();
  document.formular.Content.value = txtBefore + arrTags[strFormat][0] + txtMiddle + arrTags[strFormat][1] + txtAfter;
  document.formular.Content.focus();
  }
 
  // Falls ein Wert über die URL übergeben wurde
  if(window.location.search != ""){
    // Text für Vorschau auslesen und extrahieren
    var strParameter = String(unescape(window.location.search));
    strParameter = strParameter.substr(1, strParameter.length);
  }
 
  -->
</script>
</head>
<script LANGUAGE="JavaScript">
 
var isHTMLMode=false
function setMode(bMode)
    {
    var sTmp;
    isHTMLMode = bMode;
    if (isHTMLMode){
    sTmp=idContent.document.body.innerHTML;
    idContent.document.body.innerText=sTmp;
    } 
    else {
    sTmp=idContent.document.body.innerText;
    idContent.document.body.innerHTML=sTmp;
    }
    idContent.focus();
    }
///////////
function preload(){
idContent.document.open();
idContent.document.write(Content.value);
idContent.document.close();
idContent.document.designMode="On";
}
</script>
<body onLoad="preload();">
<!-- <form name="formular" action="" method="GET"> -->
<br>
<script language="JavaScript" type="text/javascript">
<!--
 
 
 
function document.onreadystatechange()
    {
    idContent.document.designMode="On"
    }
 
//-->
        </script>
<input type="button" class="button" value="fett" onclick="insert('fett')">
<iframe width="600" id="idContent" height="200"></iframe>
<textarea name="Content" style="display: none;" rows="7" cols="55"><%=fldVal%></textarea>
<table id="tblCoolbar" width="600">
  <tr>
    <td><div align="left">
        <input type="button" onclick="Save()" name="cmdSave" value="  speichern  " class="cmdflat">
        <input type="checkbox" onclick="setMode(this.checked)">
        Edit HTML</div></td>
  </tr>
</table>
</body>
</html>
    Geändert von shinbo (02.09.04 um 19:16 Uhr)
     
    Zitieren Zitieren
  2. 02.09.04 21:25 #2
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Da hast du dir ja was ganz Einfaches für den Javascript-Einstieg ausgesucht


    Ich muss gestehen....dass ich da nicht recht durchblicke
    Probleme wirds da aber wahrscheinlich geben, weil z.B. das Textarea hidden ist, und im Dokument selbst keine selection vorhanden ist...die soll ja, soweit ich das sehe, im iFrame erfolgen.

    Es gibt da einige Sachen, welche dir das Leben leichter machen könnten.
    Zum einen die Methode pasteHTML() ....das kopiert dir ein beliebiges Codefragment in ein TextRange-Objekt...das erspart dir das Zwischenspeichern des Textes ausserhalb der Auswahl.

    Zum Anderen die Eigenschaft htmlText....die gibt dir den HTML-Code eines Textrange-Objektes aus.

    Hier mal nen Beispiel, welches sich dieser beiden Sachen bedient:
    Code :
    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
109
110
111
112
113
114

    <html>
<head>
<title>Test</title>
 
<script type="text/javascript">
<!--
 
 
    /**
     * Die Tags
     * Arrayschluessel ist der Name des Tags
     * Wert die Anzeige im Button
     */
 
    arrTags=new Array();
    arrTags['b']='BOLD';
    arrTags['u']='UNDERLINE';
    arrTags['i']='ITALIC';
    arrTags['s']='STRIKE';
 
 
    /**
     * Initalisiert den DesignMode und die Überwachung
     * der Aenderungen im iFRame
     */
 
    function init()
    {
        with(window.idContent)
        {
        document.open();
        document.write('<body></body>');
        document.close();
        document.designMode="On";
        document.onkeyup=show_source;
        document.onmouseup=show_source;
        focus();
        }
    }
 
 
 
    /**
     * Schreibt die benötigten Buttons
     * für die Tags anhand arrTags in die Seite
     */
 
    function menu()
    {
        strOut='';
 
        for(var k in arrTags)
            {
            strOut+='<input type="button"onclick="myCommand(\''+k+'\')"value="'+arrTags[k]+'">';
            }
 
        document.write('<nobr>'+strOut+'</nobr><br><br>');
    }
 
 
 
    /**
     * überträgt den iFrame-Inhalt ins Textarea
     */
 
    function show_source()
    {
        document.all.Content.value=window.idContent.document.body.innerHTML;
    }
 
 
    /**
     * Einsetzen der Tags in ausgewählten Bereich
     */
 
    function myCommand(cmd)
    {
        window.idContent.focus();
        objEditor=window.idContent.document;
 
        //TextRange-Objekt für iFrame erstellen
        rng=objEditor.selection.createRange();
 
        //Wenn Text ausgewählt wurde...
        if(rng.htmlText!='')
            {
            //Auswahl in Tags "einbetten"
            strHTML='<'+cmd+'>'+rng.htmlText+'<\/'+cmd+'>';
 
            //strHtml in die Auswahl des iFrames kopieren
            rng.pasteHTML(strHTML);
            show_source();
            }
    }
 
//-->
</script>
</head>
<body onload="init()">
<center>
<form>
<script type="text/javascript">
<!--
menu();
//-->
</script>
<iframe width="600" id="idContent" height="200"></iframe>
<br>Source:<br>
<textarea style="width:600px;height:200px;overflow:auto;color:white;background-color:Navy" name="Content">
</textarea>
</center>
</form>
</body>
</html>

    ....Test
    Geändert von Sven Mintel (02.09.04 um 21:35 Uhr)
     
    Zitieren Zitieren
  3. 13.09.04 18:04 #3
    shinbo shinbo ist offline Mitglied Bronze
    Registriert seit
    Sep 2003
    Beiträge
    45
    So wieder aus dem spontan Urlaub zurück.

    Habe das Script ein bissel geändert und habe nur noch 3 Probleme.
    Ich bekomme es nicht hin zu prüfen ob im Markierten Text schon das Gleiche HTML-Tag vorhanden ist oder nicht.
    Eigentlich wäre es ja sinnig, dass wenn es der Fall ist dieser aus dem Text gelöscht wird. Ich habe es mit dem Replace versucht aber daran gescheitert.

    Das andere Problem ist das darstellen eines Anführungszeichen im Arry.
    Er macht mir das so:
    <FONT color=#ff0000>Text</Font>

    brauche es aber so:
    <FONT color=“#ff0000“>Text</Font>

    Ist es eigentlich möglich dieses Zeichen: "& nbsp;" beim drücken von Enter zu verhindern?

    Hier der von mir Umgebastelte Script:

    Code :
    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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

    <html>
<head>
<title>Test</title>
 
<script type="text/javascript">
<!--
 
    /**
     * Die Tags
     * Arrayschluessel ist der Name des Tags
     * Wert die Anzeige im Button
     */
 
 
    arrTags=new Array();
    
        
arrTags['bold'] = new Array('<b>', '</b>');
        arrTags['underline'] = new Array('<u>', '</u>');
        arrTags['italic'] = new Array('<i>', '</i>');
  
    arrTags['justifyleft'] = new Array('<div align=\"left\">', '</div>');
    arrTags['justifycenter'] = new Array('<div align=\"center\">', '</div>');
    arrTags['justifyright'] = new Array('<div align=\"right\">', '</div>');
    arrTags['insertunorderedlist'] = new Array('<li>', '</li>');
  
 
 
    arrTags['rot'] = new Array("<FONT COLOR=\"#FF0000\">", "</FONT>");
    arrTags['quote'] = new Array('<i>"', '"</i>');
        arrTags['bodynormal'] = new Array('<p class=\"bodynormal\">', '</p>');
 
 
    /**
     * Initalisiert den DesignMode und die Überwachung
     * der Aenderungen im iFRame
     */
     //////
     
     function button_over(eButton)
    {
    eButton.style.backgroundColor = "#B5BDD6";
    eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
    }
function button_out(eButton)
    {
    eButton.style.backgroundColor = "threedface";
    eButton.style.borderColor = "threedface";
    }
function button_down(eButton)
    {
    eButton.style.backgroundColor = "#8494B5";
    eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
    }
function button_up(eButton)
    {
    eButton.style.backgroundColor = "#B5BDD6";
    eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
    eButton = null; 
    }
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
var isHTMLMode=false
 
function setMode(bMode)
    {
    
        
    var sTmp;
    isHTMLMode = bMode;
    if (isHTMLMode){
    sTmp=idContent.document.body.innerHTML;
    idContent.document.body.innerText=sTmp;
    } 
    else {
    sTmp=idContent.document.body.innerText;
    idContent.document.body.innerHTML=sTmp;
    }
    idContent.focus();
    }
///////////
function init(){
idContent.document.open();
idContent.document.write(Content.value);
idContent.document.close();
idContent.document.designMode="On";
}
 
 
 
   function myCommand(cmd)
    {
        window.idContent.focus();
        objEditor=window.idContent.document;
 
        //TextRange-Objekt für iFrame erstellen
        rng=objEditor.selection.createRange();
 
        //Wenn Text ausgewählt wurde...
        if(rng.htmlText!='')
            {
            //Auswahl in Tags "einbetten"
            
            if (!isHTMLMode){
            
             strHTML=arrTags[cmd][0]+ rng.htmlText+ arrTags[cmd][1];
            //strHtml in die Auswahl des iFrames kopieren
            rng.pasteHTML(strHTML);
    
          
            }else{
            alert("Bitte 'Edit HTML' deaktivieren");
            return;
            }
            }
    }
 
 
 
 
//-->
</script>
</head>
<body onload="init()">
 
<center>
<table width="287" cellpadding="0" cellspacing="0" id="tblCoolbar">
<tr valign="middle">
    
    <td width="29"><div class="cbtn" onClick="myCommand('bold')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
    <img src="images/wysiwyg/Bold.gif" alt="Bold" width="23" height="22" hspace="1" vspace=1 align=absmiddle>
    </div></td>
 
    <td width="29"><div class="cbtn" onClick="myCommand('italic')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
    <img hspace="1" vspace=1 align=absmiddle src="images/wysiwyg/Italic.gif" alt="Italic">
    </div></td>
    
        <td width="29"><div class="cbtn" onClick="myCommand('quote')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
    <img src="images/wysiwyg/quote.gif" alt="Quote" width="23" height="22" hspace="1" vspace=1 align=absmiddle>
    </div></td> 
    
    <td width="29"><div class="cbtn" onClick="myCommand('underline')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
    <img src="images/wysiwyg/Under.gif" alt="Underline" width="23" height="22" hspace="1" vspace=1 align=absmiddle>
    </div></td>     
 
    <td width="29"><div class="cbtn" onClick="myCommand('justifyleft')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
    <img src="images/wysiwyg/Left.gif" alt="Justify Left" width="23" height="22" hspace="1" vspace=1 align=absmiddle>
    </div></td>
    
    <td width="29"><div class="cbtn" onClick="myCommand('justifycenter')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
    <img src="images/wysiwyg/Center.gif" alt="Center" width="23" height="22" hspace="1" vspace=1 align=absmiddle>
    </div></td> 
    
    
    <td width="29"><div class="cbtn" onClick="myCommand('justifyright')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
    <img src="images/wysiwyg/Right.gif" alt="Justify Right" width="23" height="22" hspace="1" vspace=1 align=absmiddle>
    </div></td>     
 
    <td width="31"><div class="cbtn" onClick="myCommand('insertunorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
    <img src="images/wysiwyg/bullist.GIF" alt="Unordered List" width="23" height="22" hspace="2" vspace=1 align=absmiddle>
    </div></td>
    <td width="31"><div class="cbtn" onClick="foreColor()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
    <img src="images/wysiwyg/fgcolor.gif" alt="Forecolor" width="23" height="22" hspace="2" vspace=1 align=absmiddle>
    </div></td>     
    </tr>
</table>
<input type="button"onclick="myCommand('rot')"value="RED">
<input type="button"onclick="myCommand('zitat')"value="&quot;ITALIC TEXT&quot;">
<input type="button"onclick="myCommand('bodynormal')"value="Bodynormal">
 
  </p>
  <iframe width="600" id="idContent" height="200"></iframe>
 
  <div align="center">
    <p>
      <textarea name="Content" style="display: none;" rows="7" cols="55">Test Text</textarea>
     
 
      <input type="checkbox" onclick="setMode(this.checked)">
        Edit HTML</p>
  </div>
</center>
</body>
</html>

    Wer weiß weiter?
     
    Zitieren Zitieren
« mehrdimensionale arrays unter NS 7 & Mozilla | PHP-Session-ID übergeben? »

Ähnliche Themen

  1. online WYSIWYG Editor
    Von NiciB im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 20.04.07, 23:33
  2. WYSIWYG Online Editor
    Von notebook20000 im Forum PHP
    Antworten: 4
    Letzter Beitrag: 07.12.05, 13:12
  3. div Content editable eigene Tags einbauen
    Von Leukos im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 22.04.04, 14:57
  4. Microsoft Word, wysiwyg und das Geheimnis der unsichtbaren Magie/HTML Tags
    Von Tim C. im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 06.02.04, 17:09
  5. Forum auf eigene HP einbauen
    Von Modano im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 24.01.04, 15:55