kleur in WYSIWYG editor is moeilijk
er zijn een aantal punten die niet goed zijn.
Mischien weet iemand een oplossing voor 1 of meerdere punten
1. Als je typt in het textvak (iframe) en je drukt op de toets enter, dan gaat de cursor wel naar de volgende regel maar veel te ver naar onder. dat komt omdat de editor niet <br> gebruikt voor de volgende regel maar <p> en </p>
Als je doortypt tot aan het einde van de regel en de tekst springt automatisch op de volgende regel, dan werkt het wel en is de afstand niet te groot.
2. Ik wil graag dat als je een kleur invoegt dat het niet met een scriptvenster hoeft. Browsers geven namelijk steeds een waarschuwing. Het is mooier om een lijstje weer te geven met kleuren om op te klikken
3. Als je nu tekst bijvoorbeeld vet wil maken, dan moet je eerst de tekst selecteren. Bij bijna alle andere WYSIWYG editors hoeft dit niet, je klikt 1 keer op de knop en je kunt doortypen.
Dit is wel een heel lang forum bericht, ik hoop dat iemand een oplossing heeft
Hier is het script:
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
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
<?
session_start();
if(isset($_POST['areaCode']) && $_POST['areaCode'] != ""){
$_SESSION['script'] = $_POST['areaCode'];
}
?>
<html>
<head>
<style>
.balk {
width: 600px;
border: 1px solid lightgrey;
border-bottom: 3px solid lightgrey;
padding: 1px;
margin-bottom: 1px;
}
IFRAME {
border: 1px solid lightgrey;
}
TD {
width: 10px;
height: 10px;
background-color: lightgrey;
}
.button {
border: 1px solid lightgrey;
margin: 1px;
}
INPUT,BUTTON {
border: 1px solid lightgrey;
margin: 1px;
}
#bold {
font-weight: bold;
border: 1px solid lightgrey;
}
#schuin {
text-decoration: italic;
border: 1px solid lightgrey;
}
#onderstreept {
text-decoration: underline;
border: 1px solid lightgrey;
}
#kleuren {
position: relative;
left: 310px;
top: -300px;
border: 1px solid lightgrey;
width: 100px;
background-color: #909090;
}
</style>
<script>
function maak_frame(){
// IE en FF werken anders: dus kijkt hij hoe hij het moet toepassen
if(window.navigator.appName == "Microsoft Internet Explorer")
iframe.document.designMode = "on";
if(window.navigator.appName == "Netscape")
document.getElementById('iframe').contentDocument.designMode = "on";
}
function vet() {
document.getElementById("iframe").contentWindow.document.execCommand("bold", false, null);
}
function schuin() {
document.getElementById("iframe").contentWindow.document.execCommand("italic", false, null);
}
function onderstreept() {
document.getElementById("iframe").contentWindow.document.execCommand("underline", false, null);
}
function doorgestreept() {
document.getElementById("iframe").contentWindow.document.execCommand("strike", false, null);
}
function center() {
document.getElementById("iframe").contentWindow.document.execCommand("justifycenter", false, null);
}
function opsomming() {
document.getElementById("iframe").contentWindow.document.execCommand("insertunorderedlist", false, null);
}
function lijn() {
iView.document.execCommand ('inserthorizontalrule', false, null);
}
function lettertype(LetterType) {
if(LetterType != "")
document.getElementById("iframe").contentWindow.document.execCommand("FontName", false, LetterType);
}
function lettergrootte(LetterGrootte) {
if(LetterGrootte != "")
document.getElementById("iframe").contentWindow.document.execCommand("FontSize", false, LetterGrootte);
}
function kleur() {
var kleur = prompt("Voer hieronder de kleur in het Engels of in HEX in:", "");
if(kleur != null)
document.getElementById("iframe").contentWindow.document.execCommand("ForeColor", false, kleur);
}
function kleurtabel() {
document.getElementById("kleuren").style.visibility="visible";
}
function opslaan() {
var htmlCode = document.getElementById('iframe').contentWindow.document.body.innerHTML;
document.getElementById("areaCode").value = htmlCode;
document.getElementById("formCode").submit();
}
</script>
</head>
<body onload="maak_frame()">
<div class="balk">
<input type="button" onClick="vet()" id="bold" value="B">
<input type="button" onClick="schuin()" id="schuin" value="/">
<input type="button" onClick="onderstreept()" id="onderstreept" value="U">
<input type="button" onClick="center()" id="center" value="Center">
<input type="button" onClick="opsomming()" id="opsomming" value="Opsomming">
<input type="button" onClick="lijn()" id="lijn" value="Lijn">
<select name="grootte" onChange="lettergrootte(this.options[this.selectedIndex].value)">
<option value="">Grootte</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select name="letter" onChange="lettertype(this.options[this.selectedIndex].value)">
<option value="">Lettertype</option>
<option value="Arial">Arial</option>
<option value="Tahoma">Tahoma</option>
<option value="Courier">Courier</option>
<option value="Verdana">Verdana</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Impact">Impact</option>
<option value="Comic sans ms">Comic sans MS</option>
<option value="Helvetica">Helvetica</option>
<option value="Lucida console">lucida console</option>
<option value="Webdings">Webdings</option>
<option value="Georgia">Georgia</option>
</select>
<input type="button" onClick="kleur()" class="button" value="Kleur">
<input type="button" onClick="opslaan()" class="button" value="Opslaan">
</div>
<iframe id="iframe" height="300" width="600" frameborder="no"></iframe>
<form action="" method="post" id="formCode" style="display: none;">
<textarea name="areaCode" id="areaCode"></textarea>
</form>
</body>
</html>
session_start();
if(isset($_POST['areaCode']) && $_POST['areaCode'] != ""){
$_SESSION['script'] = $_POST['areaCode'];
}
?>
<html>
<head>
<style>
.balk {
width: 600px;
border: 1px solid lightgrey;
border-bottom: 3px solid lightgrey;
padding: 1px;
margin-bottom: 1px;
}
IFRAME {
border: 1px solid lightgrey;
}
TD {
width: 10px;
height: 10px;
background-color: lightgrey;
}
.button {
border: 1px solid lightgrey;
margin: 1px;
}
INPUT,BUTTON {
border: 1px solid lightgrey;
margin: 1px;
}
#bold {
font-weight: bold;
border: 1px solid lightgrey;
}
#schuin {
text-decoration: italic;
border: 1px solid lightgrey;
}
#onderstreept {
text-decoration: underline;
border: 1px solid lightgrey;
}
#kleuren {
position: relative;
left: 310px;
top: -300px;
border: 1px solid lightgrey;
width: 100px;
background-color: #909090;
}
</style>
<script>
function maak_frame(){
// IE en FF werken anders: dus kijkt hij hoe hij het moet toepassen
if(window.navigator.appName == "Microsoft Internet Explorer")
iframe.document.designMode = "on";
if(window.navigator.appName == "Netscape")
document.getElementById('iframe').contentDocument.designMode = "on";
}
function vet() {
document.getElementById("iframe").contentWindow.document.execCommand("bold", false, null);
}
function schuin() {
document.getElementById("iframe").contentWindow.document.execCommand("italic", false, null);
}
function onderstreept() {
document.getElementById("iframe").contentWindow.document.execCommand("underline", false, null);
}
function doorgestreept() {
document.getElementById("iframe").contentWindow.document.execCommand("strike", false, null);
}
function center() {
document.getElementById("iframe").contentWindow.document.execCommand("justifycenter", false, null);
}
function opsomming() {
document.getElementById("iframe").contentWindow.document.execCommand("insertunorderedlist", false, null);
}
function lijn() {
iView.document.execCommand ('inserthorizontalrule', false, null);
}
function lettertype(LetterType) {
if(LetterType != "")
document.getElementById("iframe").contentWindow.document.execCommand("FontName", false, LetterType);
}
function lettergrootte(LetterGrootte) {
if(LetterGrootte != "")
document.getElementById("iframe").contentWindow.document.execCommand("FontSize", false, LetterGrootte);
}
function kleur() {
var kleur = prompt("Voer hieronder de kleur in het Engels of in HEX in:", "");
if(kleur != null)
document.getElementById("iframe").contentWindow.document.execCommand("ForeColor", false, kleur);
}
function kleurtabel() {
document.getElementById("kleuren").style.visibility="visible";
}
function opslaan() {
var htmlCode = document.getElementById('iframe').contentWindow.document.body.innerHTML;
document.getElementById("areaCode").value = htmlCode;
document.getElementById("formCode").submit();
}
</script>
</head>
<body onload="maak_frame()">
<div class="balk">
<input type="button" onClick="vet()" id="bold" value="B">
<input type="button" onClick="schuin()" id="schuin" value="/">
<input type="button" onClick="onderstreept()" id="onderstreept" value="U">
<input type="button" onClick="center()" id="center" value="Center">
<input type="button" onClick="opsomming()" id="opsomming" value="Opsomming">
<input type="button" onClick="lijn()" id="lijn" value="Lijn">
<select name="grootte" onChange="lettergrootte(this.options[this.selectedIndex].value)">
<option value="">Grootte</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select name="letter" onChange="lettertype(this.options[this.selectedIndex].value)">
<option value="">Lettertype</option>
<option value="Arial">Arial</option>
<option value="Tahoma">Tahoma</option>
<option value="Courier">Courier</option>
<option value="Verdana">Verdana</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Impact">Impact</option>
<option value="Comic sans ms">Comic sans MS</option>
<option value="Helvetica">Helvetica</option>
<option value="Lucida console">lucida console</option>
<option value="Webdings">Webdings</option>
<option value="Georgia">Georgia</option>
</select>
<input type="button" onClick="kleur()" class="button" value="Kleur">
<input type="button" onClick="opslaan()" class="button" value="Opslaan">
</div>
<iframe id="iframe" height="300" width="600" frameborder="no"></iframe>
<form action="" method="post" id="formCode" style="display: none;">
<textarea name="areaCode" id="areaCode"></textarea>
</form>
</body>
</html>
Er zijn nog geen reacties op dit bericht.