fix bugs & update examples

README.md

@@ -50,21 +50,26 @@
 
 Bower install :
 
+```shell
 	bower install editor.md
+```
 
 #### Usages
 
 HTML：
 
+```html
     <link rel="stylesheet" href="editormd.min.css" />
     <div id="editormd">
         <textarea style="display:none;">### Hello world!</textarea>
     </div>
+```
 
 > Tip: Editor.md can auto append `<textarea>` tag;
 
 javascript:
 
+```html
     <script src="jquery.min.js"></script>
     <script src="editormd.min.js"></script>
     <script type="text/javascript">
@@ -82,7 +87,8 @@ javascript:
             */
         });
     </script>
-
+```
+
 Using modular script loader :
 
 - [Using Require.js](https://github.com/pandao/editor.md/tree/master/examples/use-requirejs.html)

editormd.amd.js

@@ -3216,7 +3216,7 @@
         atLink        : /@(\w+)/g,
         email         : /(\w+)@(\w+)\.(\w+)\.?(\w+)?/g,
         emailLink     : /(mailto:)?([\w\.\_]+)@(\w+)\.(\w+)\.?(\w+)?/g,
-        emoji         : /:([\-\w]+):/g,
+        emoji         : /:([\+-\w]+):/g,
         emojiDatetime : /(\d{2}:\d{2}:\d{2})/g,
         twemoji       : /:(tw-([\w]+)-?(\w+)?):/g,
         fontAwesome   : /:(fa-([\w]+)(-(\w+)){0,}):/g,
@@ -3287,7 +3287,11 @@
             }
 
             for (var i = 0, len = matchs.length; i < len; i++)
-            {
+            {            
+                if (matchs[i] === ":+1:") {
+                    matchs[i] = ":\\+1:";
+                }
+
                 text = text.replace(new RegExp(matchs[i]), function($1, $2){
                     var faMatchs = $1.match(faIconReg);
                     var name     = $1.replace(/:/g, "");
@@ -3315,7 +3319,7 @@
                             }
                         }
                         else if (twemojiMatchs) 
-                        {                            
+                        {
                             for (var t = 0, len3 = twemojiMatchs.length; t < len3; t++)
                             {
                                 var twe = twemojiMatchs[t].replace(/:/g, "").replace("tw-", "");
@@ -3324,7 +3328,10 @@
                         }
                         else
                         {
-                            return "<img src=\"" + editormd.emoji.path + name + editormd.emoji.ext + "\" class=\"emoji\" title=\"&#58;" + name + "&#58;\" alt=\"&#58;" + name + "&#58;\" />";
+                            var src = (name === "+1") ? "plus1" : name;
+                            src     = (src === "black_large_square") ? "black_square" : src;
+
+                            return "<img src=\"" + editormd.emoji.path + src + editormd.emoji.ext + "\" class=\"emoji\" title=\"&#58;" + name + "&#58;\" alt=\"&#58;" + name + "&#58;\" />";
                         }
                     }
                 });

editormd.js

@@ -3146,7 +3146,7 @@
         atLink        : /@(\w+)/g,
         email         : /(\w+)@(\w+)\.(\w+)\.?(\w+)?/g,
         emailLink     : /(mailto:)?([\w\.\_]+)@(\w+)\.(\w+)\.?(\w+)?/g,
-        emoji         : /:([\-\w]+):/g,
+        emoji         : /:([\+-\w]+):/g,
         emojiDatetime : /(\d{2}:\d{2}:\d{2})/g,
         twemoji       : /:(tw-([\w]+)-?(\w+)?):/g,
         fontAwesome   : /:(fa-([\w]+)(-(\w+)){0,}):/g,
@@ -3217,7 +3217,11 @@
             }
 
             for (var i = 0, len = matchs.length; i < len; i++)
-            {
+            {            
+                if (matchs[i] === ":+1:") {
+                    matchs[i] = ":\\+1:";
+                }
+
                 text = text.replace(new RegExp(matchs[i]), function($1, $2){
                     var faMatchs = $1.match(faIconReg);
                     var name     = $1.replace(/:/g, "");
@@ -3245,7 +3249,7 @@
                             }
                         }
                         else if (twemojiMatchs) 
-                        {                            
+                        {
                             for (var t = 0, len3 = twemojiMatchs.length; t < len3; t++)
                             {
                                 var twe = twemojiMatchs[t].replace(/:/g, "").replace("tw-", "");
@@ -3254,7 +3258,10 @@
                         }
                         else
                         {
-                            return "<img src=\"" + editormd.emoji.path + name + editormd.emoji.ext + "\" class=\"emoji\" title=\"&#58;" + name + "&#58;\" alt=\"&#58;" + name + "&#58;\" />";
+                            var src = (name === "+1") ? "plus1" : name;
+                            src     = (src === "black_large_square") ? "black_square" : src;
+
+                            return "<img src=\"" + editormd.emoji.path + src + editormd.emoji.ext + "\" class=\"emoji\" title=\"&#58;" + name + "&#58;\" alt=\"&#58;" + name + "&#58;\" />";
                         }
                     }
                 });

examples/emoji.html

@@ -21,46 +21,6 @@ <h1>Emoji表情</h1>
                     <li>Editor.md logo icon font emoji</li>
                 </ul>
             </header>
-            <!--<div class="editormd-form">
-                <label>单元格数</label>
-                行数 <input type="number" value="3" max="100" min="2" />&nbsp;&nbsp;
-                列数 <input type="number" value="2" max="100" min="1"  />
-                <br/>
-                <label>对齐方式</label>
-                <div class="fa-btns">
-                    <a href="javascript:;" title="默认">
-                        <label>
-                            <input type="radio" name="table-align" value="" checked />
-                            <i class="fa fa-align-justify"></i>
-                        </label>
-                    </a>     
-                    <a href="javascript:;" title="左对齐">
-                        <label>
-                            <input type="radio" name="table-align" value="left" />
-                            <i class="fa fa-align-left"></i>
-                        </label>
-                    </a>     
-                    <a href="javascript:;" title="居中对齐">
-                        <label>
-                            <input type="radio" name="table-align" value="center" />
-                            <i class="fa fa-align-center"></i>
-                        </label>
-                    </a>
-                    <a href="javascript:;" title="右对齐">
-                        <label>
-                            <input type="radio" name="table-align" value="right" />
-                            <i class="fa fa-align-right"></i>
-                        </label>
-                    </a>         
-                </div>-->
-                <!--<select style="padding: 5px 8px;">
-                    <option selected="selected" value="">默认</option>
-                    <option value="left">左对齐</option>
-                    <option value="center">居中对齐</option>
-                    <option value="right">右对齐</option>
-                </select>-->
-                <br/>                              
-            </div>
             <div id="test-editormd">                
                 <textarea style="display:none;">###Emoji表情 :smiley:
 
@@ -78,7 +38,7 @@ <h1>Emoji表情</h1>
 
 **Examples:**
 
-:heart: :smiley:
+:heart: :smiley: :+1: :-1: :black_large_square:
 
 ###Twitter Emoji (Twemoji)
 

examples/html-preview-markdown-to-html.html

@@ -77,7 +77,7 @@ <h1>Markdown转HTML的显示处理</h1>
         <script src="../lib/flowchart.min.js"></script>
         <script src="../lib/jquery.flowchart.min.js"></script>
 
-        <script src="../editormd.js"></script>  
+        <script src="../editormd.js"></script>
         <script type="text/javascript">
 			var testEditormdView, testEditormdView2;
 

examples/image-cross-domain-upload.html

@@ -14,11 +14,23 @@ <h1>图片跨域上传示例</h1>
                 <p>Image cross-domain upload example.</p>
             </header>
             <div id="test-editormd">
-                <textarea style="display:none;">####跨域上传原理
+                <textarea style="display:none;">#### Settings
+
+```javascript
+{
+    imageUpload       : true,
+    imageFormats      : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
+    imageUploadURL    : "http://xxxxxxx/editor.md/examples/php/cross-domain-upload.php?test=dfdf",
+    crossDomainUpload : true,
+    uploadCallbackURL : "http://xxxxxx/upload_callback.html?test=dfdf"
+}
+```
+
+#### 跨域上传原理
 
 利用iframe来实现，A站POST到B站，B站处理上传后再跳转回到A站的callback页面，callback页面此时在iframe内（即同域下），再通过window.parent就可以操作父页面的任意元素了。
 
-####跨域上传示例PHP版
+#### 跨域上传示例PHP版
 
 当前域名：blog.xxx.com/post.php
 
@@ -67,7 +79,7 @@ <h1>图片跨域上传示例</h1>
         <script src="js/jquery.min.js"></script>
         <script src="../editormd.js"></script>
         <script type="text/javascript">
-            $(function() {         
+            $(function() {
                 var testEditor = editormd("test-editormd", {
                     width             : "90%",
                     height            : 640,
@@ -82,10 +94,10 @@ <h1>图片跨域上传示例</h1>
                     /*
                      跨域时，上传的图片服务器后台只需要返回一个跳转URL并跳转到原页面同域下的callback页面，结构如下：
                      {
-                        success : 0 | 1,   // 0表示上传失败，1表示上传成功
-                        message : "提示的信息，上传成功或上传失败及错误信息等。",
+                        success   : 0 | 1,   // 0表示上传失败，1表示上传成功
+                        message   : "提示的信息，上传成功或上传失败及错误信息等。",
                         dialog_id : $_GET['dialog_id'],
-                        url  : "远程图片地址" // 上传成功时才返回
+                        url       : "远程图片地址"    // 上传成功时才返回
                      }
                      */
                 });

examples/image-upload.html

@@ -14,34 +14,25 @@ <h1>图片上传示例</h1>
                 <p>Image upload example</p>
             </header>
             <div id="test-editormd">
-                <textarea style="display:none;">####配置 Settings
+                <textarea style="display:none;">#### Settings
 
 ```javascript
-$(function() {
-    var testEditor = editormd("test-editormd", {
-        width: "90%",
-        height: 540,
-        markdown : "",
-        path : '../lib/',
-        //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
-        //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
-        //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
-        //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
-        //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
-        imageUpload : false,
-        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
-        imageUploadURL : "./php/upload.php",
+{
+    imageUpload    : false,
+    imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
+    imageUploadURL : "./php/upload.php",
+}
+```
 
-        /*
-         上传的后台只需要返回一个JSON数据，结构如下：
-         {
-            success : 0 | 1,   // 0表示上传失败，1表示上传成功
-            message : "提示的信息，上传成功或上传失败及错误信息等。"
-         }
-         */
-    });
-});
-```</textarea>   
+#### JSON data
+
+```json
+{
+    success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
+    message : "提示的信息，上传成功或上传失败及错误信息等。",
+    url     : "图片地址"        // 上传成功时才返回
+}
+```</textarea>
         </div>
         </div>        
         <script src="js/jquery.min.js"></script>
@@ -65,8 +56,9 @@ <h1>图片上传示例</h1>
                     /*
                      上传的后台只需要返回一个JSON数据，结构如下：
                      {
-                        success : 0 | 1,   // 0表示上传失败，1表示上传成功
-                        message : "提示的信息，上传成功或上传失败及错误信息等。"
+                        success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
+                        message : "提示的信息，上传成功或上传失败及错误信息等。",
+                        url     : "图片地址"        // 上传成功时才返回
                      }
                      */
                 });

examples/php/editormd.uploader.class.php

@@ -314,7 +314,7 @@ public function message($message, $success = 0)
             {
                 if ($success == 1)
                 {
-                    $array['url']  = $url;
+                    $array['url']    = $url;
                 }
                 else
                 {

plugins/image-dialog/image-dialog.js

@@ -3,8 +3,8 @@
  *
  * @file        image-dialog.js
  * @author      pandao
- * @version     1.2.0
- * @updateTime  2015-03-07
+ * @version     1.3.0
+ * @updateTime  2015-05-06
  * {@link       https://github.com/pandao/editor.md}
  * @license     MIT
  */
@@ -116,7 +116,9 @@
 
                 dialog.attr("id", classPrefix + "image-dialog-" + guid);
 
-				if (!settings.imageUpload) return ;
+				if (!settings.imageUpload) {
+                    return ;
+                }
 
 				var fileInput  = dialog.find("[name=\"" + classPrefix + "image-file\"]");
 
@@ -132,16 +134,20 @@
 					{      
 						alert(imageLang.formatNotAllowed + settings.imageFormats.join(", "));
 					} 
-					else 
+					else
 					{
-						if (typeof (dialog.loading) == "function") dialog.loading(true);
+						if (typeof (dialog.loading) == "function") {
+                            dialog.loading(true);
+                        }
 
 						var submitHandler = function() {
 
 							var uploadIframe = document.getElementById(iframeName);
 
 							uploadIframe.onload = function() {
-								if (typeof (dialog.loading) == "function") dialog.loading(false);
+								if (typeof (dialog.loading) == "function") {
+                                    dialog.loading(false);
+                                }
 
 								var json = uploadIframe.contentWindow.document.body.innerHTML;
 								json = (typeof JSON.parse !== "undefined") ? JSON.parse(json) : eval("(" + json + ")");
@@ -161,7 +167,7 @@
 
 						dialog.find("[type=\"submit\"]").bind("click", submitHandler).trigger("click");
 
-					}        
+					}
 
 					return false;
 				});