De PHPhulp kroeg
editor
Wat bedoel je pepijn. Heb je een voorbeeld wat ik kan zien?
@Pepijn, ook hier, wil je niet zo onnodig veel quoten. En zou je misschien volledige zinnen, met hoofdletters en punten, willen gebruiken? Zou je eens duidelijk spreken en niet zo half als je nu doet?
Als je met execCommand bold gebruikt krijg je in FF dit:
Code (php)
1
<span style="font-weight: bold">Strong text</span>
En in IE krijg je:
Code (php)
1
<strong>Strong text</strong>
Code (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
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
function setCursor(editor, myColumn, myRow) // Niet zelf gemaakt, wel een beetje bewerkt
{
// calculate row length - each "row" is ended by a \n in the .value of
// the textarea.
// First, lets split the value by \n
var rows = $("."+editor).val().split("\n");
// if we want any row larger than 1, we need to calculate offets
if (myRow > 1){
for (var run = 0; run < (myRow-1); run++){
// + 1 because of the newline character!
myColumn = parseInt(myColumn,10) + rows[run].length + 1;
}
}
$("."+editor).selectionStart = myColumn;
$("."+editor).selectionEnd = myColumn;
$("."+editor).focus();
}
function setCaretPosition(ctrl, pos) // Ook niet zelf gemaakt
{
if(ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange)
{
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
$("textarea").addClass("editor"); // Dit verder wel
$("textarea .editor").before('<div class="editorbar"><img src="images/text_bold.png" alt="Dik" title="Dik" /><img src="images/text_italic.png" alt="Scheef" title="Scheef" /><img src="images/text_underline.png" alt="Onderlijnd" title="Onderlijnd" /> | <img src="images/text_heading_3.png" alt="Titel" title="Titel" /> | <img src="images/text_align_center.png" alt="Centreren" title="Centreren" /><img src="images/text_align_right.png" alt="Rechts Uitlijnen" title="Rechts Uitlijnen" /> | <img src="images/text_list_bullets.png" alt="Lijst Bolletjes" title="Lijst Bolletjes" /><img src="images/text_list_numbers.png" alt="Lijst Nummers" title="Lijst Nummers" /> | <img src="images/picture_add.png" alt="Afbeelding" title="Afbeelding" /> <img src="images/world_link.png" alt="Link" title="Link" /> <p class="infobutton"><img src="images/information.png" alt="" /></p></div>');
$(".editorbar img").click(function() {
button = $(this).attr("alt");
ubb = [];
switch(button)
{
case("Dik"):
ubb[0] = '[b]';
ubb[1] = '[/b]';
break;
case("Scheef"):
ubb[0] = '[i]';
ubb[1] = '[/i]';
break;
case("Onderlijnd"):
ubb[0] = '[u]';
ubb[1] = '[/u]';
break;
case("Titel"):
ubb[0] = '[h]';
ubb[1] = '[/h]';
break;
case("Centreren"):
ubb[0] = '[center]';
ubb[1] = '[/center]';
break;
case("Rechts Uitlijnen"):
ubb[0] = '[right]';
ubb[1] = '[/right]';
break;
case("Lijst Bolletjes"):
ubb[0] = '\n[list]\n[*]\n';
ubb[1] = '[/list]';
break;
case("Lijst Nummers"):
ubb[0] = '\n[list=num]\n[*]\n';
ubb[1] = '[/list]';
break;
case("Afbeelding"):
ubb[0] = '[img]http://';
ubb[1] = '[/img]';
break;
case("Link"):
ubb[0] = '[url=http://]';
ubb[1] = '[/url]';
break;
default:
ubb[0] = '';
ubb[1] = '';
break;
}
var range = $(".editor").getSelection();
var start = range.start + ubb[0].length;
var end = range.end + ubb[0].length;
$(".editor").replaceSelection(ubb[0] + range.text + ubb[1]);
$(".editor").setSelection(start, end);
});
$("textarea .editor").keydown(function() {
ubb = [];
if(event.altKey && event.keyCode==66)
{
ubb[0] = '[b]';
ubb[1] = '[/b]';
}
if(event.ctrlKey && event.keyCode==66)
{
ubb[0] = '[b]';
ubb[1] = '[/b]';
}
else if(event.altKey && event.keyCode==73)
{
ubb[0] = '[i]';
ubb[1] = '[/i]';
}
else if(event.ctrlKey && event.keyCode==73)
{
ubb[0] = '[i]';
ubb[1] = '[/i]';
}
else if(event.altKey && event.keyCode==85)
{
ubb[0] = '[u]';
ubb[1] = '[/u]';
}
if(ubb[0])
{
var range = $(".editor").getSelection();
var start = range.start + ubb[0].length;
var end = range.end + ubb[0].length;
$(".editor").replaceSelection(ubb[0] + range.text + ubb[1]);
$(".editor").setSelection(start, end);
}
});
$(".infobutton").hover(
function() {
$(".editorbar").after('<div class="editorinfo"></div>');
$(".editorinfo").html("");
$(".editorinfo").append("<h3>Tekst Opmaak</h3><br /><br />");
$(".editorinfo").append("[b]<b>Dik</b>[/b] <br /><br />");
$(".editorinfo").append("[i]<i>Schuin</i>[/i] <br /><br />");
$(".editorinfo").append("[u]<u>Onderlijnd</u>[/u] <br /><br />");
$(".editorinfo").append("[color=red]<p style=\"color:red\">Rode kleur</p>[/color] <br /><br />");
$(".editorinfo").append("[h]<h3>Titel</h3>[/h] <br /><br />");
$(".editorinfo").append("<center>[center]Gecentreerd[/center]</center><br /><br />");
$(".editorinfo").append('<div align="right">[right]Rechts[/right]</div><br /><br />');
$(".editorinfo").append('<h3>Emoticons</h3><br /><br />');
$(".editorinfo").append('<img src="images/emoticon_smile.png" alt="" /> :-) <br />');
$(".editorinfo").append('<img src="images/emoticon_unhappy.png" alt="" /> :-( <br />');
$(".editorinfo").append('<img src="images/emoticon_grin.png" alt="" /> :-D <br />');
$(".editorinfo").append('<img src="images/emoticon_happy.png" alt="" /> :happy: <br />');
$(".editorinfo").append('<img src="images/emoticon_evilgrin.png" alt="" /> :evil: <br />');
$(".editorinfo").append('<img src="images/emoticon_surprised.png" alt="" /> :-O <br />');
$(".editorinfo").append('<img src="images/emoticon_tongue.png" alt="" /> :-P <br />');
$(".editorinfo").append('<img src="images/emoticon_waii.png" alt="" /> :3 <br />');
$(".editorinfo").append('<img src="images/emoticon_wink.png" alt="" /> ;-) <br /><br /><br />');
$(".editorinfo").append('<h3>Overig</h3><br /><br />');
$(".editorinfo").append('[url=google.nl]<a href="http://google.nl">Een link</a>[/url]<br />');
$(".editorinfo").append('[img]http://<img src="images/emoticon_surprised.png" alt="" />[/img]');
$(".editorinfo").fadeIn("slow");
},
function() {
var timeoutId = setTimeout(function(){
$(".editorinfo").fadeOut("slow");
}, 200);
$(".editorinfo").data('timeoutId', timeoutId);
$(".editorinfo").mouseenter(function(){
clearTimeout($(this).data('timeoutId'));
}).mouseleave(function(){
$(".editorinfo").fadeOut("slow");
});
}
);
{
// calculate row length - each "row" is ended by a \n in the .value of
// the textarea.
// First, lets split the value by \n
var rows = $("."+editor).val().split("\n");
// if we want any row larger than 1, we need to calculate offets
if (myRow > 1){
for (var run = 0; run < (myRow-1); run++){
// + 1 because of the newline character!
myColumn = parseInt(myColumn,10) + rows[run].length + 1;
}
}
$("."+editor).selectionStart = myColumn;
$("."+editor).selectionEnd = myColumn;
$("."+editor).focus();
}
function setCaretPosition(ctrl, pos) // Ook niet zelf gemaakt
{
if(ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange)
{
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
$("textarea").addClass("editor"); // Dit verder wel
$("textarea .editor").before('<div class="editorbar"><img src="images/text_bold.png" alt="Dik" title="Dik" /><img src="images/text_italic.png" alt="Scheef" title="Scheef" /><img src="images/text_underline.png" alt="Onderlijnd" title="Onderlijnd" /> | <img src="images/text_heading_3.png" alt="Titel" title="Titel" /> | <img src="images/text_align_center.png" alt="Centreren" title="Centreren" /><img src="images/text_align_right.png" alt="Rechts Uitlijnen" title="Rechts Uitlijnen" /> | <img src="images/text_list_bullets.png" alt="Lijst Bolletjes" title="Lijst Bolletjes" /><img src="images/text_list_numbers.png" alt="Lijst Nummers" title="Lijst Nummers" /> | <img src="images/picture_add.png" alt="Afbeelding" title="Afbeelding" /> <img src="images/world_link.png" alt="Link" title="Link" /> <p class="infobutton"><img src="images/information.png" alt="" /></p></div>');
$(".editorbar img").click(function() {
button = $(this).attr("alt");
ubb = [];
switch(button)
{
case("Dik"):
ubb[0] = '[b]';
ubb[1] = '[/b]';
break;
case("Scheef"):
ubb[0] = '[i]';
ubb[1] = '[/i]';
break;
case("Onderlijnd"):
ubb[0] = '[u]';
ubb[1] = '[/u]';
break;
case("Titel"):
ubb[0] = '[h]';
ubb[1] = '[/h]';
break;
case("Centreren"):
ubb[0] = '[center]';
ubb[1] = '[/center]';
break;
case("Rechts Uitlijnen"):
ubb[0] = '[right]';
ubb[1] = '[/right]';
break;
case("Lijst Bolletjes"):
ubb[0] = '\n[list]\n[*]\n';
ubb[1] = '[/list]';
break;
case("Lijst Nummers"):
ubb[0] = '\n[list=num]\n[*]\n';
ubb[1] = '[/list]';
break;
case("Afbeelding"):
ubb[0] = '[img]http://';
ubb[1] = '[/img]';
break;
case("Link"):
ubb[0] = '[url=http://]';
ubb[1] = '[/url]';
break;
default:
ubb[0] = '';
ubb[1] = '';
break;
}
var range = $(".editor").getSelection();
var start = range.start + ubb[0].length;
var end = range.end + ubb[0].length;
$(".editor").replaceSelection(ubb[0] + range.text + ubb[1]);
$(".editor").setSelection(start, end);
});
$("textarea .editor").keydown(function() {
ubb = [];
if(event.altKey && event.keyCode==66)
{
ubb[0] = '[b]';
ubb[1] = '[/b]';
}
if(event.ctrlKey && event.keyCode==66)
{
ubb[0] = '[b]';
ubb[1] = '[/b]';
}
else if(event.altKey && event.keyCode==73)
{
ubb[0] = '[i]';
ubb[1] = '[/i]';
}
else if(event.ctrlKey && event.keyCode==73)
{
ubb[0] = '[i]';
ubb[1] = '[/i]';
}
else if(event.altKey && event.keyCode==85)
{
ubb[0] = '[u]';
ubb[1] = '[/u]';
}
if(ubb[0])
{
var range = $(".editor").getSelection();
var start = range.start + ubb[0].length;
var end = range.end + ubb[0].length;
$(".editor").replaceSelection(ubb[0] + range.text + ubb[1]);
$(".editor").setSelection(start, end);
}
});
$(".infobutton").hover(
function() {
$(".editorbar").after('<div class="editorinfo"></div>');
$(".editorinfo").html("");
$(".editorinfo").append("<h3>Tekst Opmaak</h3><br /><br />");
$(".editorinfo").append("[b]<b>Dik</b>[/b] <br /><br />");
$(".editorinfo").append("[i]<i>Schuin</i>[/i] <br /><br />");
$(".editorinfo").append("[u]<u>Onderlijnd</u>[/u] <br /><br />");
$(".editorinfo").append("[color=red]<p style=\"color:red\">Rode kleur</p>[/color] <br /><br />");
$(".editorinfo").append("[h]<h3>Titel</h3>[/h] <br /><br />");
$(".editorinfo").append("<center>[center]Gecentreerd[/center]</center><br /><br />");
$(".editorinfo").append('<div align="right">[right]Rechts[/right]</div><br /><br />');
$(".editorinfo").append('<h3>Emoticons</h3><br /><br />');
$(".editorinfo").append('<img src="images/emoticon_smile.png" alt="" /> :-) <br />');
$(".editorinfo").append('<img src="images/emoticon_unhappy.png" alt="" /> :-( <br />');
$(".editorinfo").append('<img src="images/emoticon_grin.png" alt="" /> :-D <br />');
$(".editorinfo").append('<img src="images/emoticon_happy.png" alt="" /> :happy: <br />');
$(".editorinfo").append('<img src="images/emoticon_evilgrin.png" alt="" /> :evil: <br />');
$(".editorinfo").append('<img src="images/emoticon_surprised.png" alt="" /> :-O <br />');
$(".editorinfo").append('<img src="images/emoticon_tongue.png" alt="" /> :-P <br />');
$(".editorinfo").append('<img src="images/emoticon_waii.png" alt="" /> :3 <br />');
$(".editorinfo").append('<img src="images/emoticon_wink.png" alt="" /> ;-) <br /><br /><br />');
$(".editorinfo").append('<h3>Overig</h3><br /><br />');
$(".editorinfo").append('[url=google.nl]<a href="http://google.nl">Een link</a>[/url]<br />');
$(".editorinfo").append('[img]http://<img src="images/emoticon_surprised.png" alt="" />[/img]');
$(".editorinfo").fadeIn("slow");
},
function() {
var timeoutId = setTimeout(function(){
$(".editorinfo").fadeOut("slow");
}, 200);
$(".editorinfo").data('timeoutId', timeoutId);
$(".editorinfo").mouseenter(function(){
clearTimeout($(this).data('timeoutId'));
}).mouseleave(function(){
$(".editorinfo").fadeOut("slow");
});
}
);
Edit:
Ook nog even https://github.com/localhost/jquery-fieldselection inladen
Gewijzigd op 27/12/2011 14:46:01 door Vincent Huisman
Vincent bedankt voor de code. Hopelijk komt ie van pas!
Als je de configuratie zo aanpast dat alleen de functies die jij toestaat gebruikt kunnen worden, voorkom je de tags die jij liever niet ziet. Tevens kan je de output gemakkelijk wijzigen dmv jQuery, indien je html4/5 output wilt heb ik ik wel een scriptje.
Maar... ik vraag me af hè... is zo'n editor (een simpele versie) eigenlijk makkelijk zelf te maken? Een knopje voor bold, italic en underline, link invoegen, afbeelding toevoegen? Of is dat echt heel ingewikkeld?
Ik ben vanmiddag ook maar eens begonnen met het maken van een editor en het is opzich best makkelijk. De select functie die ik heb gebruikt is van: http://stackoverflow.com/a/2966703
Deze werkt in Chrome, in andere browsers heb ik nog niet getest.
Toevoeging op 28/12/2011 00:25:03:
Ozzie PHP op 27/12/2011 20:05:16:
Mocht je vorderingen maken en het willen delen, dan hou ik me ten zeerste aanbevolen.
Dan hierbij de editor in alphaAlpha status. Nog niet echt te gebruiken, slechts om te laten zien hoe ik het zou aanpakken.
Pagina: http://waldio.webatu.com/editor/
De docs + css worden morgen nog even verbeterd. De code werkt alleen maar bij selecteren via de muis en via klikken op een button. Nog niet echt praktisch dus, maar het is een begin.
Toevoeging op 28/12/2011 19:56:28:
Script is nu in beta fase. Het doet wat ik wil en het werkt allemaal, de documentatie is getyped en de style is geschreven.
Ik heb het alleen nog niet getest, alleen in Chrome (dev channel). Ook is de stijl van de pagina nog beroert, waardoor het niet te bekijken is op schermen die een kleinere hoogte hebben dan 500px.
Gewijzigd op 28/12/2011 19:53:11 door Wouter J
In Firefox gaat het wel goed. Nice job!!