Browse Source

fix bugs & update examples

master
pandao 10 years ago
parent
commit
ceeafc8b7e
  1. 8
      README.md
  2. 15
      editormd.amd.js
  3. 2
      editormd.amd.min.js
  4. 15
      editormd.js
  5. 2
      editormd.min.js
  6. 42
      examples/emoji.html
  7. 2
      examples/html-preview-markdown-to-html.html
  8. 24
      examples/image-cross-domain-upload.html
  9. 46
      examples/image-upload.html
  10. 2
      examples/php/editormd.uploader.class.php
  11. 20
      plugins/image-dialog/image-dialog.js
  12. 15
      src/editormd.js

8
README.md

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

15
editormd.amd.js

@ -3216,7 +3216,7 @@
atLink : /@(\w+)/g, atLink : /@(\w+)/g,
email : /(\w+)@(\w+)\.(\w+)\.?(\w+)?/g, email : /(\w+)@(\w+)\.(\w+)\.?(\w+)?/g,
emailLink : /(mailto:)?([\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, emojiDatetime : /(\d{2}:\d{2}:\d{2})/g,
twemoji : /:(tw-([\w]+)-?(\w+)?):/g, twemoji : /:(tw-([\w]+)-?(\w+)?):/g,
fontAwesome : /:(fa-([\w]+)(-(\w+)){0,}):/g, fontAwesome : /:(fa-([\w]+)(-(\w+)){0,}):/g,
@ -3287,7 +3287,11 @@
} }
for (var i = 0, len = matchs.length; i < len; i++) 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){ text = text.replace(new RegExp(matchs[i]), function($1, $2){
var faMatchs = $1.match(faIconReg); var faMatchs = $1.match(faIconReg);
var name = $1.replace(/:/g, ""); var name = $1.replace(/:/g, "");
@ -3315,7 +3319,7 @@
} }
} }
else if (twemojiMatchs) else if (twemojiMatchs)
{
{
for (var t = 0, len3 = twemojiMatchs.length; t < len3; t++) for (var t = 0, len3 = twemojiMatchs.length; t < len3; t++)
{ {
var twe = twemojiMatchs[t].replace(/:/g, "").replace("tw-", ""); var twe = twemojiMatchs[t].replace(/:/g, "").replace("tw-", "");
@ -3324,7 +3328,10 @@
} }
else 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;\" />";
} }
} }
}); });

2
editormd.amd.min.js

File diff suppressed because one or more lines are too long

15
editormd.js

@ -3146,7 +3146,7 @@
atLink : /@(\w+)/g, atLink : /@(\w+)/g,
email : /(\w+)@(\w+)\.(\w+)\.?(\w+)?/g, email : /(\w+)@(\w+)\.(\w+)\.?(\w+)?/g,
emailLink : /(mailto:)?([\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, emojiDatetime : /(\d{2}:\d{2}:\d{2})/g,
twemoji : /:(tw-([\w]+)-?(\w+)?):/g, twemoji : /:(tw-([\w]+)-?(\w+)?):/g,
fontAwesome : /:(fa-([\w]+)(-(\w+)){0,}):/g, fontAwesome : /:(fa-([\w]+)(-(\w+)){0,}):/g,
@ -3217,7 +3217,11 @@
} }
for (var i = 0, len = matchs.length; i < len; i++) 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){ text = text.replace(new RegExp(matchs[i]), function($1, $2){
var faMatchs = $1.match(faIconReg); var faMatchs = $1.match(faIconReg);
var name = $1.replace(/:/g, ""); var name = $1.replace(/:/g, "");
@ -3245,7 +3249,7 @@
} }
} }
else if (twemojiMatchs) else if (twemojiMatchs)
{
{
for (var t = 0, len3 = twemojiMatchs.length; t < len3; t++) for (var t = 0, len3 = twemojiMatchs.length; t < len3; t++)
{ {
var twe = twemojiMatchs[t].replace(/:/g, "").replace("tw-", ""); var twe = twemojiMatchs[t].replace(/:/g, "").replace("tw-", "");
@ -3254,7 +3258,10 @@
} }
else 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;\" />";
} }
} }
}); });

2
editormd.min.js

File diff suppressed because one or more lines are too long

42
examples/emoji.html

@ -21,46 +21,6 @@
<li>Editor.md logo icon font emoji</li> <li>Editor.md logo icon font emoji</li>
</ul> </ul>
</header> </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"> <div id="test-editormd">
<textarea style="display:none;">###Emoji表情 :smiley: <textarea style="display:none;">###Emoji表情 :smiley:
@ -78,7 +38,7 @@ Emoji cheat sheet for Campfire and GitHub.
**Examples:** **Examples:**
:heart: :smiley:
:heart: :smiley: :+1: :-1: :black_large_square:
###Twitter Emoji (Twemoji) ###Twitter Emoji (Twemoji)

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

@ -77,7 +77,7 @@ alert("script");
<script src="../lib/flowchart.min.js"></script> <script src="../lib/flowchart.min.js"></script>
<script src="../lib/jquery.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"> <script type="text/javascript">
var testEditormdView, testEditormdView2; var testEditormdView, testEditormdView2;

24
examples/image-cross-domain-upload.html

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

46
examples/image-upload.html

@ -14,34 +14,25 @@
<p>Image upload example</p> <p>Image upload example</p>
</header> </header>
<div id="test-editormd"> <div id="test-editormd">
<textarea style="display:none;">####配置 Settings
<textarea style="display:none;">#### Settings
```javascript ```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>
</div> </div>
<script src="js/jquery.min.js"></script> <script src="js/jquery.min.js"></script>
@ -65,8 +56,9 @@ $(function() {
/* /*
上传的后台只需要返回一个JSON数据,结构如下: 上传的后台只需要返回一个JSON数据,结构如下:
{ {
success : 0 | 1, // 0表示上传失败,1表示上传成功
message : "提示的信息,上传成功或上传失败及错误信息等。"
success : 0 | 1, // 0 表示上传失败,1 表示上传成功
message : "提示的信息,上传成功或上传失败及错误信息等。",
url : "图片地址" // 上传成功时才返回
} }
*/ */
}); });

2
examples/php/editormd.uploader.class.php

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

20
plugins/image-dialog/image-dialog.js

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

15
src/editormd.js

@ -3134,7 +3134,7 @@
atLink : /@(\w+)/g, atLink : /@(\w+)/g,
email : /(\w+)@(\w+)\.(\w+)\.?(\w+)?/g, email : /(\w+)@(\w+)\.(\w+)\.?(\w+)?/g,
emailLink : /(mailto:)?([\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, emojiDatetime : /(\d{2}:\d{2}:\d{2})/g,
twemoji : /:(tw-([\w]+)-?(\w+)?):/g, twemoji : /:(tw-([\w]+)-?(\w+)?):/g,
fontAwesome : /:(fa-([\w]+)(-(\w+)){0,}):/g, fontAwesome : /:(fa-([\w]+)(-(\w+)){0,}):/g,
@ -3205,7 +3205,11 @@
} }
for (var i = 0, len = matchs.length; i < len; i++) 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){ text = text.replace(new RegExp(matchs[i]), function($1, $2){
var faMatchs = $1.match(faIconReg); var faMatchs = $1.match(faIconReg);
var name = $1.replace(/:/g, ""); var name = $1.replace(/:/g, "");
@ -3233,7 +3237,7 @@
} }
} }
else if (twemojiMatchs) else if (twemojiMatchs)
{
{
for (var t = 0, len3 = twemojiMatchs.length; t < len3; t++) for (var t = 0, len3 = twemojiMatchs.length; t < len3; t++)
{ {
var twe = twemojiMatchs[t].replace(/:/g, "").replace("tw-", ""); var twe = twemojiMatchs[t].replace(/:/g, "").replace("tw-", "");
@ -3242,7 +3246,10 @@
} }
else 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;\" />";
} }
} }
}); });

Loading…
Cancel
Save