Browse Source

fix bugs & update examples

master
pandao 10 years ago
parent
commit
ceeafc8b7e
  1. 6
      README.md
  2. 11
      editormd.amd.js
  3. 2
      editormd.amd.min.js
  4. 11
      editormd.js
  5. 2
      editormd.min.js
  6. 42
      examples/emoji.html
  7. 14
      examples/image-cross-domain-upload.html
  8. 30
      examples/image-upload.html
  9. 16
      plugins/image-dialog/image-dialog.js
  10. 11
      src/editormd.js

6
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,6 +87,7 @@ javascript:
*/
});
</script>
```
Using modular script loader :

11
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,
@ -3288,6 +3288,10 @@
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, "");
@ -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;\" />";
}
}
});

2
editormd.amd.min.js

File diff suppressed because one or more lines are too long

11
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,
@ -3218,6 +3218,10 @@
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, "");
@ -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;\" />";
}
}
});

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>
</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 @@ Emoji cheat sheet for Campfire and GitHub.
**Examples:**
:heart: :smiley:
:heart: :smiley: :+1: :-1: :black_large_square:
###Twitter Emoji (Twemoji)

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

@ -14,7 +14,19 @@
<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就可以操作父页面的任意元素了。

30
examples/image-upload.html

@ -14,33 +14,24 @@
<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",
}
```
/*
上传的后台只需要返回一个JSON数据,结构如下:
#### JSON data
```json
{
success : 0 | 1, // 0 表示上传失败,1 表示上传成功
message : "提示的信息,上传成功或上传失败及错误信息等。"
message : "提示的信息,上传成功或上传失败及错误信息等。",
url : "图片地址" // 上传成功时才返回
}
*/
});
});
```</textarea>
</div>
</div>
@ -66,7 +57,8 @@ $(function() {
上传的后台只需要返回一个JSON数据,结构如下:
{
success : 0 | 1, // 0 表示上传失败,1 表示上传成功
message : "提示的信息,上传成功或上传失败及错误信息等。"
message : "提示的信息,上传成功或上传失败及错误信息等。",
url : "图片地址" // 上传成功时才返回
}
*/
});

16
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\"]");
@ -134,14 +136,18 @@
}
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 + ")");

11
src/editormd.js

@ -3134,7 +3134,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,
@ -3206,6 +3206,10 @@
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, "");
@ -3242,7 +3246,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;\" />";
}
}
});

Loading…
Cancel
Save