Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Implemented a simple HTML text editor to posts.

  • Loading branch information...
commit 2ef6d96c29142b9e1b89aaf4629d611f93e54e3f 1 parent b987c07
@pedrofranceschi pedrofranceschi authored
View
1  blogode.js
@@ -112,6 +112,7 @@ app.post('/admin/posts/save', function(req, res) {
if(!req.session.username) {
return res.redirect("/admin/login")
}
+ sys.puts('saving: ' + sys.inspect(req.param('textEditor')))
if(!req.param('title') || !req.param('body')) {
return res.redirect("/admin/posts/new");
}
View
24 lib/posts.js
@@ -50,6 +50,9 @@ exports.getPost = function(postId, callback) {
}
var postInfo = results[0]
postInfo['user_name'] = results1[0].name;
+ var unpreparedBody = exports._unpreparePostBody(unescape(postInfo['body']));
+ sys.puts('unpreparedBody: ' + sys.inspect(unpreparedBody));
+ postInfo['body'] = escape(unpreparedBody);
callback(postInfo);
});
@@ -59,7 +62,7 @@ exports.getPost = function(postId, callback) {
exports.createPost = function(title, body, user_id, callback) {
database.getDatabaseConnection(function (mysql_client) {
- mysql_client.query("INSERT INTO posts (title, body, user_id) VALUES ('" + escape(title) + "', '" + escape(body) + "', " + user_id + ");", function (error, results, fields) {
+ mysql_client.query("INSERT INTO posts (title, body, user_id) VALUES ('" + escape(title) + "', '" + escape(exports._preparePostBody(body)) + "', " + user_id + ");", function (error, results, fields) {
if(error) {
throw "Error creating post: " + error;
}
@@ -70,7 +73,7 @@ exports.createPost = function(title, body, user_id, callback) {
exports.updatePost = function(id, title, body, callback) {
database.getDatabaseConnection(function (mysql_client) {
- mysql_client.query("UPDATE posts SET title='" + escape(title) + "', body='" + escape(body) + "' WHERE id='" + escape(id) + "';", function (error, results, fields) {
+ mysql_client.query("UPDATE posts SET title='" + escape(title) + "', body='" + escape(exports._preparePostBody(body)) + "' WHERE id='" + escape(id) + "';", function (error, results, fields) {
if(error) {
throw "Error creating post: " + error;
}
@@ -83,9 +86,24 @@ exports.destroyPost = function(id, callback) {
database.getDatabaseConnection(function (mysql_client) {
mysql_client.query("DELETE FROM posts WHERE id='" + escape(id) + "';", function (error, results, fields) {
if(error) {
- throw "Error creating post: " + error;
+ throw "Error destroying post: " + error;
}
callback();
});
});
+}
+
+function replaceAll(string, token, newtoken) {
+ while (string.indexOf(token) != -1) {
+ string = string.replace(token, newtoken);
+ }
+ return string;
+}
+
+exports._preparePostBody = function(body) {
+ return replaceAll(body, "\n", "<br/>")
+}
+
+exports._unpreparePostBody = function(body) {
+ return replaceAll(body, "<br/>", "\n")
}
View
74 views/admin/posts/edit.ejs
@@ -1,7 +1,73 @@
+<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
+<script src="/post_editor.js"/>
+
+<body onLoad="def();">
+
<form method="post" action="/admin/posts/update" id="createRoomForm">
- <h1>Edit Post</h1>
- Title: <input type="text" name="title" size="62" value="<%= unescape(post.title) %>"></input><br/>
- Body:<br/> <textarea name="body" rows="20" cols="50"><%= unescape(post.body) %></textarea><br/><br/>
+ <h1>New Post</h1>
+ Title: <input type="text" name="title" size="62" value="<%= unescape(post.title) %>"/><br/><br/>
+ Body:<br/><br/>
+
+ <input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
+ <input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
+ <input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> |
+ <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
+ <input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
+ <input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> |
+ <select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
+ <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>
+ </select>
+ <select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
+ <option value="black">Black</option>
+ <option style="color:red;" value="red">Red</option>
+ <option style="color:blue;" value="blue">Blue</option>
+ <option style="color:green;" value="green">Green</option>
+ <option style="color:pink;" value="pink">Pink</option>
+ <option style="color:yellow;" value="yellow">Yellow</option>
+ </select> |
+ <input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
+ <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
+ <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('outdent')" title="Outdent" />
+ <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('indent')" title="Indent" />
+ </div>
+ <br/>
+ <iframe id="textEditor" style="width:500px; height:170px;">
+ </iframe>
+ </center>
+ <script type="text/javascript">
+ <!--
+ textEditor.document.designMode="on";
+ textEditor.document.open();
+ textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
+ textEditor.document.close();
+ function def()
+ {
+ window.frames['textEditor'].document.body.innerHTML = unescape("<%= post.body %>");
+ document.getElementById("fonts").selectedIndex=0;
+ document.getElementById("size").selectedIndex=1;
+ document.getElementById("color").selectedIndex=0;
+ }
+ function fontEdit(x,y)
+ {
+ textEditor.document.execCommand(x,"",y);
+ textEditor.focus();
+ }
+ -->
+
+ function submitForm() {
+ var editorContent = window.frames['textEditor'].document.body.innerHTML;
+ $('input[name=body]').val(editorContent);
+ $('form').submit();
+ }
+ </script>
+
+ <input type="hidden" name="body" value=""/><br/>
<input type="hidden" name="id" value="<%= post.id %>"/><br/>
- <input type="submit" value="Update" />
+
+ <br/><br/>
+ <input type="submit" id="submitButton" value="Submit" onClick="submitForm();"/>
</form>
View
71 views/admin/posts/new.ejs
@@ -1,6 +1,71 @@
+<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
+<script src="/post_editor.js"/>
+
+<body onLoad="def();">
+
<form method="post" action="/admin/posts/save" id="createRoomForm">
<h1>New Post</h1>
- Title: <input type="text" name="title" size="62"/><br/>
- Body:<br/> <textarea name="body" rows="20" cols="50"></textarea><br/><br/>
- <input type="submit" value="Submit" />
+ Title: <input type="text" name="title" size="62"/><br/><br/>
+ Body:<br/><br/>
+
+ <input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
+ <input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
+ <input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> |
+ <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
+ <input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
+ <input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> |
+ <select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
+ <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>
+ </select>
+ <select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
+ <option value="black">Black</option>
+ <option style="color:red;" value="red">Red</option>
+ <option style="color:blue;" value="blue">Blue</option>
+ <option style="color:green;" value="green">Green</option>
+ <option style="color:pink;" value="pink">Pink</option>
+ <option style="color:yellow;" value="yellow">Yellow</option>
+ </select> |
+ <input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
+ <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
+ <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('outdent')" title="Outdent" />
+ <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('indent')" title="Indent" />
+ </div>
+ <br/>
+ <iframe id="textEditor" style="width:500px; height:170px;">
+ </iframe>
+ </center>
+ <script type="text/javascript">
+ <!--
+ textEditor.document.designMode="on";
+ textEditor.document.open();
+ textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
+ textEditor.document.close();
+ function def()
+ {
+ document.getElementById("fonts").selectedIndex=0;
+ document.getElementById("size").selectedIndex=1;
+ document.getElementById("color").selectedIndex=0;
+ }
+ function fontEdit(x,y)
+ {
+ textEditor.document.execCommand(x,"",y);
+ textEditor.focus();
+ }
+ -->
+
+ function submitForm() {
+ var editorContent = window.frames['textEditor'].document.body.innerHTML;
+ $('input[name=body]').val(editorContent);
+ $('form').submit();
+ }
+ </script>
+
+ <input type="hidden" name="body" value=""/><br/>
+
+ <br/><br/>
+ <input type="submit" id="submitButton" value="Submit" onClick="submitForm();"/>
</form>
View
6 views/index.ejs
@@ -1,5 +1,9 @@
<% for (var i=0; i < posts.length; i++) { %>
<h2><%= unescape(posts[i].title) %></h2>
<p>by <%= posts[i].user_name %></p>
- <p><%= unescape(posts[i].body) %></p><br/>
+ <% if(unescape(posts[i].body).indexOf("###") >= 0) { %>
+ <p><%- unescape(posts[i].body).split("###")[0] %></p><br/>
+ <% } else { %>
+ <p><%- unescape(posts[i].body) %></p><br/>
+ <% } %>
<% } %>
Please sign in to comment.
Something went wrong with that request. Please try again.