Ah ok, ik snap nu een gedeelte iets beter. Vanaf het moment dat ik op de "B-button" druk om de tekst vet te maken, wordt de positie van de cursor daar op geplakt..
Dan wordt het dus toch continu bij een event op de textarea de positie bijhouden ben ik bang?
en btw, ja RobIII de eerste 10sec was de url nog niet juist
edit:
Hij werkt nu, op een klein dingetje na in IE.
Als je in de textarea de tekst selecteerd, maar je laat de muis buiten de textarea los, gaat het fout. Iemand daar een slimme oplossing voor?
opgelost door een global var te gebruiken om lasteditorid te bewaren welke wordt geset bij ieder event, behalve een onmouseout etc.. als de id van de event niet gelijk is aan een bestaande editor.. dan valt ie dus terug op het vorige opgeslagen Id. Nog even om een idee te geven voor mensen via src
js
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| this.mSaveCursor = function(e) // eigen object
{
if (document.selection)
{
oEvObj = fXGetEventEl(fXGetEventObj(e));
oEdObj = document.aEditors[oEvObj.id];
// Onmouseout / onmouseup gedoe, waarbij niet goede element in event staat
if (!oEdObj && gLASTID)
oEdObj = document.aEditors[gLASTID];
else
{
gLASTID = oEvObj.id;
if (oEvObj.createTextRange)
oEdObj.selection = document.selection.createRange();
}
}
} |
Voor de search nog even de complete code aangezien het topic nu toch al weggezakt is:
PHP:
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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
| [.. doctype e.d.]
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div#elEditor
{
clear : both;
}
div#elControls div
{ float : left;
margin-left : 10px;
margin-right: 10px;
}
</style>
<script type="text/javascript">
/* scripting: Robert de Wilde (wilde825@planet.nl) */
// Voor 'bugje' in de selectie bij IE wanneer cursor buiten element eindigd
var gLASTID;
// CANCELBUBBLE
fXCancelBubble = function(e)
{
if (!e)
{
var e = window.event; // I.E.
e.cancelBubble = true; //
}
if (e.stopPropagation) e.stopPropagation(); // mOzIlLa
}
// ATTACHEVENT
fXAttachEvent = function(oObj, eEve, pPnt)
{
if (oObj.addEventListener) oObj.addEventListener(eEve, pPnt, false); // DOM Level 2
else if (oObj.attachEvent) oObj.attachEvent('on' + eEve, pPnt); // IE 5+
else oObj.onclick = pPnt; // Bah.. Overige
}
fXGetEventObj = function(e)
{ if (!e) return window.event;
return e;
}
fXGetEventEl = function(e)
{
return (e.srcElement || e.target);
}
// HET EDITOR-OBJECT
oEditor = function(iId, iRows, iCols)
{
this.id = iId;
this.rows = iRows;
this.cols = iCols;
this.cursor = 0;
this.cInit = function()
{
//First init?
try
{
document.aEditors[this.id] = this;;
}
catch (e)
{
document.aEditors = new Array();
document.aEditors[this.id] = this;
}
this.container = document.createElement('div');
this.workspace = document.createElement('textarea');
this.workspace.ref = this;
with (this.workspace)
{
setAttribute('cols', this.cols);
setAttribute('rows', this.rows);
setAttribute('name', this.id);
setAttribute('id', this.id);
setAttribute('wrap', 'virtual');
}
fXAttachEvent(this.workspace, 'click', this.mSaveCursor);
fXAttachEvent(this.workspace, 'keyup', this.mSaveCursor);
fXAttachEvent(this.workspace, 'mouseup', this.mSaveCursor);
//fXAttachEvent(this.workspace, 'mouseout', this.mSaveCursor);
this.popup = document.createElement('div');
with (this.popup)
{
with (style)
{ display = 'none';
position = 'absolute';
left = 0;
top = 0;
width = '250px';
marginTop = '50px';
border = 'black 1px solid';
backgroundColor = 'white';
filter = 'alpha(opacity=85)';
MozOpacity = 0.85;
}
}
this.container.appendChild(this.workspace);
this.container.appendChild(this.popup);
return this.container;
}
this.fSelectionReplace = function(sTag, sClosing, bOverwrite)
{ if (!sClosing) sClosing = '';
// Firefox o.a. (Safari, Mozilla, Gecko vast ook)
if (this.workspace.setSelectionRange)
{
// De selectie-uiterste opzoeken
var iSelectionStart = this.workspace.selectionStart;
var iSelectionEnd = this.workspace.selectionEnd;
// Er is een selectie en geen close tag (dus tag die ergens omheen moet worden geplaatst
if ((iSelectionStart != iSelectionEnd) && (bOverwrite == undefined))
{
// Als er geen explicite boolean mee is gegeven aan de functie vragen wat er moet gebeuren
bOverwrite = confirm('Er is tekst geselecteerd, moet deze overschreven worden?');
}
// Overschrijven als daar voor gekozen is of als er gewoon een insert plaats moet vinden
if ((iSelectionStart == iSelectionEnd) || (bOverwrite))
this.workspace.value = this.workspace.value.substring(0, iSelectionStart) + sTag + sClosing + this.workspace.value.substring(iSelectionEnd, this.workspace.value.length);
// Anders eromheen plaatsen of in geval van enkele tag, vóór de selectie
else
this.workspace.value = this.workspace.value.substring(0, iSelectionStart) + sTag + this.workspace.value.substring(iSelectionStart, iSelectionEnd) + sClosing + this.workspace.value.substring(iSelectionEnd, this.workspace.value.length);
}
// IE
else if (this.selection)
{
if ((this.selection.text.length > 0) && (bOverwrite == undefined))
{
// Als er geen explicite boolean mee is gegeven aan de functie vragen wat er moet gebeuren
bOverwrite = confirm('Er is tekst geselecteerd, moet deze overschreven worden?');
}
if ((this.selection.text.length == 0) || (bOverwrite))
this.selection.text = sTag + sClosing;
else
this.selection.text = sTag + this.selection.text + sClosing;
}
this.mToEditMode();
}
// Voor IE de cursorpositie bijhouden
this.mSaveCursor = function(e)
{
if (document.selection)
{
oEvObj = fXGetEventEl(fXGetEventObj(e));
oEdObj = document.aEditors[oEvObj.id];
// IE Gezeik
if (oEdObj)
{
gLASTID = oEdObj.id;
if (oEvObj.createTextRange)
oEdObj.selection = document.selection.createRange().duplicate();
}
}
}
this.mPopup = function(sAct)
{
switch (sAct)
{
case 'img': // ?????
this.popup.innerHTML = 'adres van het plaatje:<br /><input type="text" style="clear:right;" /><input type="button" onclick="document.aEditors[\'' + this.id + '\'].fSelectionReplace(\'[img]\' + this.previousSibling.value + \'[/img]\');" value="image invoegen" />';
break;
case 'url': // ??????
this.popup.innerHTML = 'url van hyperlink:<br /><input type="text" style="clear:right;" /><input type="button" onclick="document.aEditors[\'' + this.id + '\'].fSelectionReplace(\'[url=\' + this.previousSibling.value + \']\', \'[/url]\', false);" value="hyperlink invoegen" />';
break;
default:
break;
}
this.popup.style.display = 'block';
}
this.mToEditMode = function()
{
this.popup.style.display = 'none';
this.workspace.focus();
}
this.mShowDebug = function(sMsg)
{
alert(sMsg);
}
return this.cInit();
}
</script>
</head>
<body onload="document.getElementById('elEditor').appendChild(new oEditor('editor', 15, 30));"
onmouseup="//alert(fGetSelect(document.aEditors['editor'].workspace));">
<div id="elControls">
<div onclick="document.aEditors['editor'].fSelectionReplace('[b]','[/b]', false);"><b>B</b></div>
<div onclick="document.aEditors['editor'].fSelectionReplace('[i]','[/i]', false);"><i>I</i></div>
<div onclick="document.aEditors['editor'].fSelectionReplace('[u]','[/u]', false);"><u>U</u></div>
<s><div onclick="document.aEditors['editor'].mPopup('img');"><span style="color: purple;">img</span></div>
<div onclick="document.aEditors['editor'].mPopup('url');"><span style="color: blue;">url</span></div></s>
</div>
<div id="elEditor"></div>
[img]"./img/emo/emoCon.gif"[/img]
[img]"./img/emo/emoCoo.gif"[/img]
[img]"./img/emo/emoHap.gif"[/img]
[img]"./img/emo/emoMad.gif"[/img]
[img]"./img/emo/emoOmg.gif"[/img]
[img]"./img/emo/emoSar.gif"[/img]
[img]"./img/emo/emoSha.gif"[/img]
[img]"./img/emo/emoSmi.gif"[/img]
[img]"./img/emo/emoTou.gif"[/img]
</body>
</html> |
// zitten nog wat kleine bugjes in.. bijvoorbeeld bij volledige selectie enz. wel op te lossen lijkt me
[
Voor 192% gewijzigd door
r0bert op 26-05-2005 20:10
]