");
+
+ var $saveButton = $("
");
+ $blogPostEditor.append($saveButton);
+
+ var $toolbar = $("
");
+ $blogPostEditor.append($toolbar);
+
+ var $editor = $("
");
+ $blogPostEditor.append($editor);
+
+ return $blogPostEditor;
+ };
+
+ var createHtml = function(title) {
+ var $blogPost = createBlogPostContentHtml(title);
+
+ var $blogPostEditor = createBlogPostEditor();
+ $blogPost.append($blogPostEditor);
+
+ $blogPost.append("
");
+
+ return $blogPost;
+ };
+
+ var createTextEditor = function() {
+ // Initialize and get a reference to the editor
+ $el.find(".editor").Arte({
+ editorType: $.Arte.constants.editorTypes.richText,
+ styles: { // default styles can be passed in as well
+ height: "100px",
+ width: "400px",
+ overflow: "auto",
+ border: "1px dashed gray"
+ }
+ });
+
+ // Initialize the toolbar
+
+ // TODO figure out why this is needed for the demo to work
+ $.Arte.Toolbar.configuration.requireEditorFocus = false;
+
+ var buttons = ["bold", "italic", "underline"];
+
+ $el.find(".toolbar").ArteToolbar({
+ buttons: buttons
+ });
+
+ // Hide the editor initially
+ $el.find(".blog-post-editor").hide();
+ };
+
+ var attachEditHandler = function() {
+ $el.find(".edit-button").click(function() {
+ var arte = $el.find(".editor").Arte();
+
+ $el.find(".blog-post-content").hide();
+ $el.find(".edit-button").hide();
+ $el.find(".blog-post-editor").show();
+ $el.find(".save-button").show();
+
+ // Set focus to the editor so the toolbar becomes enabled
+ arte.focus();
+
+ var blogPostContent = $el.find(".blog-post-content").html();
+ arte.get(0).value(blogPostContent);
+ });
+ };
+
+ var attachSaveHandler = function() {
+ $el.find(".save-button").click(function() {
+ var arte = $el.find(".editor").Arte();
+
+ var editorContent = arte.get(0).value();
+ $el.find(".blog-post-content").html(editorContent);
+
+ $el.find(".blog-post-editor").hide();
+ $el.find(".save-button").hide();
+ $el.find(".blog-post-content").show();
+ $el.find(".edit-button").show();
+ });
+ };
+
+ var attachEventHandlers = function() {
+ attachEditHandler();
+ attachSaveHandler();
+ };
+
+ var setDefaultText = function() {
+ if (defaultText !== undefined) {
+ $el.find(".blog-post-content").html(defaultText);
+ }
+ };
+
+ var initialize = function() {
+ createTextEditor();
+
+ attachEventHandlers();
+
+ setDefaultText();
+ };
+
+ this.addToParentContainer = function($parent) {
+ $el = createHtml(title);
+
+ $parent.prepend($el);
+
+ initialize();
+
+ return $el;
+ };
+
+};
diff --git a/examples/blog/icons/text_bold.png b/examples/blog/icons/text_bold.png
new file mode 100644
index 0000000..889ae80
Binary files /dev/null and b/examples/blog/icons/text_bold.png differ
diff --git a/examples/blog/icons/text_italic.png b/examples/blog/icons/text_italic.png
new file mode 100644
index 0000000..8482ac8
Binary files /dev/null and b/examples/blog/icons/text_italic.png differ
diff --git a/examples/blog/icons/text_underline.png b/examples/blog/icons/text_underline.png
new file mode 100644
index 0000000..90d0df2
Binary files /dev/null and b/examples/blog/icons/text_underline.png differ
diff --git a/examples/blog/index.html b/examples/blog/index.html
new file mode 100644
index 0000000..52275a3
--- /dev/null
+++ b/examples/blog/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+ Blog built with ArteJS
+
+
+
+
+
+
+
My Exciting Adventures
+
+ New Post Title:
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/blog/toolbar.css b/examples/blog/toolbar.css
new file mode 100644
index 0000000..d1fc585
--- /dev/null
+++ b/examples/blog/toolbar.css
@@ -0,0 +1,202 @@
+.toolbar
+{
+ background-color: lightgrey;
+ position: relative;
+}
+
+.btn-inner
+{
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ margin: 4px;
+}
+
+.toolbar-button:hover
+{
+
+}
+
+.btn
+{
+ display: inline-block;
+ border: grey 1px solid;
+}
+
+.tooltip {
+ position: absolute;
+ background-color: lightblue;
+ line-height: 12px;
+ font-size: 10px;
+}
+
+.toolbar select
+{
+ width: auto;
+ margin-bottom: 0px;
+}
+
+.bold
+{
+ background-image: url("../Content/Icons/text_bold.png");
+}
+
+.italic
+{
+ background-image: url("../Content/Icons/text_italic.png");
+}
+
+.underline
+{
+ background-image: url("../Content/Icons/text_underline.png");
+}
+
+.blockquote
+{
+ background-image: url("../Content/Icons/text_padding_left.png");
+}
+
+.textAlignLeft
+{
+ background-image: url("../Content/Icons/text_align_left.png");
+}
+
+.textAlignCenter
+{
+ background-image: url("../Content/Icons/text_align_center.png");
+}
+
+.textAlignRight
+{
+ background-image: url("../Content/Icons/text_align_right.png");
+}
+
+.h1
+{
+ background-image: url("../Content/Icons/text_heading_1.png");
+}
+
+.h2
+{
+ background-image: url("../Content/Icons/text_heading_2.png");
+}
+
+.h3
+{
+ background-image: url("../Content/Icons/text_heading_3.png");
+}
+
+.h4
+{
+ background-image: url("../Content/Icons/text_heading_4.png");
+}
+
+.h5
+{
+ background-image: url("../Content/Icons/text_heading_5.png");
+}
+
+.h6
+{
+ background-image: url("../Content/Icons/text_heading_6.png");
+}
+
+.subscript
+{
+ background-image: url("../Content/Icons/text_subscript.png");
+}
+
+.superscript
+{
+ background-image: url("../Content/Icons/text_superscript.png");
+}
+
+.unorderedList
+{
+ background-image: url("../Content/Icons/text_list_bullets.png");
+}
+
+.orderedList
+{
+ background-image: url("../Content/Icons/text_list_numbers.png");
+}
+
+.undo
+{
+ background-image: url("../Content/Icons/arrow_undo.png");
+}
+
+.redo
+{
+ background-image: url("../Content/Icons/arrow_redo.png");
+}
+
+.insertLink
+{
+ background-image: url("../Content/Icons/link_add.png");
+}
+
+.diabled
+{
+ background-color: gray;
+}
+
+.selected
+{
+ background-color: lightblue;
+}
+
+select
+{
+ vertical-align: top;
+}
+
+
+.inline-dialog
+{
+ position: absolute;
+ text-align: center;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ display:none;
+ background-color:rgba(0, 0, 0, 0.5);
+}
+
+.content-wrapper
+{
+ position: relative;
+ top: 50%;
+}
+
+.dialog-content,
+.ok-cancel,
+.text-to-show,
+.url-input
+{
+ display: inline-block;
+}
+
+.text-to-show,
+.url-input {
+ background-color: white;
+ padding: 0px 5px;
+}
+
+.text-to-show input,
+.url-input input{
+ height: auto;
+ margin: 0px;
+}
+
+.insert-dialog
+{
+ background-color: lightgrey;
+}
+
+.inline-dialog-button
+{
+ display: inline-block;
+ text-align: center;
+ cursor: default;
+}