-
Notifications
You must be signed in to change notification settings - Fork 0
/
editor.php
144 lines (143 loc) · 5.11 KB
/
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
142
143
144
<?php
/**
Written on 18/12/2020 by Julius Ekane.
WhatsApp ~ +971566366808
email ~ ekanejulius7@gmail.com || julius404@outlook.com
website ~ Under construction
You can alter this file as you wish and don't forget to contact me for any clarifications
*/
require 'dbconnections.php';
$forupdate = false;
$title = 'Title of your new blog';
$body = '';
$blogId;
if (isset($_GET['blogId']) && !empty($_GET['blogId'])) {
$blogId = $_GET['blogId'];
$sql = $connection->query("SELECT title, content FROM blogs WHERE id = '$blogId'");
if ($sql->num_rows > 0) {
$forupdate = true;
$row = $sql->fetch_assoc();
$title = $row['title'];
$body = $row['content'];
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<style>
#tools{
background: rgba(220,220,220,0.5);
width: 98%;
padding: 6px;
white-space: nowrap;
overflow-x: auto;
}
#tools button{
background: white;
border: none;
font-family: monospace;
font-size: 1.5em;
margin-right: 5px;
}
form{
display: block;
width: 97%;
}
form input{
display: block;
}
form textarea, form input[type = 'text'], form input[type = 'submit']{
width: inherit;
border-radius: 10px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
border: none;
min-height: 200px;
resize: none;
transition: 0.3s box-shadow;
margin: 10px;
padding: 6px;
}
form input[type = 'text'], form input[type = 'submit']{
border-radius: 4px;
min-height: unset;
font-size: 1.2em;
}
form textarea:focus, form input[type = 'text']:focus, form input[type = 'submit']:hover{
outline: none;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);
}
form input[type = 'submit']{
width: unset;
}
#preview{
width: 99%;
background: whitesmoke;
font-size: 1.1em;
padding: 5px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/blogs.css">
</head>
<body>
<div id="tools">
<!-- This is where we have our tools for decorations. Add as many as you can when you understand the function-->
<button title="Bold text" onclick="insertMetachars('<strong>','<\/strong>');"><strong>B</strong></button>
<button title="Italics" onclick="insertMetachars('<em>','<\/em>');"><em>I</em></button>
<button title="Underline" onclick="insertMetachars('<u>','<\/u>');"><u>U</u></button>
<button title="Heading" onclick="insertMetachars('<h1>','<\/h1>');"><b>H</b></button>
<button title="Super script" onclick="insertMetachars('<sup>','<\/sup>');">X<sup>1</sup></button>
<button title="Sub script" onclick="insertMetachars('<sub>','<\/sub>');">X<sub>1</sub></button>
<button title="Strike through words" onclick="insertMetachars('<strike>','<\/strike>');"><strike>abc</strike></button>
<button title="Paragraph" onclick="insertMetachars('\n<p>\n','\n<\/p>\n');">P</button>
<button title="Link" onclick="var newURL=prompt('Enter the full URL for the link');if(newURL){insertMetachars('<a target = \'_blank\' href=\u0022'+newURL+'\u0022>','<\/a>');}else{document.myForm.myTxtArea.focus();}">URL</button>
<button title="Codes" onclick="insertMetachars('\n<code>\n','\n<\/code>\n');"></></button>
<button title="You can add your own from my examples, I end here">etc..</button>
<!-- End of tools -->
</div>
<form name="myForm" action="handler.php" method="post" onsubmit="return validate(this)">
<?php echo $forupdate? ("<input type = 'text' style='visibility:hidden;height:1px;overflow:hidden' name = 'blogId' value = '" . $blogId . "'>") : '';?>
<input type="text" name="title" style="display: block;margin-top: 10px;" placeholder="Title of your blog" value="<?php echo $forupdate? $title : 'My new blog';?>">
<textarea placeholder="Start typing your new bog here" name="body" rows="10" cols="50" onkeyup="showPreview(this)" onkeypress = "suggestTools(event)"><?php echo $body; ?>
</textarea>
<input type="submit" name="submit" value="<?php echo $forupdate? 'Update' : 'Create'; ?>">
</form>
<h3>Preview</h3>
<div id="preview">
<?php echo $body; ?>
</div>
<script>
function insertMetachars(sStartTag, sEndTag) {
var bDouble = arguments.length > 1,
oMsgInput = document.myForm.body,
nSelStart = oMsgInput.selectionStart,
nSelEnd = oMsgInput.selectionEnd,
sOldText = oMsgInput.value;
oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
oMsgInput.focus();
document.getElementById('preview').innerHTML = oMsgInput.value;
}
function showPreview(el) {
document.getElementById('preview').innerHTML = el.value;
}
function suggestTools(evt) {
let key = evt.key;
if (key == 'Enter') {
evt.preventDefault();
insertMetachars('<p>','<\/p>');
}
}
function validate(form) {
if (form.title.value.trim() == '' ||
form.body.value.trim() == ''){
alert('All fields are required');
return false;
} else {
return true;
}
}
</script>
</body>
</html>