Intern ❘ Inhaltsverzeichnis ❘ Glossar ❘ Bausteine ❘ Linkliste ❘ Tutorials ❘ Kommentare
Thema: Seite manipulieren mit 'contentEditable' ➧ Artikel anzeigen
- Peter schrieb am Sonntag, den 22 März 2020 #1
- Hab mir heute aus Langeweile auf die Schnelle einen Rich-Editor mit contenteditable programmiert.
Die meisten haben ein Problem mit dem Versand zur Weiterverarbeitung von "contenteditable" in einem Formular. Diese Beispiel schreibt den Text in eine Datei im Unterverzeichnis "db".
Auszug aus der Datei "editor.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
<?php
// Variablen setzen
$pfad = __DIR__ . '/db/datei.db';
$meldung ='';
$inhalt = isset($_POST["textareacontent"]) ? htmlspecialchars($_POST["textareacontent"]) : "";
// Formular senden
if (isset($_POST["submit"])) {
// in Textdatei speichern
if (file_put_contents($pfad, $inhalt));
$meldung .= '<p class="ok">Die Daten wurden eingetragen - <a href="'.htmlspecialchars($_SERVER['SCRIPT_NAME']).'">weiter</a>.</p>';
}
// Ausgabe
$ausgabe = file_get_contents($pfad);
if ($ausgabe == '') {
$content = '<p class="ok">Es wurde noch kein Eintrag vorgenommen.</p>';
}
else {
$content = htmlspecialchars_decode($ausgabe);
}
?>
<!DOCTYPE html>
<html lang="de-at">
<head>
<meta charset="UTF-8">
<title>Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="all" href="style.css">
</head>
<body>
<?=$meldung;?>
<div class="wm-editor clearfix">
<select class="fontsize" id="FontName" onChange="changeFont()">
<option selected="selected">Schrift</option>
<optgroup label="Sans-Seriff">
<option value="Helvetica">Helvetica</option>
<option value="Verdana">Verdana</option>
<option value="Lucida Grande">Lucida Grande</option>
<option value="Arial">Arial</option>
<option value="Calibri">Calibri</option>
<option value="Comic Sans MS">Comic Sans MS</option>
</optgroup>
<optgroup label="Seriff">
<option value="Georgia">Georgia</option>
<option value="Palatino">Palatino</option>
</optgroup>
<optgroup label="Monospace">
<option value="Courier New">Courier New</option>
</optgroup>
</select>
<select class="select" id="FontHeading" onChange="changeFontHeading()">
<option selected="selected">Überschrift</option>
<option value="h1">Überschrift h1</option>
<option value="h2">Überschrift h2</option>
<option value="h3">Überschrift h3</option>
<option value="h4">Überschrift h4</option>
<option value="h5">Überschrift h5</option>
<option value="h6">Überschrift h6</option>
</select>
<select class="select" id="FontColor" onChange="changeForeColor()">
<option selected="selected">Schriftfarbe</option>
<option value="#000000">Schwarz</option>
<option value="#0000FF">Blau</option>
<option value="#007FFF">Slate Blue</option>
<option value="#00FF00">Green</option>
<option value="#00FF7F">Spring Green</option>
<option value="#00FFFF">Cyan</option>
<option value="#236B8E">Steel Blue</option>
<option value="#238E23">Forest Green</option>
<option value="#238E68">Green</option>
<option value="#2F2F4F">Midnight Blue</option>
<option value="#2f4f2f">Dark Green</option>
<option value="#38B0DE">Summer Sky</option>
<option value="#4F2F4F">Violet</option>
<option value="#527F76">Green Copper</option>
<option value="#545454">Dim Grey</option>
<option value="#5959AB">Rich Blue</option>
<option value="#5C4033">Very Dark Brown</option>
<option value="#5F9F9F">Cadet Blue</option>
<option value="#70DB93">Aquamarine</option>
<option value="#855E42">Dark Wood</option>
<option value="#871f78">Dark Purple</option>
<option value="#8C1717">Scarlet</option>
<option value="#8E2323">Firebrick</option>
<option value="#8E236B">Maroon</option>
<option value="#8E6B23">Sienna</option>
<option value="#9932CD">Dark Orchid</option>
<option value="#99CC32">Yellow Green</option>
<option value="#9F9F5F">Khaki</option>
<option value="#ADEAEA">Turquoise</option>
<option value="#B5A642">Brass</option>
<option value="#B87333">Copper</option>
<option value="#C0C0C0">Grey</option>
<option value="#CC3299">Violet Red</option>
<option value="#CD7F32">Gold</option>
<option value="#CFB53B">Old Gold</option>
<option value="#D9D9F3">Quartz</option>
<option value="#DB70DB">Orchid</option>
<option value="#DB9370">Tan</option>
<option value="#DBDB70">Goldenrod</option>
<option value="#EBC79E">New Tan</option>
<option value="#F5CCB0">Flesh</option>
<option value="#FF0000">Red</option>
<option value="#FF00FF">Magenta </option>
<option value="#FF7F00">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#FFFFFF">White</option>
</select>
<button class="editor-button bold" data-attribute="bold" title="Fett">B</button>
<button class="editor-button italic" data-attribute="italic" title="Kursiv">K</button>
<button class="editor-button underline" data-attribute="underline" title="Unterstrichen">U</button>
<button class="editor-button strike" data-attribute="strikeThrough" title="Durchgestrichen">S</button>
<button class="editor-button normal" data-attribute="justifyLeft" title="Linksbündig">L</button>
<button class="editor-button normal" data-attribute="justifyCenter" title="Zentriert">C</button>
<button class="editor-button normal" data-attribute="justifyRight" title="Rechtsbündig">R</button>
<button class="editor-button normal" data-attribute="Indent" title="Text nach rechts">»</button>
<button class="editor-button normal" data-attribute="Outdent" title="Text nach links">«</button>
<button class="editor-button normal" data-attribute="inserthorizontalrule" title="Horizontale Linie">hr</button>
<button class="editor-button normal" data-attribute="InsertUnorderedList" title="Ungeordnete Liste">li</button>
<button class="editor-button normal" data-attribute="InsertOrderedList" title="Aufzählung Liste">ol</button>
<button class="editor-button normal" data-attribute="CreateLink" onClick="CreateLink()" title="Hyperlink">⚌</button>
<button class="editor-button normal" data-attribute="Unlink" title="Link entfernen">⚏</button>
<button class="editor-button normal" data-attribute="Undo" title="Schritt zurück">↺</button>
<button class="editor-button normal" data-attribute="Redo" title="Schritt vorwärts">↻</button>
<!-- DIV Container, form - textarea ausblenden -->
<div class="inhalt" id="canvas" contenteditable="true"></div>
<form method="post" action="editor.php" onsubmit="saveContent();">
<textarea id="hidden" name="textareacontent"></textarea>
<input type="submit" name="submit" value="Speichern">
</form>
</div>
<div class="ausgabe">
<?=$content;?>
</div>
<script src="js-editor.js"></script>
</body>
</html>
Javascript Datei "js-editor.js":
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
const editorButtons = document.getElementsByClassName('editor-button');
const editorCanvas = document.getElementById('canvas');
const setAttribute = (element) => {
document.execCommand('styleWithCSS', false, true);
document.execCommand(element.dataset.attribute, false);
};
for (let i = 0; i < editorButtons.length; i++) {
editorButtons[i].addEventListener('click', function(){
setAttribute(this);
});
}
function changeFont(){
var e = document.getElementById("FontName");
var name = e.options[e.selectedIndex].value;
document.execCommand('styleWithCSS', false, true);
document.execCommand('FontName',false,name)
}
function changeFontHeading(){
var e = document.getElementById("FontHeading");
var heading = e.options[e.selectedIndex].value;
document.execCommand('formatBlock',false,heading);
}
function CreateLink(){
var linkURL = prompt("Url-Pfad eingeben:", "http://");
document.execCommand("CreateLink", false, linkURL);
}
function changeForeColor(){
var e = document.getElementById("FontColor");
var color = e.options[e.selectedIndex].value;
document.execCommand('styleWithCSS', false, true);
document.execCommand('ForeColor',false,color);
}
function saveContent() {
document.getElementById("hidden").value = document.getElementById("canvas").innerHTML;
return true;
}
CSS Datei "style.css":
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
*{margin:0;padding:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
html,body,div,ul,ol,blockquote{display:block;margin:0;padding:0;outline:0;border:0;vertical-align:baseline;}
body{font:110% Arial, Helvetica, sans-serif;background:#ccc;color:#000;text-align:left;font-weight:normal;}
a:hover,input:hover,button:hover{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;transition:all 1s ease-in-out;}
.wm-editor {background:#fff;width:80%;max-width:960px;margin:25px auto;padding:25px;}
.wm-editor fieldset {display:block;background:#eee;border:none;}
.wm-editor button {float:left;background:#fff;width:6.333%;height:2.5em;text-align:center;margin:0 1% 1% 1%;border:#ccc 1px solid;outline:none;}
.wm-editor input[type='button']:hover,.wm-editor button:hover {background:#f9f9f9;cursor:pointer;}
.wm-editor select {float:left;background:#fff;width:31.33%;height:2.5em;text-align:left;margin:1%;padding:0 10px;border:#ccc 1px solid;outline:none;cursor:pointer;}
.wm-editor input[type='submit']{background:#222;color:#fff;font-size:80%;font-family:inherit;margin-left:1%;padding:8px 12px;border:none;outline:none;}
.wm-editor input[type='submit']:hover{background:#666;cursor:pointer;}
.wm-editor textarea {display:none;}
.inhalt{background:#fff;width:98%;height:300px;line-height:1.5em;margin:15px auto!important;border:#ccc 1px solid;overflow:auto;resize:vertical;clear:both;}
.select {width:11em;}
.bold {font-weight:bold;}
.italic {font-style:italic;}
.underline {text-decoration:underline;}
.strike {text-decoration:line-through;}
.normal {text-align:center;}
blockquote{margin:15px 25px;}
ul,ol {margin:15px 25px;}
.ok {background:#EAFFEF;color:#360;text-align:center;padding:1em;outline:#360 1px solid;}
.ausgabe {background:#fff;width:80%;max-width:960px;margin:25px auto;padding:40px 35px;}
.ausgabe>div{margin:15px 0;}
.clearfix:after{visibility:hidden;display:block;content:'';clear:both;height:0;}
@media (max-width:768px){
.wm-editor select{display:block;float:none;width:98%;margin:1%;}}
- Werner schrieb am Dienstag, den 24 März 2020 #2
- Hallo Peter,
vielen Dank für das Script auch das, das du mir per E-Mail gesendet hast. Ich bin bis heute noch nicht dazu gekommen mir das anzuschauen 😓
Habe momentan in der Arbeit sehr viel zu tun, arbeite 6 Tage die Woche da bleibt abends nicht viel Freizeit undHome-Office
ist für mich nur ein Traum ...
- Peter schrieb am Mittwoch, den 25 März 2020 #3
- Guten Morgen Werner,
Danke, das Script was ich dir geschickt habe, ist ein auf Iframe basierender Editor und nur ein Basisscript.
Beste Grüße und bleibt alle gesund,
Peter