Pandao
10 years ago
94 changed files with 6415 additions and 1166 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 45 KiB |
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,121 @@ |
|||
/* |
|||
* Editor.md |
|||
* @file languagesen.js |
|||
* @version v1.1.0 |
|||
* @description A simple online markdown editor. |
|||
* @license MIT License |
|||
* @author Pandao |
|||
* {@link https://github.com/pandao/editor.md}
|
|||
* @updateTime 2015-02-15 |
|||
*/ |
|||
|
|||
(function(){ |
|||
var factory = function (exports) { |
|||
var lang = { |
|||
name : "en", |
|||
description : "A simple markdown doucment online editor.", |
|||
toolbar : { |
|||
undo : "Undo(Ctrl+Z)", |
|||
redo : "Redo(Ctrl+Y)", |
|||
bold : "Bold", |
|||
del : "Strikethrough", |
|||
italic : "Italic", |
|||
quote : "Block quote", |
|||
h1 : "Heading 1", |
|||
h2 : "Heading 2", |
|||
h3 : "Heading 3", |
|||
h4 : "Heading 4", |
|||
h5 : "Heading 5", |
|||
h6 : "Heading 6", |
|||
"list-ul" : "Unordered list", |
|||
"list-ol" : "Ordered list", |
|||
hr : "Horizontal line", |
|||
link : "Link", |
|||
anchor : "Anchor", |
|||
image : "Image", |
|||
code : "Code inline", |
|||
"code-block-tab" : "Preformatted text / Code block (Tab indent)", |
|||
"code-block" : "Code block (Multi-languages)", |
|||
datetime : "Datetime", |
|||
watch : "Unwatch", |
|||
unwatch : "Watch", |
|||
preview : "HTML Preview (Enter ESC exit)", |
|||
fullscreen : "Fullscreen (Enter ESC exit)", |
|||
clear : "Clear", |
|||
info : "About " + exports.title |
|||
}, |
|||
buttons : { |
|||
enter : "Enter", |
|||
cancel : "Cancel" |
|||
}, |
|||
dialog : { |
|||
link : { |
|||
title : "Link", |
|||
url : "Address", |
|||
urlTitle : "Title", |
|||
urlEmpty : "Error: Please fill in the link address.", |
|||
titleEmpty : "Error: Please fill in the link title." |
|||
}, |
|||
anchor : { |
|||
title : "Anchor link", |
|||
name : "Name", |
|||
url : "Address", |
|||
urlTitle : "Title", |
|||
nameEmpty: "Error: anchor name can't be empty.", |
|||
titleEmpty : "Error: Please fill in anchor link title.", |
|||
urlEmpty : "Error: Please fill in anchor link." |
|||
}, |
|||
image : { |
|||
title : "Image", |
|||
url : "Address", |
|||
link : "Link", |
|||
alt : "Title", |
|||
uploadButton : "Upload", |
|||
imageURLEmpty : "Error: picture url address can't be empty.", |
|||
uploadFileEmpty : "Error: upload pictures cannot be empty!", |
|||
formatNotAllowed : "Error: only allows to upload pictures file, upload allowed image file format:" |
|||
}, |
|||
tabCodeBlock : { |
|||
title : "Preformatted text / Codes", |
|||
codeEmptyAlert : "Error: Please fill in the Preformatted text or content of the codes." |
|||
}, |
|||
codeBlock : { |
|||
title : "Code block", |
|||
selectLabel : "Languages: ", |
|||
selectDefaultText : "select a code language...", |
|||
otherLanguage : "Other languages", |
|||
unselectedLanguageAlert : "Error: Please select the code language.", |
|||
codeEmptyAlert : "Error: Please fill in the code content." |
|||
} |
|||
} |
|||
}; |
|||
|
|||
exports.defaults.lang = lang; |
|||
}; |
|||
|
|||
// CommonJS/Node.js
|
|||
if (typeof require === "function" && typeof exports === "object" && typeof module === "object") |
|||
{ |
|||
module.exports = factory; |
|||
} |
|||
else if (typeof define === "function") // AMD/CMD/Sea.js
|
|||
{ |
|||
if (define.amd) { // for Require.js
|
|||
|
|||
define(["editormd"], function(editormd) { |
|||
factory(editormd); |
|||
}); |
|||
|
|||
} else { // for Sea.js
|
|||
define(function(require) { |
|||
var editormd = require("../editormd"); |
|||
factory(editormd); |
|||
}); |
|||
} |
|||
} |
|||
else |
|||
{ |
|||
factory(window.editormd); |
|||
} |
|||
|
|||
})(); |
|||
@ -0,0 +1,2 @@ |
|||
/*! Editor.md v1.1.0 | languagesen.min.js | A simple online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-02-15 */ |
|||
!function(){var e=function(e){var t={name:"en",description:"A simple markdown doucment online editor.",toolbar:{undo:"Undo(Ctrl+Z)",redo:"Redo(Ctrl+Y)",bold:"Bold",del:"Strikethrough",italic:"Italic",quote:"Block quote",h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",h4:"Heading 4",h5:"Heading 5",h6:"Heading 6","list-ul":"Unordered list","list-ol":"Ordered list",hr:"Horizontal line",link:"Link",anchor:"Anchor",image:"Image",code:"Code inline","code-block-tab":"Preformatted text / Code block (Tab indent)","code-block":"Code block (Multi-languages)",datetime:"Datetime",watch:"Unwatch",unwatch:"Watch",preview:"HTML Preview (Enter ESC exit)",fullscreen:"Fullscreen (Enter ESC exit)",clear:"Clear",info:"About "+e.title},buttons:{enter:"Enter",cancel:"Cancel"},dialog:{link:{title:"Link",url:"Address",urlTitle:"Title",urlEmpty:"Error: Please fill in the link address.",titleEmpty:"Error: Please fill in the link title."},anchor:{title:"Anchor link",name:"Name",url:"Address",urlTitle:"Title",nameEmpty:"Error: anchor name can't be empty.",titleEmpty:"Error: Please fill in anchor link title.",urlEmpty:"Error: Please fill in anchor link."},image:{title:"Image",url:"Address",link:"Link",alt:"Title",uploadButton:"Upload",imageURLEmpty:"Error: picture url address can't be empty.",uploadFileEmpty:"Error: upload pictures cannot be empty!",formatNotAllowed:"Error: only allows to upload pictures file, upload allowed image file format:"},tabCodeBlock:{title:"Preformatted text / Codes",codeEmptyAlert:"Error: Please fill in the Preformatted text or content of the codes."},codeBlock:{title:"Code block",selectLabel:"Languages: ",selectDefaultText:"select a code language...",otherLanguage:"Other languages",unselectedLanguageAlert:"Error: Please select the code language.",codeEmptyAlert:"Error: Please fill in the code content."}}};e.defaults.lang=t};"function"==typeof require&&"object"==typeof exports&&"object"==typeof module?module.exports=e:"function"==typeof define?define.amd?define(["editormd"],function(t){e(t)}):define(function(t){var l=t("../editormd");e(l)}):e(window.editormd)}(); |
|||
@ -0,0 +1,121 @@ |
|||
/* |
|||
* Editor.md |
|||
* @file languageszh-tw.js |
|||
* @version v1.1.0 |
|||
* @description A simple online markdown editor. |
|||
* @license MIT License |
|||
* @author Pandao |
|||
* {@link https://github.com/pandao/editor.md}
|
|||
* @updateTime 2015-02-15 |
|||
*/ |
|||
|
|||
(function(){ |
|||
var factory = function (exports) { |
|||
var lang = { |
|||
name : "zh-tw", |
|||
description : "開源在線Markdown編輯器<br/>A simple markdown doucment online editor.", |
|||
toolbar : { |
|||
undo : "撤銷（Ctrl+Z）", |
|||
redo : "重做（Ctrl+Y）", |
|||
bold : "粗體", |
|||
del : "刪除線", |
|||
italic : "斜體", |
|||
quote : "引用", |
|||
h1 : "標題1", |
|||
h2 : "標題2", |
|||
h3 : "標題3", |
|||
h4 : "標題4", |
|||
h5 : "標題5", |
|||
h6 : "標題6", |
|||
"list-ul" : "無序列表", |
|||
"list-ol" : "有序列表", |
|||
hr : "横线", |
|||
link : "链接", |
|||
anchor : "錨點", |
|||
image : "圖片", |
|||
code : "行內代碼", |
|||
"code-block-tab" : "預格式文本 / 代碼塊（縮進風格）", |
|||
"code-block" : "代碼塊（多語言風格）", |
|||
datetime : "日期時間", |
|||
watch : "關閉實時預覽", |
|||
unwatch : "開啟實時預覽", |
|||
preview : "全窗口預覽HTML（可按ESC還原）", |
|||
fullscreen : "全屏（可按ESC還原）", |
|||
clear : "清空", |
|||
info : "關於" + exports.title |
|||
}, |
|||
buttons : { |
|||
enter : "確定", |
|||
cancel : "取消" |
|||
}, |
|||
dialog : { |
|||
link : { |
|||
title : "添加鏈接", |
|||
url : "鏈接地址", |
|||
urlTitle : "鏈接標題", |
|||
urlEmpty : "錯誤：請填寫鏈接地址。", |
|||
titleEmpty : "錯誤：請填寫鏈接標題。" |
|||
}, |
|||
anchor : { |
|||
title : "添加錨點鏈接", |
|||
name : "錨點名稱", |
|||
url : "鏈接地址", |
|||
urlTitle : "鏈接標題", |
|||
nameEmpty: "錯誤：錨點名稱不能為空。", |
|||
titleEmpty : "錯誤：請填寫錨點鏈接標題。", |
|||
urlEmpty : "錯誤：請填寫錨點鏈接地址。" |
|||
}, |
|||
image : { |
|||
title : "添加圖片", |
|||
url : "圖片地址", |
|||
link : "圖片鏈接", |
|||
alt : "圖片描述", |
|||
uploadButton : "本地上傳", |
|||
imageURLEmpty : "錯誤：圖片地址不能為空。", |
|||
uploadFileEmpty : "錯誤：上傳的圖片不能為空！", |
|||
formatNotAllowed : "錯誤：只允許上傳圖片文件，允許上傳的圖片文件格式有：" |
|||
}, |
|||
tabCodeBlock : { |
|||
title : "添加預格式文本或代碼塊", |
|||
codeEmptyAlert : "錯誤：請填寫預格式文本或代碼的內容。" |
|||
}, |
|||
codeBlock : { |
|||
title : "添加代碼塊", |
|||
selectLabel : "代碼語言：", |
|||
selectDefaultText : "請語言代碼語言", |
|||
otherLanguage : "其他語言", |
|||
unselectedLanguageAlert : "錯誤：請選擇代碼所屬的語言類型。", |
|||
codeEmptyAlert : "錯誤：請填寫代碼內容。" |
|||
} |
|||
} |
|||
}; |
|||
|
|||
exports.defaults.lang = lang; |
|||
}; |
|||
|
|||
// CommonJS/Node.js
|
|||
if (typeof require === "function" && typeof exports === "object" && typeof module === "object") |
|||
{ |
|||
module.exports = factory; |
|||
} |
|||
else if (typeof define === "function") // AMD/CMD/Sea.js
|
|||
{ |
|||
if (define.amd) { // for Require.js
|
|||
|
|||
define(["editormd"], function(editormd) { |
|||
factory(editormd); |
|||
}); |
|||
|
|||
} else { // for Sea.js
|
|||
define(function(require) { |
|||
var editormd = require("../editormd"); |
|||
factory(editormd); |
|||
}); |
|||
} |
|||
} |
|||
else |
|||
{ |
|||
factory(window.editormd); |
|||
} |
|||
|
|||
})(); |
|||
@ -0,0 +1,2 @@ |
|||
/*! Editor.md v1.1.0 | languageszh-tw.min.js | A simple online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-02-15 */ |
|||
!function(){var e=function(e){var t={name:"zh-tw",description:"開源在線Markdown編輯器<br/>A simple markdown doucment online editor.",toolbar:{undo:"撤銷（Ctrl+Z）",redo:"重做（Ctrl+Y）",bold:"粗體",del:"刪除線",italic:"斜體",quote:"引用",h1:"標題1",h2:"標題2",h3:"標題3",h4:"標題4",h5:"標題5",h6:"標題6","list-ul":"無序列表","list-ol":"有序列表",hr:"横线",link:"链接",anchor:"錨點",image:"圖片",code:"行內代碼","code-block-tab":"預格式文本 / 代碼塊（縮進風格）","code-block":"代碼塊（多語言風格）",datetime:"日期時間",watch:"關閉實時預覽",unwatch:"開啟實時預覽",preview:"全窗口預覽HTML（可按ESC還原）",fullscreen:"全屏（可按ESC還原）",clear:"清空",info:"關於"+e.title},buttons:{enter:"確定",cancel:"取消"},dialog:{link:{title:"添加鏈接",url:"鏈接地址",urlTitle:"鏈接標題",urlEmpty:"錯誤：請填寫鏈接地址。",titleEmpty:"錯誤：請填寫鏈接標題。"},anchor:{title:"添加錨點鏈接",name:"錨點名稱",url:"鏈接地址",urlTitle:"鏈接標題",nameEmpty:"錯誤：錨點名稱不能為空。",titleEmpty:"錯誤：請填寫錨點鏈接標題。",urlEmpty:"錯誤：請填寫錨點鏈接地址。"},image:{title:"添加圖片",url:"圖片地址",link:"圖片鏈接",alt:"圖片描述",uploadButton:"本地上傳",imageURLEmpty:"錯誤：圖片地址不能為空。",uploadFileEmpty:"錯誤：上傳的圖片不能為空！",formatNotAllowed:"錯誤：只允許上傳圖片文件，允許上傳的圖片文件格式有："},tabCodeBlock:{title:"添加預格式文本或代碼塊",codeEmptyAlert:"錯誤：請填寫預格式文本或代碼的內容。"},codeBlock:{title:"添加代碼塊",selectLabel:"代碼語言：",selectDefaultText:"請語言代碼語言",otherLanguage:"其他語言",unselectedLanguageAlert:"錯誤：請選擇代碼所屬的語言類型。",codeEmptyAlert:"錯誤：請填寫代碼內容。"}}};e.defaults.lang=t};"function"==typeof require&&"object"==typeof exports&&"object"==typeof module?module.exports=e:"function"==typeof define?define.amd?define(["editormd"],function(t){e(t)}):define(function(t){var l=t("../editormd");e(l)}):e(window.editormd)}(); |
|||
@ -0,0 +1,2 @@ |
|||
[InternetShortcut] |
|||
URL=http://127.0.0.1:8888/ |
|||
@ -0,0 +1,140 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>自定义工具栏 - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../dist/css/editormd.css" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>自定义工具栏</h1> |
|||
<p>Custom toolbar (icons handler)</p> |
|||
</header> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">###自定义工具栏 |
|||
```javascript |
|||
$(function() { |
|||
var testEditor = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 640, |
|||
path : '../lib/', |
|||
toolbarIcons : function() { |
|||
return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2"] |
|||
}, |
|||
toolbarIconsClass : { |
|||
testIcon : "fa-gears" // 指定一个FontAawsome的图标类 |
|||
}, |
|||
toolbarIconTexts : { |
|||
testIcon2 : "测试按钮" // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签 |
|||
}, |
|||
|
|||
// 自定义工具栏按钮的事件处理 |
|||
toolbarHandlers : { |
|||
/** |
|||
* @param {Object} cm CodeMirror对象 |
|||
* @param {Object} icon 图标按钮jQuery元素对象 |
|||
* @param {Object} cursor CodeMirror的光标对象，可获取光标所在行和位置 |
|||
* @param {String} selection 编辑器选中的文本 |
|||
*/ |
|||
testIcon : function(cm, icon, cursor, selection) { |
|||
|
|||
//var cursor = cm.getCursor(); //获取当前光标对象，同cursor参数 |
|||
//var selection = cm.getSelection(); //获取当前选中的文本，同selection参数 |
|||
|
|||
// 替换选中文本，如果没有选中文本，则直接插入 |
|||
cm.replaceSelection("[" + selection + ":testIcon]"); |
|||
|
|||
// 如果当前没有选中的文本，将光标移到要输入的位置 |
|||
if(selection === "") { |
|||
cm.setCursor(cursor.line, cursor.ch + 1); |
|||
} |
|||
|
|||
// this == 当前editormd实例 |
|||
console.log("testIcon =>", this, cm, icon, cursor, selection); |
|||
}, |
|||
|
|||
testIcon2 : function(cm, icon, cursor, selection) { |
|||
cm.replaceSelection("[" + selection + ":testIcon2](" + icon.html() + ")"); |
|||
console.log("testIcon2 =>", this, icon.html()); |
|||
} |
|||
}, |
|||
|
|||
lang : { |
|||
toolbar : { |
|||
testIcon : "自定义按钮testIcon", // 自定义按钮的提示文本，即title属性 |
|||
testIcon2 : "自定义按钮testIcon2", |
|||
undo : "撤销 (Ctrl+Z)" |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
``` |
|||
</textarea> |
|||
</div> |
|||
</div> |
|||
|
|||
<script src="../lib/jquery.min.js"></script> |
|||
<script src="../src/js/editormd.js"></script> |
|||
<!-- 多语言和自定义工具栏的整合测试 --> |
|||
<script src="../src/js/languages/en.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function() { |
|||
var testEditor = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 640, |
|||
path : '../lib/', |
|||
toolbarIcons : function() { |
|||
return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2"] |
|||
}, |
|||
toolbarIconsClass : { |
|||
testIcon : "fa-gears" // 指定一个FontAawsome的图标类 |
|||
}, |
|||
toolbarIconTexts : { |
|||
testIcon2 : "测试按钮" // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签 |
|||
}, |
|||
|
|||
// 自定义工具栏按钮的事件处理 |
|||
toolbarHandlers : { |
|||
/** |
|||
* @param {Object} cm CodeMirror对象 |
|||
* @param {Object} icon 图标按钮jQuery元素对象 |
|||
* @param {Object} cursor CodeMirror的光标对象，可获取光标所在行和位置 |
|||
* @param {String} selection 编辑器选中的文本 |
|||
*/ |
|||
testIcon : function(cm, icon, cursor, selection) { |
|||
|
|||
//var cursor = cm.getCursor(); //获取当前光标对象，同cursor参数 |
|||
//var selection = cm.getSelection(); //获取当前选中的文本，同selection参数 |
|||
|
|||
// 替换选中文本，如果没有选中文本，则直接插入 |
|||
cm.replaceSelection("[" + selection + ":testIcon]"); |
|||
|
|||
// 如果当前没有选中的文本，将光标移到要输入的位置 |
|||
if(selection === "") { |
|||
cm.setCursor(cursor.line, cursor.ch + 1); |
|||
} |
|||
|
|||
// this == 当前editormd实例 |
|||
console.log("testIcon =>", this, cm, icon, cursor, selection); |
|||
}, |
|||
|
|||
testIcon2 : function(cm, icon, cursor, selection) { |
|||
cm.replaceSelection("[" + selection + ":testIcon2](" + icon.html() + ")"); |
|||
console.log("testIcon2 =>", this, icon.html()); |
|||
} |
|||
}, |
|||
|
|||
lang : { |
|||
toolbar : { |
|||
testIcon : "自定义按钮testIcon", // 自定义按钮的提示文本，即title属性 |
|||
testIcon2 : "自定义按钮testIcon2", |
|||
undo : "撤销 (Ctrl+Z)" |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,46 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>动态创建Editor.md - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../dist/css/editormd.css" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>动态创建Editor.md</h1> |
|||
<p>Dynamic create Editor.md</p> |
|||
<br/> |
|||
<div class="btns" style="margin:0;"> |
|||
<button id="create-btn">动态创建一个Editor.md</button> |
|||
<button id="remove-btn">移除Editor.md</button> |
|||
</div> |
|||
</header> |
|||
</div> |
|||
|
|||
<script src="../lib/jquery.min.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditormd; |
|||
|
|||
$(function() { |
|||
$("#create-btn").click(function(){ |
|||
$.getScript("../src/js/editormd.js", function() { |
|||
$("#layout").append("<div id=\"test-editormd\"></div>"); |
|||
|
|||
testEditormd = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 240, |
|||
markdown : "###动态创建Editor.md\n\nDynamic create Editor.md", |
|||
path : '../lib/' |
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
$("#remove-btn").click(function() { |
|||
testEditormd.editor.remove(); |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,85 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>Form get textarea value - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../dist/css/editormd.css" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>表单取值</h1> |
|||
<p>Form get textarea value.</p> |
|||
</header> |
|||
<form method="post" action="./php/post.php"> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">####表单取值 |
|||
|
|||
每个Editor.md的ID元素下都包含两个Textarea，一个保存Markdown源码，一个保存HTML源码，可以按需要获取相应的值，如下： |
|||
|
|||
```html |
|||
<div class="editormd" id="$id"> |
|||
<textarea class="editormd-markdown-textarea" name="$id-markdown-doc"></textarea> |
|||
|
|||
<!-- html textarea需要开启配置项 saveHTMLToTextarea == true --> |
|||
<textarea class="editormd-html-textarea" name="$id-html-code"></textarea> |
|||
</div> |
|||
``` |
|||
|
|||
####JS取值 |
|||
|
|||
```javascript |
|||
var testEditor = editormd("test-editormd", { |
|||
width : "90%", |
|||
height : 640, |
|||
saveHTMLToTextarea : true, |
|||
path : '../lib/' |
|||
}); |
|||
|
|||
testEditor.getMarkdown(); // 获取Markdown源码 |
|||
testEditor.getHTML(); // 获取Textarea保存的HTML源码 |
|||
testEditor.getPreviewedHTML(); // 获取预览窗口里的HTML，在开启watch且没有开启saveHTMLToTextarea时使用 |
|||
``` |
|||
|
|||
####后台取值 |
|||
|
|||
假设编辑器ID为`test-editormd`，以PHP为例： |
|||
|
|||
```php |
|||
<?php |
|||
header("Content-Type:text/html; charset=utf-8"); |
|||
|
|||
if (isset($_POST['submit'])) { |
|||
echo "<pre>"; |
|||
echo htmlspecialchars($_POST["test-editormd-markdown-doc"]); |
|||
echo "<br/><br/>"; |
|||
echo htmlspecialchars($_POST["test-editormd-html-code"]); |
|||
echo "</pre>"; |
|||
} |
|||
?> |
|||
```</textarea> |
|||
</div> |
|||
<div style="width:90%;margin: 10px auto;"> |
|||
<input type="submit" name="submit" value="提交表单 Submit" style="padding: 5px;" /> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
<script src="../lib/jquery.min.js"></script> |
|||
<script src="../src/js/editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function() { |
|||
var testEditor = editormd("test-editormd", { |
|||
width : "90%", |
|||
height : 640, |
|||
saveHTMLToTextarea : true, |
|||
path : '../lib/' |
|||
}); |
|||
|
|||
//testEditor.getMarkdown(); // 获取Markdown源码 |
|||
//testEditor.getHTML(); // 获取Textarea保存的HTML源码 |
|||
//testEditor.getPreviewedHTML(); // 获取预览窗口里的HTML，在开启watch且没有开启saveHTMLToTextarea时使用 |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,159 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>完整示例 - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../dist/css/editormd.css" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>完整示例</h1> |
|||
<p>开启HTML标签识别和解析、TeX(基于KaTeX)、流程图和时序/序列图支持;</p> |
|||
</header> |
|||
<div class="btns"> |
|||
<button id="show-btn">显示编辑器</button> |
|||
<button id="hide-btn">隐藏编辑器</button> |
|||
<button id="get-md-btn">获取Markdown(源码)</button> |
|||
<button id="get-html-btn">获取HTML(源码)</button> |
|||
<button id="watch-btn">开启实时预览</button> |
|||
<button id="unwatch-btn">关闭实时预览</button> |
|||
<button id="preview-btn">预览HTML(按ESC取消)</button> |
|||
<button id="fullscreen-btn">全屏(按ESC取消)</button> |
|||
<button id="show-toolbar-btn">显示工具栏</button> |
|||
<button id="close-toolbar-btn">关闭工具栏</button> |
|||
</div> |
|||
<div id="test-editormd"></div> |
|||
</div> |
|||
<script src="../lib/jquery.min.js"></script> |
|||
<script src="../src/js/editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditor; |
|||
|
|||
$(function() { |
|||
|
|||
$.get('test.md', function(md){ |
|||
testEditor = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 740, |
|||
path : '../lib/', |
|||
markdown : md, |
|||
//watch : false, // 关闭实时预览 |
|||
htmlDecode : true, // 开启HTML标签解析，为了安全性，默认不开启 |
|||
//toolbar : false, //关闭工具栏 |
|||
//previewCodeHighlight : false, // 关闭预览HTML的代码块高亮，默认开启 |
|||
tex : true, // 开启科学公式TeX语言支持，默认关闭 |
|||
flowChart : true, // 开启流程图支持，默认关闭 |
|||
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭, |
|||
//dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true |
|||
//dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true |
|||
//dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true |
|||
//dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1 |
|||
//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff |
|||
imageUpload : true, |
|||
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], |
|||
imageUploadURL : "./php/upload.php", |
|||
onload : function() { |
|||
console.log('onload', this); |
|||
//this.fullscreen(); |
|||
//this.unwatch(); |
|||
//this.watch().fullscreen(); |
|||
|
|||
//this.setMarkdown("#PHP"); |
|||
//this.width("100%"); |
|||
//this.height(480); |
|||
//this.resize("100%", 640); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
$("#show-btn").bind('click', function(){ |
|||
testEditor.show(); |
|||
}); |
|||
|
|||
$("#hide-btn").bind('click', function(){ |
|||
testEditor.hide(); |
|||
}); |
|||
|
|||
$("#get-md-btn").bind('click', function(){ |
|||
alert(testEditor.getMarkdown()); |
|||
}); |
|||
|
|||
$("#get-html-btn").bind('click', function() { |
|||
alert(testEditor.getHTML()); |
|||
}); |
|||
|
|||
$("#watch-btn").bind('click', function() { |
|||
testEditor.watch(); |
|||
}); |
|||
|
|||
$("#unwatch-btn").bind('click', function() { |
|||
testEditor.unwatch(); |
|||
}); |
|||
|
|||
$("#preview-btn").bind('click', function() { |
|||
testEditor.previewing(); |
|||
}); |
|||
|
|||
$("#fullscreen-btn").bind('click', function() { |
|||
testEditor.fullscreen(); |
|||
}); |
|||
|
|||
$("#show-toolbar-btn").bind('click', function() { |
|||
testEditor.showToolbar(); |
|||
}); |
|||
|
|||
$("#close-toolbar-btn").bind('click', function() { |
|||
testEditor.hideToolbar(); |
|||
}); |
|||
}); |
|||
|
|||
// IE不支持 |
|||
editormd.printAreaCount = 0; |
|||
editormd.printArea = function($obj) { |
|||
var prefix = "editormd-print-area-iframe"; |
|||
var iframeId = prefix + editormd.printAreaCount; |
|||
|
|||
if (editormd.printAreaCount > 0) |
|||
{ |
|||
document.body.removeChild(document.getElementById(iframeId)); |
|||
} |
|||
|
|||
editormd.printAreaCount++; |
|||
|
|||
var iframe = document.createElement("iframe"); |
|||
iframe.id = prefix + editormd.printAreaCount; |
|||
iframe.style.cssText = "position:absolute;width:0px;height:0px;top:-999px;left:-999px;"; |
|||
|
|||
document.body.appendChild(iframe); |
|||
|
|||
var iframeDocument = iframe.contentWindow.document; |
|||
var links = document.getElementsByTagName("link"); |
|||
|
|||
for (var i = 0, len = links.length; i < len; i++) |
|||
{ |
|||
var rel = links[i].getAttribute("rel").toLowerCase(); |
|||
|
|||
if (rel === "stylesheet") |
|||
{ |
|||
var css = "<link type=\"text/css\" rel=\"stylesheet\" href=\"" + links[i].getAttribute("href") + "\" >"; |
|||
iframeDocument.write(css); |
|||
} |
|||
} |
|||
|
|||
iframeDocument.write("<div class=\"" + $obj.className + "\">" + $obj.innerHTML + "</div>"); |
|||
iframeDocument.close(); |
|||
|
|||
var iframeWindow = iframe.contentWindow; |
|||
iframeWindow.close(); |
|||
iframeWindow.focus(); |
|||
iframeWindow.print(); |
|||
}; |
|||
|
|||
function preview() { |
|||
editormd.printArea(testEditor.previewContainer[0]); |
|||
} |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,57 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>识别和解析HTML标签 - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../dist/css/editormd.css" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>识别和解析HTML标签</h1> |
|||
<p>注：虽然此功能能极大地扩展Markdown语法，但也面临着安全上的风险，所以默认是不开启的。</p> |
|||
</header> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">####开启识别和解析HTML标签 |
|||
|
|||
配置项： |
|||
|
|||
{ |
|||
htmlDecode : true |
|||
} |
|||
|
|||
####示例 |
|||
|
|||
#####上标和下标 |
|||
|
|||
上标：X<sup>2</sup> |
|||
|
|||
下标：O<sub>2</sub> |
|||
|
|||
#####插入Flash |
|||
|
|||
<embed src="http://player.youku.com/player.php/sid/XMzA0MzIwMDgw/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> |
|||
|
|||
#####插入视频 |
|||
|
|||
李健《最好不相见》 |
|||
|
|||
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen></iframe></textarea> |
|||
</div> |
|||
</div> |
|||
|
|||
<script src="../lib/jquery.min.js"></script> |
|||
<script src="../src/js/editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function() { |
|||
var testEditor = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 720, |
|||
path : '../lib/', |
|||
htmlDecode : true |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,94 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>图片跨域上传示例 - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../dist/css/editormd.css" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout" style="height: 2000px;background: #f6f6f6;"> |
|||
<header> |
|||
<h1>图片跨域上传示例</h1> |
|||
<p>Image cross-domain upload example.</p> |
|||
</header> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">####跨域上传原理 |
|||
|
|||
利用iframe来实现，A站POST到B站，B站处理上传后再跳转回到A站的callback页面，callback页面此时在iframe内（即同域下），再通过window.parent就可以操作父页面的任意元素了。 |
|||
|
|||
####跨域上传示例PHP版 |
|||
|
|||
当前域名：blog.xxx.com/post.php |
|||
|
|||
```html |
|||
<form method="post" target="upload-iframe" enctype="multipart/form-data" action="http://static.xxx.com/uploader.php?callback=http://blog.xxx.com/upload-callback.html"> |
|||
<input type="file" name="file" accept="image/*" /> |
|||
<input type="submit" id="submit" value="开始上传" /> |
|||
</form> |
|||
<iframe name="upload-iframe" style="display:none;" frameborder="0"></iframe> |
|||
``` |
|||
|
|||
图片服务器：static.xxx.com/uploader.php |
|||
|
|||
```php |
|||
<?php |
|||
$file = 'uploads/' . $_FILES['file']['name']; |
|||
// 详细过程略 |
|||
move_uploaded_file($_FILES['file']['tmp_name'], $file); |
|||
|
|||
$location = $_GET['callback'].'?success=1&message=xxxxxxx&url=http://static.xxx.com/2015/02/15'.$file.'&temp='.date('ymdhis'); |
|||
|
|||
header('location:' . $location); |
|||
exit; |
|||
?> |
|||
``` |
|||
|
|||
当前域名：blog.xxx.com/upload-callback.html |
|||
|
|||
```html |
|||
<script type="text/javascript"> |
|||
var query = {}; |
|||
var urlParams = window.location.search.split('?')[1]; |
|||
urlParams = urlParams.split("&"); |
|||
|
|||
for (var i = 0; i< urlParams.length; i++) { |
|||
var param = urlParams[i].split("="); |
|||
query[param[0]] = param[1]; |
|||
} |
|||
|
|||
var imageDialog = window.parent.document.getElementById(query['dialog_id']); |
|||
//console.log(imageDialog, window.parent.document, window.parent, query); |
|||
</script> |
|||
```</textarea> |
|||
</div> |
|||
</div> |
|||
<script src="../lib/jquery.min.js"></script> |
|||
<script src="../src/js/editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function() { |
|||
var testEditor = editormd("test-editormd", { |
|||
width : "90%", |
|||
height : 640, |
|||
markdown : "", |
|||
path : '../lib/', |
|||
imageUpload : true, |
|||
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], |
|||
imageUploadURL : "http://192.168.1.2/editor.md/examples/php/cross-domain-upload.php", |
|||
crossDomainUpload : true, |
|||
uploadCallbackURL : "http://localhost/editor.md/examples/php/upload_callback.php" |
|||
|
|||
/* |
|||
跨域时，上传的图片服务器后台只需要返回一个跳转URL并跳转到原页面同域下的callback页面，结构如下： |
|||
{ |
|||
success : 0 | 1, // 0表示上传失败，1表示上传成功 |
|||
message : "提示的信息，上传成功或上传失败及错误信息等。", |
|||
dialog_id : $_GET['dialog_id'], |
|||
url : "远程图片地址" // 上传成功时才返回 |
|||
} |
|||
*/ |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,45 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>图片上传示例 - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../dist/css/editormd.css" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout" style="height: 2000px;background: #f6f6f6;"> |
|||
<header> |
|||
<h1>图片上传示例</h1> |
|||
</header> |
|||
<div id="test-editormd"></div> |
|||
</div> |
|||
<script src="../lib/jquery.min.js"></script> |
|||
<script src="../src/js/editormd.js"></script> |
|||
<script type="text/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 : true, |
|||
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], |
|||
imageUploadURL : "./php/upload.php", |
|||
|
|||
/* |
|||
上传的后台只需要返回一个JSON数据，结构如下： |
|||
{ |
|||
success : 0 | 1, // 0表示上传失败，1表示上传成功 |
|||
message : "提示的信息，上传成功或上传失败及错误信息等。" |
|||
} |
|||
*/ |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 37 KiB |
@ -0,0 +1,74 @@ |
|||
define(function(require){ |
|||
var $ = require("jquery"); |
|||
var editormd = require("editormd"); |
|||
|
|||
require("../../src/js/languages/en"); // 加载英语语言包
|
|||
|
|||
console.log($, editormd); |
|||
|
|||
$.get("./test.md", function(md){ |
|||
testEditor = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 640, |
|||
path : '../lib/', |
|||
markdown : md, |
|||
//toolbar : false, //关闭工具栏
|
|||
htmlDecode : true, // 开启HTML标签解析，为了安全性，默认不开启
|
|||
tex : true, // 开启科学公式TeX语言支持，默认关闭
|
|||
//previewCodeHighlight : false, // 关闭预览窗口的代码高亮，默认开启
|
|||
flowChart : true, // 疑似Sea.js与Raphael.js有冲突，必须先加载Raphael.js，Editor.md才能在Sea.js下正常进行；
|
|||
sequenceDiagram : true, // 同上
|
|||
onload : function() { |
|||
console.log('onload', this); |
|||
//this.fullscreen();
|
|||
//this.unwatch();
|
|||
//this.watch().fullscreen();
|
|||
|
|||
//this.setMarkdown("#PHP");
|
|||
//this.width("100%");
|
|||
//this.height(480);
|
|||
//this.resize("100%", 640);
|
|||
} |
|||
}); |
|||
}); |
|||
|
|||
$("#show-btn").bind('click', function(){ |
|||
testEditor.show(); |
|||
}); |
|||
|
|||
$("#hide-btn").bind('click', function(){ |
|||
testEditor.hide(); |
|||
}); |
|||
|
|||
$("#get-md-btn").bind('click', function(){ |
|||
alert(testEditor.getMarkdown()); |
|||
}); |
|||
|
|||
$("#get-html-btn").bind('click', function() { |
|||
alert(testEditor.getHTML()); |
|||
}); |
|||
|
|||
$("#watch-btn").bind('click', function() { |
|||
testEditor.watch(); |
|||
}); |
|||
|
|||
$("#unwatch-btn").bind('click', function() { |
|||
testEditor.unwatch(); |
|||
}); |
|||
|
|||
$("#preview-btn").bind('click', function() { |
|||
testEditor.previewing(); |
|||
}); |
|||
|
|||
$("#fullscreen-btn").bind('click', function() { |
|||
testEditor.fullscreen(); |
|||
}); |
|||
|
|||
$("#show-toolbar-btn").bind('click', function() { |
|||
testEditor.showToolbar(); |
|||
}); |
|||
|
|||
$("#close-toolbar-btn").bind('click', function() { |
|||
testEditor.hideToolbar(); |
|||
}); |
|||
}); |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,54 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>多个Editor.md并存 - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../dist/css/editormd.css" /> |
|||
<style> |
|||
h3 { |
|||
width : 90%; |
|||
margin: 0 auto 15px; |
|||
} |
|||
|
|||
.editormd { |
|||
margin: 20px auto; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>多个Editor.md并存</h1> |
|||
<p>Multi Editor.md</p> |
|||
<br/> |
|||
</header> |
|||
<h3>Editor.md A</h3> |
|||
<div id="test-editormd"></div> |
|||
<h3>Editor.md B</h3> |
|||
<div id="test-editormd2"></div> |
|||
</div> |
|||
|
|||
<script src="../lib/jquery.min.js"></script> |
|||
<script src="../src/js/editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditormd, testEditormd2; |
|||
|
|||
$(function() { |
|||
testEditormd = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 480, |
|||
markdown : "####Editor.md A", |
|||
path : '../lib/' |
|||
}); |
|||
|
|||
testEditormd2 = editormd("test-editormd2", { |
|||
width: "90%", |
|||
height: 480, |
|||
markdown : "####Editor.md B", |
|||
path : '../lib/' |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,89 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>多语言支持 - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../dist/css/editormd.css" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>多语言支持（l18n）</h1> |
|||
<p>multi-languages for l18n. |
|||
<select id="lang-select"> |
|||
<option selected="selected">Languages</option> |
|||
<option value="en">English (en)</option> |
|||
<option value="zh-tw">繁體中文 (zh-tw)</option> |
|||
<option value="zh-cn">简体中文 (zh-cn)</option> |
|||
</select> |
|||
</p> |
|||
</header> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">###多语言支持（l18n） |
|||
|
|||
目前支持三种语言：简体中文、繁體中文、English，默认为简体中文 (zh-cn default)。 |
|||
|
|||
```html |
|||
<!-- English --> |
|||
<script src="../dist/js/languages/en.js"></script> |
|||
|
|||
<!-- 繁體中文 --> |
|||
<script src="../dist/js/languages/zh-tw.js"></script> |
|||
|
|||
<style> |
|||
body{background:red;} |
|||
</style> |
|||
``` |
|||
</textarea> |
|||
</div> |
|||
</div> |
|||
<script src="../lib/jquery.min.js"></script> |
|||
<script src="../src/js/editormd.js"></script> |
|||
<!--<script src="../src/js/languages/en.js"></script> |
|||
<script src="../src/js/languages/zh-tw.js"></script> --> |
|||
<script type="text/javascript"> |
|||
$(function() { |
|||
var testEditor = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 640, |
|||
path : '../lib/' |
|||
}); |
|||
|
|||
//console.log(editormd.defaults.lang); |
|||
var lang = "zh-cn"; |
|||
|
|||
// 动态加载语言包 |
|||
// Dynamic load language package |
|||
$("#lang-select").change(function() { |
|||
var value = $(this).val(); |
|||
var path = "../src/js/languages/"; |
|||
|
|||
if (value == "zh-cn") |
|||
{ |
|||
location.reload(); |
|||
} |
|||
else |
|||
{ |
|||
editormd.loadScript(path + value, function() { |
|||
testEditor.lang = editormd.defaults.lang; |
|||
|
|||
// 只重建涉及语言包的部分，如工具栏、弹出对话框等 |
|||
testEditor.recreateEditor(); |
|||
|
|||
// 整个编辑器重建，预览HTML会重新生成，出现闪动 |
|||
//testEditor = editormd("test-editormd", { |
|||
//width: "90%", |
|||
//height: 640, |
|||
//path : '../lib/' |
|||
//}); |
|||
|
|||
lang = value; |
|||
console.log(lang, value, editormd.defaults.lang); |
|||
}); |
|||
} |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,54 @@ |
|||
<?php |
|||
|
|||
/* |
|||
* PHP cross-domain upload demo for Editor.md |
|||
* |
|||
* @FileName: upload.php |
|||
* @Auther: Pandao |
|||
* @E-mail: pandao@vip.qq.com |
|||
* @CreateTime: 2015-02-15 19:12:11 |
|||
* @UpdateTime: 2015-02-15 20:47:52 |
|||
* Copyright@2015 Editor.md all right reserved. |
|||
*/ |
|||
|
|||
header("Content-Type:text/html; charset=utf-8"); |
|||
header("Access-Control-Allow-Origin: *"); |
|||
|
|||
require("editormd.uploader.class.php"); |
|||
|
|||
error_reporting(E_ALL & ~E_NOTICE); |
|||
|
|||
$path = __DIR__ . DIRECTORY_SEPARATOR; |
|||
$url = dirname($_SERVER['PHP_SELF']) . '/'; |
|||
$savePath = realpath($path . '../uploads/') . DIRECTORY_SEPARATOR; |
|||
$saveURL = '//'. $_SERVER['SERVER_NAME'] . $url . '../uploads/'; // 本例是演示跨域上传所以加上$_SERVER['SERVER_NAME'] |
|||
|
|||
/*echo "<pre>"; |
|||
print_r($_SERVER); |
|||
echo $saveURL; |
|||
echo "</pre>";*/ |
|||
|
|||
$formats = array( |
|||
'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp') |
|||
); |
|||
|
|||
$name = 'editormd-image-file'; // file input name |
|||
|
|||
if (isset($_FILES[$name])) |
|||
{ |
|||
$imageUploader = new EditorMdUploader($savePath, $saveURL, $formats['image'], false); // Ymdhis表示按日期生成文件名，利用date()函数 |
|||
|
|||
$imageUploader->config(array( |
|||
'maxSize' => 1024, // 允许上传的最大文件大小，以KB为单位，默认值为1024 |
|||
'cover' => true // 是否覆盖同名文件，默认为true |
|||
)); |
|||
|
|||
$imageUploader->redirect = true; |
|||
$imageUploader->redirectURL = $_GET['callback'] . '?dialog_id=' . $_GET['dialog_id'] . '&temp=' . date('ymdhis'); |
|||
|
|||
if ($imageUploader->upload($name)) |
|||
{ |
|||
$imageUploader->message('上传成功！', 1); |
|||
} |
|||
} |
|||
?> |
|||
@ -0,0 +1,327 @@ |
|||
<?php |
|||
|
|||
/** |
|||
* |
|||
* Editor.md PHP简易上传类（仅供演示用，生产环境使用还需谨慎考虑） |
|||
* |
|||
* @FileName: editormd.uploader.class.php |
|||
* @Auther: Pandao |
|||
* @E-mail: pandao@vip.qq.com |
|||
* @CreateTime: 2015-02-13 23:31:32 |
|||
* @UpdateTime: 2015-02-15 20:49:52 |
|||
* Copyright@2015 Editor.md all right reserved. |
|||
*/ |
|||
|
|||
class EditorMdUploader |
|||
{ |
|||
public $files; // $_FILES数组 |
|||
public $fileExit; // 文件扩展名 |
|||
public $saveName; // 最终保存的文件名 |
|||
public $saveURL; // 最终保存URL地址 |
|||
public $savePath; // 保存本地文件路径 |
|||
public $randomLength = ''; // 生成随机文件名的长度，当为日期时为日期的格式 |
|||
public $randomNameType = 1; // 生成随机的形式, NULL为保留原文件名, 1生成随机字符串, 2生成日期文件名 |
|||
public $formats = array( // 允许上传的文件格式 |
|||
'gif', 'jpg', 'jpeg', 'png', 'bmp' |
|||
); |
|||
public $maxSize = 1024; // 最大上传文件大小，单位KB |
|||
public $cover = true; // 是否覆盖同名文件, 1覆盖,0不覆盖 |
|||
public $redirect = false; // 是否进行URL跳转 |
|||
public $redirectURL = ""; // 上传成功或出错后要转到的URL |
|||
public $errors = array( // 错误信息 |
|||
'empty' => '上传文件不能为空', |
|||
'format' =>'上传的文件格式不符合规定', |
|||
'maxsize' => '上传的文件太大', |
|||
'unwritable' => '保存目录不可写，请更改权限', |
|||
'not_exist' => '保存目录不存在', |
|||
'same_file' => '已经有相同的文件存在' |
|||
); |
|||
|
|||
/** |
|||
* 构造函数，初始化对象 |
|||
* |
|||
* @access public |
|||
* @param string $savePath 最终保存的本地路径 |
|||
* @param string $saveURL 最终保存的URL地址 |
|||
* @param string $formats 允许上传的文件格式 |
|||
* @param Number $randomNameType 是否生成随机文件名及形式 |
|||
* @param Intiger/string $randomLength 生成随机文件名字符的长度 |
|||
* @param boolean $cover 是否覆盖相同文件 |
|||
* @param Intiger $maxSize 允许最大的上传文件大小，以KB为单位 |
|||
* @return viod |
|||
*/ |
|||
|
|||
public function __construct($savePath, $saveURL, $formats, $randomNameType = 1, $randomLength = '', $cover = true, $maxSize = 1024) |
|||
{ |
|||
$this->savePath = $savePath; |
|||
$this->saveURL = $saveURL; |
|||
$this->formats = $formats; |
|||
$this->maxSize = $maxSize; |
|||
$this->cover = $cover; |
|||
$this->randomNameType = $randomNameType; |
|||
$this->randomLength = $randomLength; |
|||
} |
|||
|
|||
/** |
|||
* 配置参数函数 |
|||
* |
|||
* @access public |
|||
* @param array $configs 配置项数组 |
|||
* @return void |
|||
*/ |
|||
|
|||
public function config($configs) |
|||
{ |
|||
foreach($configs as $key => $value) |
|||
{ |
|||
$this->$key = $value; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 执行文件上传 |
|||
* |
|||
* @access public |
|||
* @param string $name fileInput's name |
|||
* @return boolean 返回是否上传成功的布尔值 |
|||
*/ |
|||
|
|||
public function upload($name) |
|||
{ |
|||
if(empty($_FILES[$name]['name'])) //上传文件为空时 |
|||
{ |
|||
$this->message($this->errors['empty']); |
|||
} |
|||
|
|||
$this->files = $_FILES[$name]; |
|||
|
|||
if(!file_exists($this->savePath)) //目录不存在 |
|||
{ |
|||
$this->message($this->errors['not_exist']); |
|||
} |
|||
|
|||
if(!is_writable($this->savePath)) //目录不可写 |
|||
{ |
|||
$this->message($this->errors['unwritable']); |
|||
} |
|||
|
|||
$this->fileExt = $this->getFileExt($this->files["name"]); //取得扩展名 |
|||
|
|||
$this->setSeveName(); |
|||
|
|||
return $this->moveFile(); |
|||
} |
|||
|
|||
/** |
|||
* 检查并移动上传文件 |
|||
* |
|||
* @access private |
|||
* @return boolean |
|||
*/ |
|||
|
|||
private function moveFile() |
|||
{ |
|||
$files = $this->files; |
|||
|
|||
if ($this->formats != "" && !in_array($this->fileExt, $this->formats)) |
|||
{ |
|||
$formats = implode(',', $this->formats); |
|||
$message = "您上传的文件" . $files["name"] . "是" . $this->fileExt . "格式的，系统不允许上传，您只能上传" . $formats . "格式的文件。"; |
|||
$this->message($message); |
|||
} |
|||
|
|||
if ($files["size"] / 1024 > $this->maxSize) |
|||
{ |
|||
$message = "您上传的 " . $files["name"] . "，文件大小超出了系统限定值" . $this->maxSize . " KB，不能上传。"; |
|||
$this->message($message); |
|||
} |
|||
|
|||
if (!$this->cover) //当不能覆盖时 |
|||
{ |
|||
if(file_exists($this->savePath.$this->saveName)) //有相同的文件存在 |
|||
{ |
|||
$this->message($this->saveName . $this->errors['same_file']); |
|||
} |
|||
} |
|||
|
|||
if (!@move_uploaded_file($files["tmp_name"], iconv("utf-8", "gbk", $this->savePath . $this->saveName))) |
|||
{ |
|||
switch($files["errors"]) |
|||
{ |
|||
case '0': |
|||
$message = "文件上传成功"; |
|||
break; |
|||
|
|||
case '1': |
|||
$message = "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值"; |
|||
break; |
|||
|
|||
case '2': |
|||
$message = "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值"; |
|||
break; |
|||
|
|||
case '3': |
|||
$message = "文件只有部分被上传"; |
|||
break; |
|||
|
|||
case '4': |
|||
$message = "没有文件被上传"; |
|||
break; |
|||
|
|||
case '6': |
|||
$message = "找不到临时目录"; |
|||
break; |
|||
|
|||
case '7': |
|||
$message = "写文件到硬盘时出错"; |
|||
break; |
|||
|
|||
case '8': |
|||
$message = "某个扩展停止了文件的上传"; |
|||
break; |
|||
|
|||
case '999': |
|||
default: |
|||
$message = "未知错误，请检查文件是否损坏、是否超大等原因。"; |
|||
break; |
|||
} |
|||
|
|||
$this->message($message); |
|||
} |
|||
|
|||
@unlink($files["tmp_name"]); //删除临时文件 |
|||
|
|||
return true; |
|||
} |
|||
|
|||
/** |
|||
* 生成随机文件名函数 |
|||
* |
|||
* @access private |
|||
* @return string $fileName 返回生成的文件名字符串 |
|||
*/ |
|||
|
|||
private function randomFileName() |
|||
{ |
|||
if ($this->randomNameType == 1) // 生成时间格式文件名 |
|||
{ |
|||
date_default_timezone_set('PRC'); //设置时区 |
|||
|
|||
$date = date($this->randomLength); |
|||
$fileName = $date . "_" . mt_rand(10000, 99999); |
|||
} |
|||
elseif ($this->randomNameType == 2) // 生成随机字符文件名 |
|||
{ |
|||
$chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz'; |
|||
$max = strlen($chars) - 1; |
|||
mt_srand((double)microtime() * 1000000); |
|||
|
|||
for($i = 0; $i < $this->randomLength; $i++) |
|||
{ |
|||
$fileName .= $chars[mt_rand(0, $max)]; |
|||
} |
|||
} |
|||
else |
|||
{ |
|||
$fileName = ''; |
|||
} |
|||
|
|||
return $fileName; |
|||
} |
|||
|
|||
/** |
|||
* 组成最终保存的完整路径及文件名 |
|||
* |
|||
* @access private |
|||
* @return void |
|||
*/ |
|||
|
|||
private function setSeveName() |
|||
{ |
|||
$this->saveName = $this->randomFileName(); |
|||
|
|||
if($this->saveName == '') //如果没生成随机文件名，就保留原文件名 |
|||
{ |
|||
$this->saveName = $this->files['name']; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 取得保存的文件名，用于数据库存储 |
|||
* |
|||
* @access public |
|||
* @return string |
|||
*/ |
|||
|
|||
public function getSeveName() |
|||
{ |
|||
return $this->saveName; |
|||
} |
|||
|
|||
/** |
|||
* 获取文件后缀名函数 |
|||
* |
|||
* @access public |
|||
* @return string |
|||
*/ |
|||
|
|||
public function getFileExt($fileName) |
|||
{ |
|||
return trim(strtolower(substr(strrchr($fileName, '.'), 1))); |
|||
} |
|||
|
|||
/** |
|||
* 上传成功或出错后跳转 |
|||
* |
|||
* @access public |
|||
* @param array $configs 配置项数组 |
|||
* @return void |
|||
*/ |
|||
|
|||
public function redirect() |
|||
{ |
|||
header('location: ' . $this->redirectURL); |
|||
} |
|||
|
|||
/** |
|||
* 错误提示函数 |
|||
* |
|||
* @access public |
|||
* @return void |
|||
*/ |
|||
|
|||
public function message($message, $success = 0) |
|||
{ |
|||
$array = array( |
|||
'success' => $success |
|||
); |
|||
|
|||
$url = $this->saveURL . $this->saveName; |
|||
|
|||
// 适用于跨域上传时，跳转到中介页面等 |
|||
if ($this->redirect) |
|||
{ |
|||
$this->redirectURL .= "&success=" . $success . "&message=" . $message; |
|||
|
|||
if ($success == 1) |
|||
{ |
|||
$this->redirectURL .= '&url=' . $url; |
|||
} |
|||
|
|||
$this->redirect(); |
|||
} |
|||
else |
|||
{ |
|||
if ($success == 1) |
|||
{ |
|||
$array['url'] = $url; |
|||
} |
|||
else |
|||
{ |
|||
$array['message'] = $message; |
|||
} |
|||
|
|||
echo json_encode($array); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
<?php |
|||
header("Content-Type:text/html; charset=utf-8"); |
|||
|
|||
if (isset($_POST['submit'])) { |
|||
echo "<pre>"; |
|||
echo htmlspecialchars($_POST["test-editormd-markdown-doc"]); |
|||
echo "<br/><br/>"; |
|||
echo htmlspecialchars($_POST["test-editormd-html-code"]); |
|||
echo "</pre>"; |
|||
} |
|||
|
|||
exit; |
|||
?> |
|||
@ -0,0 +1,46 @@ |
|||
<?php |
|||
|
|||
/* |
|||
* PHP upload demo for Editor.md |
|||
* |
|||
* @FileName: upload.php |
|||
* @Auther: Pandao |
|||
* @E-mail: pandao@vip.qq.com |
|||
* @CreateTime: 2015-02-13 23:20:04 |
|||
* @UpdateTime: 2015-02-14 14:52:50 |
|||
* Copyright@2015 Editor.md all right reserved. |
|||
*/ |
|||
|
|||
header("Content-Type:text/html; charset=utf-8"); |
|||
header("Access-Control-Allow-Origin: *"); |
|||
|
|||
require("editormd.uploader.class.php"); |
|||
|
|||
error_reporting(E_ALL & ~E_NOTICE); |
|||
|
|||
$path = __DIR__ . DIRECTORY_SEPARATOR; |
|||
$url = dirname($_SERVER['PHP_SELF']) . '/'; |
|||
$savePath = realpath($path . '../uploads/') . DIRECTORY_SEPARATOR; |
|||
$saveURL = $url . '../uploads/'; |
|||
|
|||
$formats = array( |
|||
'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp') |
|||
); |
|||
|
|||
$name = 'editormd-image-file'; |
|||
|
|||
if (isset($_FILES[$name])) |
|||
{ |
|||
$imageUploader = new EditorMdUploader($savePath, $saveURL, $formats['image'], false); // Ymdhis表示按日期生成文件名，利用date()函数 |
|||
|
|||
$imageUploader->config(array( |
|||
'maxSize' => 1024, // 允许上传的最大文件大小，以KB为单位，默认值为1024 |
|||
'cover' => true // 是否覆盖同名文件，默认为true |
|||
)); |
|||
|
|||
if ($imageUploader->upload($name)) |
|||
{ |
|||
$imageUploader->message('上传成功！', 1); |
|||
} |
|||
} |
|||
?> |
|||
@ -0,0 +1,39 @@ |
|||
<?php |
|||
header("Content-Type:text/html; charset=utf-8"); |
|||
?> |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
</head> |
|||
<body> |
|||
<!-- |
|||
这是同域下的callback页面，本页面在iframe内，所以只要通过window.parent就能操作父窗口的元素 |
|||
--> |
|||
<script type="text/javascript"> |
|||
var query = {}; |
|||
var urlParams = window.location.search.split('?')[1]; |
|||
urlParams = urlParams.split("&"); |
|||
|
|||
for (var i = 0; i< urlParams.length; i++) |
|||
{ |
|||
var param = urlParams[i].split("="); |
|||
query[param[0]] = param[1]; |
|||
} |
|||
|
|||
var imageDialog = window.parent.document.getElementById(query['dialog_id']); |
|||
//console.log(imageDialog, window.parent.document, window.parent, query); |
|||
|
|||
if (query['success'] === '1') |
|||
{ |
|||
imageDialog.querySelector("[data-url]").value = query['url']; |
|||
} |
|||
else |
|||
{ |
|||
alert(query['message']); |
|||
} |
|||
|
|||
location.href = "about:blank"; |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,54 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>只读模式 - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../dist/css/editormd.css" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>只读模式</h1> |
|||
<p>Editor.md read only</p> |
|||
</header> |
|||
<div id="test-editormd" class="editormd-onlyread"> |
|||
<textarea style="display:none;">###设置只读模式 |
|||
|
|||
```javascript |
|||
var testEditor; |
|||
|
|||
$(function() { |
|||
testEditor = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 540, |
|||
path : '../lib/', |
|||
//watch : false, // 禁用实时预览 |
|||
readOnly : true, |
|||
styleActiveLine : false, // 禁止高亮显示当前行 |
|||
//lineNumbers : false // 隐藏行号 |
|||
}); |
|||
}); |
|||
``` |
|||
</textarea> |
|||
</div> |
|||
</div> |
|||
<script src="../lib/jquery.min.js"></script> |
|||
<script src="../src/js/editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditor; |
|||
|
|||
$(function() { |
|||
testEditor = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 540, |
|||
path : '../lib/', |
|||
//watch : false, // 禁用实时预览 |
|||
readOnly : true, |
|||
styleActiveLine : false, // 禁止高亮显示当前行 |
|||
//lineNumbers : false // 隐藏行号 |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,107 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>插入字符/设置和获取光标位置/设置、获取和替换选中的文本 - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../dist/css/editormd.css" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>插入字符/设置和获取光标位置/设置、获取和替换选中的文本</h1> |
|||
<p>Insert value & Set/Get cursor & Set/Get/Replace selection</p> |
|||
<br/> |
|||
<div class="btns" style="margin:0"> |
|||
<button id="btn1">设置光标位置(line:1, ch:2)</button> |
|||
<button id="btn2">获取光标位置</button> |
|||
<button id="btn3">设置选中文本({line:1, ch:0}, {line:5, ch:100})</button> |
|||
<button id="btn4">获取选中文本</button> |
|||
<button id="btn5">替换选中文本为"$$$$$$$$$"</button> |
|||
<button id="btn6">在光标处插入"????"</button> |
|||
</div> |
|||
</header> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">```javascript |
|||
var testEditormd; |
|||
|
|||
$(function() { |
|||
testEditormd = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 640, |
|||
path : '../lib/' |
|||
}); |
|||
}); |
|||
|
|||
$("#btn1").click(function(){ |
|||
testEditormd.setCursor({line:1, ch:2}); |
|||
}); |
|||
|
|||
$("#btn2").click(function(){ |
|||
console.log("getCursor =>", testEditormd.getCursor()); |
|||
}); |
|||
|
|||
$("#btn3").click(function(){ |
|||
testEditormd.setSelection({line:1, ch:0}, {line:5, ch:100}); |
|||
}); |
|||
|
|||
$("#btn4").click(function(){ |
|||
console.log("getSelection =>", testEditormd.getSelection()); |
|||
}); |
|||
|
|||
$("#btn5").click(function(){ |
|||
testEditormd.replaceSelection("$$$$$$$$$"); |
|||
}); |
|||
|
|||
$("#btn6").click(function(){ |
|||
testEditormd.insertValue("????"); |
|||
}); |
|||
``` |
|||
</textarea> |
|||
</div> |
|||
</div> |
|||
<script src="../lib/jquery.min.js"></script> |
|||
<script src="../src/js/editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditormd; |
|||
|
|||
$(function() { |
|||
testEditormd = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 640, |
|||
path : '../lib/' |
|||
}); |
|||
|
|||
$("#btn1").click(function(){ |
|||
testEditormd.setCursor({line:1, ch:2}); |
|||
testEditormd.focus(); |
|||
}); |
|||
|
|||
$("#btn2").click(function(){ |
|||
console.log("getCursor =>", testEditormd.getCursor()); |
|||
testEditormd.focus(); |
|||
}); |
|||
|
|||
$("#btn3").click(function(){ |
|||
testEditormd.setSelection({line:1, ch:0}, {line:5, ch:100}); |
|||
testEditormd.focus(); |
|||
}); |
|||
|
|||
$("#btn4").click(function(){ |
|||
console.log("getSelection =>", testEditormd.getSelection()); |
|||
testEditormd.focus(); |
|||
}); |
|||
|
|||
$("#btn5").click(function(){ |
|||
testEditormd.replaceSelection("$$$$$$$$$"); |
|||
testEditormd.focus(); |
|||
}); |
|||
|
|||
$("#btn6").click(function(){ |
|||
testEditormd.insertValue("????"); |
|||
testEditormd.focus(); |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,96 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>Use Zepto.js - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../dist/css/editormd.css" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>Use Zepto.js</h1> |
|||
</header> |
|||
<div class="btns"> |
|||
<button id="show-btn">显示编辑器</button> |
|||
<button id="hide-btn">隐藏编辑器</button> |
|||
<button id="get-md-btn">获取Markdown(源码)</button> |
|||
<button id="get-html-btn">获取HTML(源码)</button> |
|||
<button id="watch-btn">开启实时预览</button> |
|||
<button id="unwatch-btn">关闭实时预览</button> |
|||
<button id="preview-btn">预览HTML(按ESC取消)</button> |
|||
<button id="fullscreen-btn">全屏(按ESC取消)</button> |
|||
<button id="show-toolbar-btn">显示工具栏</button> |
|||
<button id="close-toolbar-btn">关闭工具栏</button> |
|||
</div> |
|||
<div class="editormd" id="test-editormd"> |
|||
<script type="text/markdown">###Hello world!</script> |
|||
</div> |
|||
</div> |
|||
<script src="js/zepto.min.js"></script> |
|||
<script src="../src/js/editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditor; |
|||
var jQuery = Zepto; // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以想支持flowChart/sequenceDiagram就得加上这一句 |
|||
|
|||
$(function() { |
|||
$.get("./test.md", function(md){ |
|||
testEditor = editormd("test-editormd", { |
|||
width : "90%", |
|||
height : 720, |
|||
path : '../lib/', |
|||
markdown : md, |
|||
htmlDecode : true, // 开启HTML标签解析，为了安全性，默认不开启 |
|||
tex : true, // 开启科学公式TeX语言支持，默认关闭 |
|||
//previewCodeHighlight : false, // 关闭预览窗口的代码高亮，默认开启 |
|||
flowChart : true, // 疑似Sea.js与Raphael.js有冲突，必须先加载Raphael.js，Editor.md才能在Sea.js下正常进行； |
|||
sequenceDiagram : true, // 同上 |
|||
onload : function() { |
|||
console.log("onload =>", this, this.id, this.settings); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
$("#show-btn").bind('click', function(){ |
|||
testEditor.show(); |
|||
}); |
|||
|
|||
$("#hide-btn").bind('click', function(){ |
|||
testEditor.hide(); |
|||
}); |
|||
|
|||
$("#get-md-btn").bind('click', function(){ |
|||
alert(testEditor.getMarkdown()); |
|||
}); |
|||
|
|||
$("#get-html-btn").bind('click', function() { |
|||
alert(testEditor.getHTML()); |
|||
}); |
|||
|
|||
$("#watch-btn").bind('click', function() { |
|||
testEditor.watch(); |
|||
}); |
|||
|
|||
$("#unwatch-btn").bind('click', function() { |
|||
testEditor.unwatch(); |
|||
}); |
|||
|
|||
$("#preview-btn").bind('click', function() { |
|||
testEditor.previewing(); |
|||
}); |
|||
|
|||
$("#fullscreen-btn").bind('click', function() { |
|||
testEditor.fullscreen(); |
|||
}); |
|||
|
|||
$("#show-toolbar-btn").bind('click', function() { |
|||
testEditor.showToolbar(); |
|||
}); |
|||
|
|||
$("#close-toolbar-btn").bind('click', function() { |
|||
testEditor.hideToolbar(); |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because it is too large
@ -0,0 +1,110 @@ |
|||
(function(){ |
|||
var factory = function (exports) { |
|||
var lang = { |
|||
name : "en", |
|||
description : "A simple markdown doucment online editor.", |
|||
toolbar : { |
|||
undo : "Undo(Ctrl+Z)", |
|||
redo : "Redo(Ctrl+Y)", |
|||
bold : "Bold", |
|||
del : "Strikethrough", |
|||
italic : "Italic", |
|||
quote : "Block quote", |
|||
h1 : "Heading 1", |
|||
h2 : "Heading 2", |
|||
h3 : "Heading 3", |
|||
h4 : "Heading 4", |
|||
h5 : "Heading 5", |
|||
h6 : "Heading 6", |
|||
"list-ul" : "Unordered list", |
|||
"list-ol" : "Ordered list", |
|||
hr : "Horizontal line", |
|||
link : "Link", |
|||
anchor : "Anchor", |
|||
image : "Image", |
|||
code : "Code inline", |
|||
"code-block-tab" : "Preformatted text / Code block (Tab indent)", |
|||
"code-block" : "Code block (Multi-languages)", |
|||
datetime : "Datetime", |
|||
watch : "Unwatch", |
|||
unwatch : "Watch", |
|||
preview : "HTML Preview (Enter ESC exit)", |
|||
fullscreen : "Fullscreen (Enter ESC exit)", |
|||
clear : "Clear", |
|||
info : "About " + exports.title |
|||
}, |
|||
buttons : { |
|||
enter : "Enter", |
|||
cancel : "Cancel" |
|||
}, |
|||
dialog : { |
|||
link : { |
|||
title : "Link", |
|||
url : "Address", |
|||
urlTitle : "Title", |
|||
urlEmpty : "Error: Please fill in the link address.", |
|||
titleEmpty : "Error: Please fill in the link title." |
|||
}, |
|||
anchor : { |
|||
title : "Anchor link", |
|||
name : "Name", |
|||
url : "Address", |
|||
urlTitle : "Title", |
|||
nameEmpty: "Error: anchor name can't be empty.", |
|||
titleEmpty : "Error: Please fill in anchor link title.", |
|||
urlEmpty : "Error: Please fill in anchor link." |
|||
}, |
|||
image : { |
|||
title : "Image", |
|||
url : "Address", |
|||
link : "Link", |
|||
alt : "Title", |
|||
uploadButton : "Upload", |
|||
imageURLEmpty : "Error: picture url address can't be empty.", |
|||
uploadFileEmpty : "Error: upload pictures cannot be empty!", |
|||
formatNotAllowed : "Error: only allows to upload pictures file, upload allowed image file format:" |
|||
}, |
|||
tabCodeBlock : { |
|||
title : "Preformatted text / Codes", |
|||
codeEmptyAlert : "Error: Please fill in the Preformatted text or content of the codes." |
|||
}, |
|||
codeBlock : { |
|||
title : "Code block", |
|||
selectLabel : "Languages: ", |
|||
selectDefaultText : "select a code language...", |
|||
otherLanguage : "Other languages", |
|||
unselectedLanguageAlert : "Error: Please select the code language.", |
|||
codeEmptyAlert : "Error: Please fill in the code content." |
|||
} |
|||
} |
|||
}; |
|||
|
|||
exports.defaults.lang = lang; |
|||
}; |
|||
|
|||
// CommonJS/Node.js
|
|||
if (typeof require === "function" && typeof exports === "object" && typeof module === "object") |
|||
{ |
|||
module.exports = factory; |
|||
} |
|||
else if (typeof define === "function") // AMD/CMD/Sea.js
|
|||
{ |
|||
if (define.amd) { // for Require.js
|
|||
|
|||
define(["editormd"], function(editormd) { |
|||
factory(editormd); |
|||
}); |
|||
|
|||
} else { // for Sea.js
|
|||
define(function(require) { |
|||
var editormd = require("../editormd"); |
|||
factory(editormd); |
|||
}); |
|||
} |
|||
} |
|||
else |
|||
{ |
|||
factory(window.editormd); |
|||
} |
|||
|
|||
})(); |
|||
@ -0,0 +1,110 @@ |
|||
(function(){ |
|||
var factory = function (exports) { |
|||
var lang = { |
|||
name : "zh-tw", |
|||
description : "開源在線Markdown編輯器<br/>A simple markdown doucment online editor.", |
|||
toolbar : { |
|||
undo : "撤銷（Ctrl+Z）", |
|||
redo : "重做（Ctrl+Y）", |
|||
bold : "粗體", |
|||
del : "刪除線", |
|||
italic : "斜體", |
|||
quote : "引用", |
|||
h1 : "標題1", |
|||
h2 : "標題2", |
|||
h3 : "標題3", |
|||
h4 : "標題4", |
|||
h5 : "標題5", |
|||
h6 : "標題6", |
|||
"list-ul" : "無序列表", |
|||
"list-ol" : "有序列表", |
|||
hr : "横线", |
|||
link : "链接", |
|||
anchor : "錨點", |
|||
image : "圖片", |
|||
code : "行內代碼", |
|||
"code-block-tab" : "預格式文本 / 代碼塊（縮進風格）", |
|||
"code-block" : "代碼塊（多語言風格）", |
|||
datetime : "日期時間", |
|||
watch : "關閉實時預覽", |
|||
unwatch : "開啟實時預覽", |
|||
preview : "全窗口預覽HTML（可按ESC還原）", |
|||
fullscreen : "全屏（可按ESC還原）", |
|||
clear : "清空", |
|||
info : "關於" + exports.title |
|||
}, |
|||
buttons : { |
|||
enter : "確定", |
|||
cancel : "取消" |
|||
}, |
|||
dialog : { |
|||
link : { |
|||
title : "添加鏈接", |
|||
url : "鏈接地址", |
|||
urlTitle : "鏈接標題", |
|||
urlEmpty : "錯誤：請填寫鏈接地址。", |
|||
titleEmpty : "錯誤：請填寫鏈接標題。" |
|||
}, |
|||
anchor : { |
|||
title : "添加錨點鏈接", |
|||
name : "錨點名稱", |
|||
url : "鏈接地址", |
|||
urlTitle : "鏈接標題", |
|||
nameEmpty: "錯誤：錨點名稱不能為空。", |
|||
titleEmpty : "錯誤：請填寫錨點鏈接標題。", |
|||
urlEmpty : "錯誤：請填寫錨點鏈接地址。" |
|||
}, |
|||
image : { |
|||
title : "添加圖片", |
|||
url : "圖片地址", |
|||
link : "圖片鏈接", |
|||
alt : "圖片描述", |
|||
uploadButton : "本地上傳", |
|||
imageURLEmpty : "錯誤：圖片地址不能為空。", |
|||
uploadFileEmpty : "錯誤：上傳的圖片不能為空！", |
|||
formatNotAllowed : "錯誤：只允許上傳圖片文件，允許上傳的圖片文件格式有：" |
|||
}, |
|||
tabCodeBlock : { |
|||
title : "添加預格式文本或代碼塊", |
|||
codeEmptyAlert : "錯誤：請填寫預格式文本或代碼的內容。" |
|||
}, |
|||
codeBlock : { |
|||
title : "添加代碼塊", |
|||
selectLabel : "代碼語言：", |
|||
selectDefaultText : "請語言代碼語言", |
|||
otherLanguage : "其他語言", |
|||
unselectedLanguageAlert : "錯誤：請選擇代碼所屬的語言類型。", |
|||
codeEmptyAlert : "錯誤：請填寫代碼內容。" |
|||
} |
|||
} |
|||
}; |
|||
|
|||
exports.defaults.lang = lang; |
|||
}; |
|||
|
|||
// CommonJS/Node.js
|
|||
if (typeof require === "function" && typeof exports === "object" && typeof module === "object") |
|||
{ |
|||
module.exports = factory; |
|||
} |
|||
else if (typeof define === "function") // AMD/CMD/Sea.js
|
|||
{ |
|||
if (define.amd) { // for Require.js
|
|||
|
|||
define(["editormd"], function(editormd) { |
|||
factory(editormd); |
|||
}); |
|||
|
|||
} else { // for Sea.js
|
|||
define(function(require) { |
|||
var editormd = require("../editormd"); |
|||
factory(editormd); |
|||
}); |
|||
} |
|||
} |
|||
else |
|||
{ |
|||
factory(window.editormd); |
|||
} |
|||
|
|||
})(); |
|||
@ -0,0 +1,97 @@ |
|||
@charset "UTF-8"; |
|||
|
|||
// Form |
|||
|
|||
#{$prefix}form { |
|||
color: $color; |
|||
|
|||
label { |
|||
float: left; |
|||
display: block; |
|||
width: 75px; |
|||
text-align: left; |
|||
padding: 5px 0 15px 5px; |
|||
} |
|||
|
|||
br { |
|||
clear: both; |
|||
} |
|||
|
|||
iframe { |
|||
display: none; |
|||
} |
|||
|
|||
input:focus { |
|||
outline: 0; |
|||
} |
|||
|
|||
input[type="text"] { |
|||
color: #999; |
|||
padding: 7px 8px; |
|||
border: 1px solid $borderColor; |
|||
} |
|||
|
|||
input[type="text"] { |
|||
display: inline-block; |
|||
width: 242px; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}form, |
|||
#{$prefix}dialog-container, |
|||
#{$prefix}dialog-footer { |
|||
|
|||
input[type="submit"], #{$prefix}btn, button { |
|||
color: $color; |
|||
min-width: 75px; |
|||
cursor: pointer; |
|||
background: #fff; |
|||
padding: 7px 10px; |
|||
border: 1px solid #ddd; |
|||
@include border-radius(3px); |
|||
@include transition(background 300ms ease-out); |
|||
|
|||
&:hover { |
|||
background: #eee; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}btn { |
|||
padding: 5px 8px 4px\0; |
|||
} |
|||
|
|||
#{$prefix}btn + #{$prefix}btn { |
|||
margin-left: 8px; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}file-input { |
|||
width: 75px; |
|||
height: 32px; |
|||
margin-left: 8px; |
|||
position: relative; |
|||
display: inline-block; |
|||
|
|||
input[type="file"] { |
|||
width: 75px; |
|||
height: 32px; |
|||
opacity: 0; |
|||
cursor: pointer; |
|||
background: #000; |
|||
display: inline-block; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
|
|||
&::-webkit-file-upload-button { |
|||
visibility: hidden; |
|||
} |
|||
} |
|||
|
|||
input[type="submit"] { |
|||
} |
|||
|
|||
&:hover input[type="submit"] { |
|||
background: #eee; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue