mirror of
https://gitlink.org.cn/Gitlink/forgeplus.git
synced 2026-05-03 03:40:49 +08:00
init project
This commit is contained in:
Jasder
135
public/editormd/examples/@links.html
Normal file
135
public/editormd/examples/@links.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>@links - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>@links</h1>
|
||||
<p>Github Flavored Markdown extras syntax</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">### Disable @link & email address auto link
|
||||
|
||||
> Editor.md default enable @link & email address auto link;
|
||||
> Unsupported xxxx@xxxxx, xxxx@localhost ...
|
||||
|
||||
```javascript
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
// You can custom @link base url.
|
||||
editormd.urls.atLinkBase = "https://github.com/";
|
||||
|
||||
testEditor = editormd("test-editormd", {
|
||||
atLink : false, // disable @link
|
||||
emailLink : false, // disable email address auto link
|
||||
path : '../lib/'
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### @links
|
||||
|
||||
[TOC]
|
||||
|
||||
~~@mentions~~, #refs @tylerlong `inline code @tylerlong`, [links](), **formatting**, and <del>tags</del> supported @pandao;
|
||||
list syntax required (any unordered or ordered list supported) @pandao;
|
||||
this is @pandao a complete item @pandao xxx.test@gmail.com;
|
||||
|
||||
link [@pandao](https://github.com/pandao "@pandao") @ xxx.test@gmail.com;
|
||||
link [@pandao](https://github.com/pandao "@pandao")
|
||||
fsdafds [Gmail](mailto:xxx.test@gmail.com) this is an incomplete item **@pandao**;
|
||||
|
||||
*@pandao* this is an incomplete item ___@pandao___;
|
||||
|
||||
<xxx.test@gmail.com>
|
||||
|
||||
<mailto:xxx.test@gmail.com>
|
||||
|
||||
Email test : [email me](mailto:test@test.com) [Gmail](mailto:xxx.test@gmail.com) dsfdfsdfsdfsdf xxx.test@gmail.com fdfsdfsdf 5956565656565@vip.qq.com
|
||||
|
||||
# Github: @pandao
|
||||
## Github: @pandao
|
||||
### Github: @tylerlong
|
||||
#### Github: @tylerlong
|
||||
##### Github: @tylerlong
|
||||
###### Github: @tylerlong [Gmail](mailto:xxx.test@gmail.com)
|
||||
|
||||
- dafssdfsdaf@chjj dfsdfsdf [5956565656565@vip.qq.com](mailto:5956565656565@vip.qq.com)
|
||||
- dafssdfsdaf@chjj dfsdfsdf
|
||||
- dafssdfsdaf@chjj dfsdfsdf
|
||||
- dafss@pandao dfsdaf@chjj dfsdfsdf
|
||||
- dafssd: @pandao fsdaf@chjj dfsdfsdf @codemirror @pandao
|
||||
+ dafssdfsdaf@chjj dfsdfsdf
|
||||
+ dafss@pandaodfsdaf@chjj dfsdfsdf
|
||||
|
||||
|
||||
1. @chjj 第一行@pandao fsdaf@chjj dfsdfsdf :fa-save:: @pandao
|
||||
- dafssdfsdaf@chjj dfsdfsdf
|
||||
- dafss@pandao dfsdaf@chjj dfsdfsdf
|
||||
2. @chjj 第二行@pandao fsdaf@chjj dfsdfsdf @codemirror @pandao
|
||||
3. 第三行@pandao fsdaf@chjj dfsdfsdf :fa-save:: @pandao
|
||||
|
||||
> Blockquotes @pandao
|
||||
|
||||
> dd@pandao引用文本(Blockquotes @pandao)fdasfad @_pandao fdasfad @xxx454xxx fdasfad @xx_x454xxx454
|
||||
|
||||
|@pandao First Header | Second@pandao Header@pandao |
|
||||
| ------------- | ------------- |
|
||||
| Content@pandao Cell | @pandao Content Cell @pandao|
|
||||
| Con@pandao tent Cell@pandao | Content@pan-dao Cell dfsdfsdf @pan_dao |
|
||||
|
||||
dsfdf@pandao fasdfsdfsfddffd@pandao
|
||||
|
||||
dfasfasdfasdf:bangbang:
|
||||
|
||||
This is an H1 @pandao
|
||||
=============
|
||||
|
||||
This @pandao an H2 @pandao
|
||||
-------------
|
||||
|
||||
http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png
|
||||
|
||||
http://socialpro.demo.ipandao.com/app/images/welcom-logo@3x.png
|
||||
|
||||
http://socialpro.demo.ipandao.com/app/images/welcom-logo@4x.png
|
||||
|
||||
[](http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png)
|
||||
|
||||
|
||||
[http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png](http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png)
|
||||
[http://socialpro.demo.ipandao.com/app/images/welcom-logo@3x.png](http://socialpro.demo.ipandao.com/app/images/welcom-logo@3x.png)
|
||||
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
// You can custom @link base url.
|
||||
editormd.urls.atLinkBase = "https://github.com/";
|
||||
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
toc : true,
|
||||
//atLink : false, // disable @link
|
||||
//emailLink : false, // disable email address auto link
|
||||
todoList : true,
|
||||
path : '../lib/'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
55
public/editormd/examples/auto-height.html
Normal file
55
public/editormd/examples/auto-height.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Auto height - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Auto height test</h1>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="append-btn">Append markdown</button>
|
||||
</div>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">### Settings
|
||||
|
||||
```javascript
|
||||
var testEditor = editormd("test-editormd", {
|
||||
autoHeight : true
|
||||
});
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
autoHeight : true,
|
||||
path : "../lib/",
|
||||
htmlDecode : "style,script,iframe",
|
||||
tex : true,
|
||||
emoji : true,
|
||||
taskList : true,
|
||||
flowChart : true,
|
||||
sequenceDiagram : true
|
||||
});
|
||||
|
||||
$("#append-btn").click(function(){
|
||||
$.get("./test.md", function(md){
|
||||
testEditor.appendMarkdown(md);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
508
public/editormd/examples/change-mode.html
Normal file
508
public/editormd/examples/change-mode.html
Normal file
@@ -0,0 +1,508 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Chnage mode - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
<style>
|
||||
#codes textarea {display: none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Chnage mode</h1>
|
||||
<p>Become to the code editor</p>
|
||||
<p>Modes : <select id="modes">
|
||||
<option value="">select modes</option>
|
||||
</select> Themes :
|
||||
<select id="themes">
|
||||
<option selected="selected" value="">select themes</option>
|
||||
</select>
|
||||
</p>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="get-code-btn">Get code source</button>
|
||||
<button id="fullscreen-btn">Fullscreen (Press F11 into, ESC exit)</button>
|
||||
</div>
|
||||
<div id="codes">
|
||||
<textarea id="html-code"><!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Chnage mode - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Chnage mode</h1>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
watch : false,
|
||||
toolbar : false,
|
||||
codeFold : true,
|
||||
searchReplace : true,
|
||||
placeholder : "Enjoy coding!",
|
||||
value : (localStorage.mode) ? $("#"+localStorage.mode.replace("text/", "")+"-code").val() : $("#html-code").val(),
|
||||
theme : (localStorage.theme) ? localStorage.theme : "default",
|
||||
mode : (localStorage.mode) ? localStorage.mode : "text/html",
|
||||
path : '../lib/'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></textarea>
|
||||
<textarea id="javascript-code">$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
watch : false,
|
||||
toolbar : false,
|
||||
codeFold : true,
|
||||
searchReplace : true,
|
||||
placeholder : "Enjoy coding!",
|
||||
value : (localStorage.mode) ? $("#"+localStorage.mode.replace("text/", "")+"-code").val() : $("#html-code").val(),
|
||||
theme : (localStorage.theme) ? localStorage.theme : "default",
|
||||
mode : (localStorage.mode) ? localStorage.mode : "text/html",
|
||||
path : '../lib/'
|
||||
});
|
||||
});</textarea>
|
||||
<textarea id="xml-code"><?xml version="1.0" encoding="utf-8" ?>
|
||||
<root>
|
||||
<photo url="https://pandao.github.io/editor.md/examples/images/7.jpg">
|
||||
<title>李健首张专辑《似水流年》封面</title>
|
||||
<width>360</width>
|
||||
<height>360</height>
|
||||
</photo>
|
||||
<photo url="https://pandao.github.io/editor.md/examples/images/7.jpg">
|
||||
<title>李健首张专辑《似水流年》封面</title>
|
||||
<width>360</width>
|
||||
<height>360</height>
|
||||
</photo>
|
||||
<photo url="https://pandao.github.io/editor.md/examples/images/7.jpg">
|
||||
<title>李健首张专辑《似水流年》封面</title>
|
||||
<width>360</width>
|
||||
<height>360</height>
|
||||
</photo>
|
||||
</root></textarea>
|
||||
<textarea id="ruby-code">#!/usr/bin/ruby
|
||||
|
||||
puts "Hello World!";
|
||||
|
||||
# Ruby knows what you
|
||||
# mean, even if you
|
||||
# want to do math on
|
||||
# an entire Array
|
||||
cities = %w[ London
|
||||
Oslo
|
||||
Paris
|
||||
Amsterdam
|
||||
Berlin ]
|
||||
visited = %w[Berlin Oslo]
|
||||
|
||||
puts "I still need " +
|
||||
"to visit the " +
|
||||
"following cities:",
|
||||
cities - visited</textarea>
|
||||
<textarea id="json-code">{
|
||||
"employees": [
|
||||
{
|
||||
"firstName" : "Bill",
|
||||
"lastName" : "Gates"
|
||||
},
|
||||
{
|
||||
"firstName" : "George",
|
||||
"lastName" : "Bush"
|
||||
},
|
||||
{
|
||||
"firstName" : "Thomas",
|
||||
"lastName" : "Carter"
|
||||
}
|
||||
],
|
||||
"employees": [
|
||||
{
|
||||
"firstName" : "Bill",
|
||||
"lastName" : "Gates"
|
||||
},
|
||||
{
|
||||
"firstName" : "George",
|
||||
"lastName" : "Bush"
|
||||
},
|
||||
{
|
||||
"firstName" : "Thomas",
|
||||
"lastName" : "Carter"
|
||||
}
|
||||
],
|
||||
}</textarea>
|
||||
<textarea id="php-code"><?php
|
||||
$app = new Phalcon\Mvc\Micro();
|
||||
|
||||
//Set a route with the name "show-post"
|
||||
$app->get('/blog/{year}/{title}', function ($year, $title) use ($app) {
|
||||
|
||||
//.. show the post here
|
||||
return $year.$title;
|
||||
|
||||
})->setName('show-post');
|
||||
|
||||
$app->get('/', function () {
|
||||
echo "<h1>Welcome !</h1>";
|
||||
|
||||
echo $app->url->get(array(
|
||||
'for' => 'show-post',
|
||||
'title' => 'php-is-a-great-framework',
|
||||
'year' => 2012
|
||||
));
|
||||
});
|
||||
|
||||
$app->get('/posts/{year:[0-9]+}/{title:[a-zA-Z\-]+}', function ($year, $title) {
|
||||
echo "<h1>Title: $title</h1>";
|
||||
echo "<h2>Year: $year</h2>";
|
||||
});
|
||||
|
||||
//Requiring another file
|
||||
$app->get('/show/results', function () {
|
||||
require 'views/results.php';
|
||||
});
|
||||
|
||||
//Returning a JSON
|
||||
$app->get('/get/some-json', function () {
|
||||
echo json_encode(array("some", "important", "data"));
|
||||
});
|
||||
|
||||
//This route makes a redirection to another route
|
||||
$app->post('/old/welcome', function () use ($app) {
|
||||
$app->response->redirect("new/welcome");
|
||||
});
|
||||
|
||||
$app->post('/new/welcome', function () use ($app) {
|
||||
echo 'This is the new Welcome';
|
||||
});
|
||||
|
||||
/*
|
||||
//Matches if the HTTP method is POST
|
||||
$app->post('/api/products/add', "add_product");
|
||||
|
||||
//Matches if the HTTP method is PUT
|
||||
$app->put('/api/products/update/{id}', "update_product");
|
||||
|
||||
//Matches if the HTTP method is DELETE
|
||||
$app->put('/api/products/remove/{id}', "delete_product");
|
||||
|
||||
//Matches if the HTTP method is GET or POST
|
||||
$app->map('/repos/store/refs')->via(array('GET', 'POST'));
|
||||
*/
|
||||
|
||||
$app->handle();
|
||||
?></textarea>
|
||||
<textarea id="cpp-code">#include "dialog.h"
|
||||
#include <QApplication>
|
||||
|
||||
int main(int argc, char *argv[])
|
||||
{
|
||||
QApplication a(argc, argv);
|
||||
Dialog w;
|
||||
w.show();
|
||||
|
||||
return a.exec();
|
||||
}</textarea>
|
||||
<textarea id="java-code">package com.demo.blog;
|
||||
|
||||
import com.jfinal.aop.Before;
|
||||
import com.jfinal.core.Controller;
|
||||
|
||||
@Before(BlogInterceptor.class)
|
||||
public class BlogController extends Controller {
|
||||
public void index() {
|
||||
setAttr("blogPage", Blog.me.paginate(getParaToInt(0, 1), 10));
|
||||
render("blog.html");
|
||||
}
|
||||
|
||||
public void add() {
|
||||
}
|
||||
|
||||
@Before(BlogValidator.class)
|
||||
public void save() {
|
||||
getModel(Blog.class).save();
|
||||
redirect("/blog");
|
||||
}
|
||||
|
||||
public void edit() {
|
||||
setAttr("blog", Blog.me.findById(getParaToInt()));
|
||||
}
|
||||
|
||||
@Before(BlogValidator.class)
|
||||
public void update() {
|
||||
getModel(Blog.class).update();
|
||||
redirect("/blog");
|
||||
}
|
||||
|
||||
public void delete() {
|
||||
Blog.me.deleteById(getParaToInt());
|
||||
redirect("/blog");
|
||||
}
|
||||
}
|
||||
</textarea>
|
||||
<textarea id="actionscript-code">package com.flite
|
||||
{
|
||||
import flash.net.*;
|
||||
import flash.events.*;
|
||||
import flash.display.*;
|
||||
|
||||
/**
|
||||
* @package com.flite
|
||||
* @class XMLLoader
|
||||
* @author pandao pandao@vip.qq.com
|
||||
*/
|
||||
|
||||
public class XMLLoder
|
||||
{
|
||||
public var xml:XML;
|
||||
public var url:String;
|
||||
public var list:XMLList;
|
||||
public var percent:Number = 0;
|
||||
public var onload:Function;
|
||||
public var onerror:Function;
|
||||
public var onpreload:Function;
|
||||
public var onprogress:Function;
|
||||
|
||||
private var loader:URLLoader;
|
||||
|
||||
public function XMLLoder(url:String) : void
|
||||
{
|
||||
this.url = url;
|
||||
|
||||
xml = new XML();
|
||||
xml.ignoreWhite = true;
|
||||
|
||||
loader = new URLLoader();
|
||||
loader.load(new URLRequest(url));
|
||||
loader.addEventListener(Event.OPEN, preloadHandler);
|
||||
loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
|
||||
loader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
|
||||
loader.addEventListener(Event.COMPLETE, loadedHandler);
|
||||
}
|
||||
|
||||
private function preloadHandler(event:Event) : void
|
||||
{
|
||||
onpreload = onpreload || new Function;
|
||||
onpreload(event);
|
||||
}
|
||||
|
||||
private function errorHandler(event:IOErrorEvent) : void
|
||||
{
|
||||
onerror = onerror || new Function;
|
||||
onerror(event);
|
||||
}
|
||||
|
||||
private function progressHandler(event:ProgressEvent) : void
|
||||
{
|
||||
percent = Math.round((event.bytesLoaded / event.bytesTotal) * 100);
|
||||
|
||||
onprogress = onprogress || new Function;
|
||||
onprogress(event, percent);
|
||||
}
|
||||
|
||||
private function loadedHandler(event:Event) : void
|
||||
{
|
||||
xml = XML(loader.data);
|
||||
|
||||
onload = onload || new Function;
|
||||
onload(xml);
|
||||
}
|
||||
}
|
||||
|
||||
}</textarea><textarea id="perl-code">#!/usr/bin/perl
|
||||
use strict;
|
||||
use warnings;
|
||||
|
||||
print "Hello, World...\n";
|
||||
</textarea>
|
||||
<textarea id="go-code">package main
|
||||
|
||||
import (
|
||||
"github.com/astaxie/beego"
|
||||
)
|
||||
|
||||
type MainController struct {
|
||||
beego.Controller
|
||||
}
|
||||
|
||||
func (this *MainController) Get() {
|
||||
this.Ctx.WriteString("hello world")
|
||||
}
|
||||
|
||||
func main() {
|
||||
beego.Router("/", &MainController{})
|
||||
beego.Run()
|
||||
}</textarea><textarea id="python-code">#!/usr/bin/env python
|
||||
|
||||
from flask import Flask
|
||||
app = Flask(__name__)
|
||||
|
||||
@app.route('/')
|
||||
def hello_world():
|
||||
return 'Hello World!'
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run()</textarea>
|
||||
<textarea id="css-code"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,
|
||||
th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
|
||||
margin:0;padding:0;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
audio, canvas, video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body, button, input, select, textarea {
|
||||
font:12px/1.5 Tahoma, "Hiragino Sans GB", "Microsoft Yahei", Arial;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size:12px;
|
||||
color:#666;
|
||||
background:#fff url(../images/) no-repeat left top;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#444;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color:#065BC2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.clear {
|
||||
zoom:1;
|
||||
}
|
||||
|
||||
.clear:after {
|
||||
content:"";
|
||||
height:0;
|
||||
visibility:hidden;
|
||||
clear:both;
|
||||
display:block;
|
||||
}
|
||||
|
||||
img {
|
||||
border:none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}</textarea></div>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
function getCodeValue() {
|
||||
return (localStorage.modeName) ? $("#"+localStorage.modeName.replace("text/", "").replace("c/c++", "cpp")+"-code").val() : $("#html-code").val();
|
||||
}
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
watch : false,
|
||||
toolbar : false,
|
||||
codeFold : true,
|
||||
searchReplace : true,
|
||||
placeholder : "Enjoy coding!",
|
||||
value : getCodeValue(),
|
||||
theme : (localStorage.theme) ? localStorage.theme : "default",
|
||||
mode : (localStorage.mode) ? localStorage.mode : "text/html",
|
||||
path : '../lib/'
|
||||
});
|
||||
|
||||
$("#get-code-btn").bind("click", function() {
|
||||
alert(testEditor.getValue());
|
||||
});
|
||||
|
||||
$("#fullscreen-btn").bind("click", function() {
|
||||
testEditor.fullscreen();
|
||||
});
|
||||
|
||||
var select = $("#themes");
|
||||
|
||||
for (var i = 0, len = editormd.themes.length; i < len; i ++)
|
||||
{
|
||||
var theme = editormd.themes[i];
|
||||
var selected = (localStorage.theme == theme) ? " selected=\"selected\"" : "";
|
||||
select.append("<option value=\"" + theme + "\"" + selected + ">" + theme + "</option>");
|
||||
}
|
||||
|
||||
select.change(function(){
|
||||
var theme = $(this).val();
|
||||
|
||||
if (theme == "")
|
||||
{
|
||||
alert("theme == \"\"");
|
||||
return false;
|
||||
}
|
||||
|
||||
localStorage.theme = theme;
|
||||
testEditor.setTheme(theme);
|
||||
});
|
||||
|
||||
var modesSelect = $("#modes");
|
||||
var modeNames = ["text/html", "javascript", "php", "text/xml", "text/json", "java", "actionscript", "perl", "go", "python", "c/c++", "css", "ruby"];
|
||||
var modes = ["text/html", "javascript", "php", "text/xml", "text/json", "clike", "javascript", "perl", "go", "python", "clike", "css", "ruby"];
|
||||
|
||||
for (var i = 0, len = modes.length; i < len; i ++)
|
||||
{
|
||||
var mode = modes[i];
|
||||
var selected = (localStorage.modeName == modeNames[i]) ? " selected=\"selected\"" : "";
|
||||
modesSelect.append("<option value=\"" + mode + "\"" + selected + " name=\"" + modeNames[i] + "\"" + selected + ">" + modeNames[i] + "</option>");
|
||||
}
|
||||
|
||||
modesSelect.change(function(){
|
||||
var mode = $(this).val();
|
||||
var modeName = $(this).find("option:selected").attr("name");
|
||||
|
||||
if (mode == "")
|
||||
{
|
||||
alert("mode == \"\"");
|
||||
return false;
|
||||
}
|
||||
|
||||
localStorage.mode = mode;
|
||||
localStorage.modeName = modeName;
|
||||
|
||||
var code = getCodeValue();
|
||||
|
||||
testEditor.setCodeMirrorOption("mode", mode);
|
||||
//testEditor.setCodeMirrorOption("value", code);
|
||||
testEditor.setValue(code);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
44
public/editormd/examples/code-fold.html
Normal file
44
public/editormd/examples/code-fold.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Code folding - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Code folding</h1>
|
||||
<p>Switch code folding : Press Ctrl + Q / Command + Q</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
$.get("./test.md", function(md) {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
markdown : "#### Setting\r\n\r\n {\n codeFold : true\n }\r\n\r\n" + md,
|
||||
codeFold : true,
|
||||
htmlDecode : true,
|
||||
tex : true,
|
||||
taskList : true,
|
||||
emoji : true,
|
||||
flowChart : true,
|
||||
sequenceDiagram : true,
|
||||
path : '../lib/'
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
94
public/editormd/examples/css/style.css
Normal file
94
public/editormd/examples/css/style.css
Normal file
@@ -0,0 +1,94 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
audio, canvas, video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img {
|
||||
border: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
/*list-style: none;*/
|
||||
}
|
||||
|
||||
.clear {
|
||||
*zoom: 1; /* for IE 6/7 */
|
||||
}
|
||||
|
||||
.clear:before, .clear:after {
|
||||
height: 0;
|
||||
content: "";
|
||||
font-size: 0;
|
||||
display: table;
|
||||
line-height: 0; /* for Opera */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.clear:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", Helvetica, Tahoma, "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#layout {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#layout > header, .btns {
|
||||
padding: 15px 0;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.btns {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.btns button {
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
#layout > header > h1 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btns button, .btn {
|
||||
padding: 8px 10px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: background 300ms ease-out;
|
||||
transition: background 300ms ease-out;
|
||||
}
|
||||
|
||||
.btns button:hover, .btn:hover {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
118
public/editormd/examples/custom-keyboard-shortcuts.html
Normal file
118
public/editormd/examples/custom-keyboard-shortcuts.html
Normal file
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Custom keyboard shortcuts - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Custom keyboard shortcuts</h1>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Default
|
||||
|
||||
> If Editor.md code editor is on focus, you can use keyboard shortcuts.
|
||||
> Editor.md have the default keyboard shortcuts handle. Plaese open the help dialog, can see all default keyboard shortcuts.
|
||||
|
||||
#### Example
|
||||
|
||||
```javascript
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 720,
|
||||
path : '../lib/',
|
||||
disabledKeyMaps : [
|
||||
"Ctrl-B", "F11", "F10" // disable some default keyboard shortcuts handle
|
||||
],
|
||||
onload : function() {
|
||||
var keyMap = {
|
||||
"Ctrl-S": function(cm) {
|
||||
alert("Ctrl+S");
|
||||
},
|
||||
"Ctrl-A": function(cm) { // default Ctrl-A selectAll
|
||||
// custom
|
||||
alert("Ctrl+A");
|
||||
cm.execCommand("selectAll");
|
||||
}
|
||||
};
|
||||
|
||||
// setting signle key
|
||||
var keyMap2 = {
|
||||
"Ctrl-T": function(cm) {
|
||||
alert("Ctrl+T");
|
||||
}
|
||||
};
|
||||
|
||||
this.addKeyMap(keyMap);
|
||||
this.addKeyMap(keyMap2);
|
||||
this.removeKeyMap(keyMap2); // remove signle key
|
||||
}
|
||||
});
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
var widgets = [];
|
||||
|
||||
testEditor = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 720,
|
||||
path : '../lib/',
|
||||
disabledKeyMaps : [
|
||||
"Ctrl-B", "F11", "F10" // disable some default keyboard shortcuts handle
|
||||
],
|
||||
onchange : function() {
|
||||
$("#test").remove();
|
||||
var cm = this.cm;
|
||||
var cursor = cm.getCursor();
|
||||
|
||||
//cm.replaceSelection("@");
|
||||
|
||||
widgets.push(cm.addWidget({line : cursor.line, ch : cursor.ch}, $("<p style='z-index:100000;background:red;color:#fff;padding:5px;' id='test'>fsdfsdfsdf</p>")[0], true));
|
||||
console.log(cm.getCursor(), cm.getLine(cursor.line), cm.getLineTokens(cursor.line));
|
||||
},
|
||||
onload : function() {
|
||||
var keyMap = {
|
||||
"Ctrl-S": function(cm) {
|
||||
alert("Ctrl+S");
|
||||
//return false;
|
||||
},
|
||||
"Ctrl-A": function(cm) { // default Ctrl-A selectAll
|
||||
// custom
|
||||
alert("Ctrl+A");
|
||||
cm.execCommand("selectAll");
|
||||
},
|
||||
//"Shift-2" : function(cm){
|
||||
//}
|
||||
};
|
||||
|
||||
this.cm.on("keyup", function(cm){
|
||||
//$("#test").remove();
|
||||
});
|
||||
|
||||
// setting signle key
|
||||
var keyMap2 = {
|
||||
"Ctrl-T": function(cm) {
|
||||
alert("Ctrl+T");
|
||||
}
|
||||
};
|
||||
|
||||
this.addKeyMap(keyMap);
|
||||
this.addKeyMap(keyMap2);
|
||||
this.removeKeyMap(keyMap2); // remove signle key
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
178
public/editormd/examples/custom-toolbar.html
Normal file
178
public/editormd/examples/custom-toolbar.html
Normal file
@@ -0,0 +1,178 @@
|
||||
<!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="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>自定义工具栏</h1>
|
||||
<p>Custom toolbar (icons handler)</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">### Custom toolbar
|
||||
|
||||
```javascript
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 640,
|
||||
path : '../lib/',
|
||||
toolbarIcons : function() {
|
||||
// Or return editormd.toolbarModes[name]; // full, simple, mini
|
||||
// Using "||" set icons align right.
|
||||
return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon", "||", "watch", "fullscreen", "preview", "testIcon"]
|
||||
},
|
||||
toolbarIconsClass : {
|
||||
testIcon : "fa-gears" // 指定一个FontAawsome的图标类
|
||||
},
|
||||
toolbarIconTexts : {
|
||||
testIcon2 : "测试按钮" // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签
|
||||
},
|
||||
|
||||
// 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标
|
||||
toolbarCustomIcons : {
|
||||
file : "<input type="file" accept=".md" />",
|
||||
faicon : "<i class="fa fa-star" onclick="alert('faicon');"></i>"
|
||||
},
|
||||
|
||||
// 自定义工具栏按钮的事件处理
|
||||
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 : {
|
||||
file : "上传文件",
|
||||
testIcon : "自定义按钮testIcon", // 自定义按钮的提示文本，即title属性
|
||||
testIcon2 : "自定义按钮testIcon2",
|
||||
undo : "撤销 (Ctrl+Z)"
|
||||
}
|
||||
},
|
||||
|
||||
onload : function(){
|
||||
$("[type=\"file\"]").bind("change", function(){
|
||||
alert($(this).val());
|
||||
testEditor.cm.replaceSelection($(this).val());
|
||||
console.log($(this).val(), testEditor);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<!-- 多语言和自定义工具栏的整合测试 -->
|
||||
<script src="../languages/en.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 640,
|
||||
path : '../lib/',
|
||||
watch : false,
|
||||
toolbarIcons : function() {
|
||||
// Or return editormd.toolbarModes[name]; // full, simple, mini
|
||||
// Using "||" set icons align right.
|
||||
return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon", "||", "watch", "fullscreen", "preview", "testIcon", "file"]
|
||||
},
|
||||
// toolbarIcons : "full", // You can also use editormd.toolbarModes[name] default list, values: full, simple, mini.
|
||||
toolbarIconsClass : {
|
||||
testIcon : "fa-gears" // 指定一个FontAawsome的图标类
|
||||
},
|
||||
toolbarIconTexts : {
|
||||
testIcon2 : "测试按钮Test button" // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签
|
||||
},
|
||||
|
||||
// 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标
|
||||
toolbarCustomIcons : {
|
||||
file : "<input type=\"file\" accept=\".md\" />",
|
||||
faicon : "<i class=\"fa fa-star\" onclick=\"alert('faicon');\"></i>"
|
||||
},
|
||||
|
||||
// 自定义工具栏按钮的事件处理
|
||||
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 : {
|
||||
file : "上传文件",
|
||||
testIcon : "自定义按钮testIcon", // 自定义按钮的提示文本，即title属性
|
||||
testIcon2 : "自定义按钮testIcon2",
|
||||
undo : "撤销 (Ctrl+Z)"
|
||||
}
|
||||
},
|
||||
|
||||
onload : function(){
|
||||
$("[type=\"file\"]").bind("change", function(){
|
||||
alert($(this).val());
|
||||
testEditor.cm.replaceSelection($(this).val());
|
||||
console.log($(this).val(), testEditor);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
151
public/editormd/examples/define-plugin.html
Normal file
151
public/editormd/examples/define-plugin.html
Normal file
@@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Define extention plugins for Editor.md - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Define extention plugins for Editor.md</h1>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">[TOC]
|
||||
|
||||
### Define plugin
|
||||
|
||||
#### Plugin directory
|
||||
|
||||
editor.md/
|
||||
plugins/
|
||||
plugin-name/
|
||||
....
|
||||
|
||||
#### Example
|
||||
|
||||
```javascript
|
||||
(function() {
|
||||
|
||||
var factory = function (exports) {
|
||||
|
||||
var $ = jQuery; // if using module loader(Require.js/Sea.js).
|
||||
|
||||
exports.customMethod = function() {
|
||||
//....
|
||||
};
|
||||
|
||||
exports.fn.youPluginName = function() {
|
||||
/*
|
||||
var _this = this; // this == the current instance object of Editor.md
|
||||
var lang = this.lang;
|
||||
var settings = this.settings;
|
||||
var editor = this.editor;
|
||||
var cursor = cm.getCursor();
|
||||
var selection = cm.getSelection();
|
||||
|
||||
cm.focus();
|
||||
*/
|
||||
|
||||
//....
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
})();
|
||||
```
|
||||
|
||||
#### Usage plugin
|
||||
|
||||
```html
|
||||
<script src="../plugins/you-plugin-name/you-plugin-name.js"></script>
|
||||
<script>
|
||||
editormd.customMethod();
|
||||
|
||||
var testEditor = editormd("test-editormd", {
|
||||
path : '../lib/',
|
||||
onload : function() {
|
||||
this.youPluginName();
|
||||
this.pluginA();
|
||||
this.executePlugin("somePluginName", "you-plugin-name/you-plugin-name"); // load and execute plugin
|
||||
}
|
||||
});
|
||||
|
||||
// or
|
||||
$("#btn").click(function(){
|
||||
testEditor.youPluginName();
|
||||
});
|
||||
</script>
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
editormd.fn.customMethod = function() {
|
||||
console.log("customMethod", this);
|
||||
};
|
||||
|
||||
editormd.fn.pluginA = function() {
|
||||
console.log("pluginA", this);
|
||||
};
|
||||
|
||||
$(function() {
|
||||
editormd.methodOne = function(){
|
||||
console.log("editormd.methodOne");
|
||||
};
|
||||
|
||||
editormd.loadPlugin("../plugins/test-plugin/test-plugin", function(){
|
||||
editormd.testPlugin();
|
||||
});
|
||||
|
||||
editormd.loadPlugin("../plugins/image-dialog/image-dialog", function(){
|
||||
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : '../lib/',
|
||||
onload : function() {
|
||||
this.customMethod();
|
||||
testEditor.imageDialog();
|
||||
this.executePlugin("htmlEntitiesDialog", "html-entities-dialog/html-entities-dialog"); // load and execute plugin
|
||||
this.pluginA();
|
||||
}
|
||||
}); // execute plugin
|
||||
});
|
||||
|
||||
editormd.methodOne();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
56
public/editormd/examples/delay-renderer-preview.html
Normal file
56
public/editormd/examples/delay-renderer-preview.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Delay Rerender & Preview - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Delay Rerender & Preview</h1>
|
||||
<p>P.S. If you input the content too much and too fast, You can setting the delay value. </p>
|
||||
<p>P.S. 适用于输入内容太多太快的情形，但要是一个合理的值，不然会显得预览太慢。打字慢会相对显得慢，打字快时则相对显得快。</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Setting
|
||||
|
||||
{
|
||||
delay : 300 // Uint : ms, default value is 300, and this example is set value 1000
|
||||
}
|
||||
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
|
||||
$.get("test.md", function(md) {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 640,
|
||||
path : "../lib/",
|
||||
delay : 1000,
|
||||
appendMarkdown : md,
|
||||
codeFold : true,
|
||||
saveHTMLToTextarea : true,
|
||||
searchReplace : true,
|
||||
htmlDecode : "style,script,iframe",
|
||||
emoji : true,
|
||||
taskList : true,
|
||||
tex : true,
|
||||
flowChart : true,
|
||||
sequenceDiagram : true
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
47
public/editormd/examples/dynamic-create-editormd.html
Normal file
47
public/editormd/examples/dynamic-create-editormd.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!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="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</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="js/jquery.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditormd;
|
||||
|
||||
$(function() {
|
||||
$("#create-btn").click(function(){
|
||||
$.getScript("../editormd.js", function() {
|
||||
$("#layout").append("<div id=\"test-editormd\"></div>");
|
||||
|
||||
testEditormd = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 640,
|
||||
markdown : "### 动态创建 Editor.md\r\n\r\nDynamic create Editor.md",
|
||||
path : '../lib/'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$("#remove-btn").click(function() {
|
||||
testEditormd.editor.remove();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
191
public/editormd/examples/emoji.html
Normal file
191
public/editormd/examples/emoji.html
Normal file
@@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Emoji - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Emoji 表情</h1>
|
||||
<p>Supports:</p>
|
||||
<ul style="margin: 10px 0 0 18px;">
|
||||
<li>Github emoji : <a href="http://www.emoji-cheat-sheet.com/" target="_blank">http://www.emoji-cheat-sheet.com/</a></li>
|
||||
<li>Twitter Emoji(Twemoji) : <a href="http://twitter.github.io/twemoji/preview.html" target="_blank">http://twitter.github.io/twemoji/preview.html</a></li>
|
||||
<li>FontAwesome icon font emoji : <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">http://fortawesome.github.io/Font-Awesome/icons/</a></li>
|
||||
<li>Editor.md logo icon font emoji</li>
|
||||
</ul>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">### Emoji 表情 :smiley:
|
||||
|
||||
[TOC]
|
||||
|
||||
### Emoji
|
||||
|
||||
Emoji cheat sheet for Campfire and GitHub.
|
||||
|
||||
[http://www.emoji-cheat-sheet.com/](http://www.emoji-cheat-sheet.com/)
|
||||
|
||||
**Usage:**
|
||||
|
||||
:emoji-name:
|
||||
|
||||
**Examples:**
|
||||
|
||||
:heart: :smiley: :+1: :-1: :black_large_square: :waxing_gibbous_moon: :moon: :crescent_moon:
|
||||
|
||||
### Twitter Emoji (Twemoji)
|
||||
|
||||
**Usage:**
|
||||
|
||||
:tw-xxxx:
|
||||
|
||||
**Examples:**
|
||||
|
||||
:tw-1f504: :tw-30-20e3: :tw-31-20e3: :tw-32-20e3: :tw-33-20e3: :tw-34-20e3: :tw-35-20e3: :tw-36-20e3: :tw-37-20e3: :tw-38-20e3: :tw-39-20e3: :tw-1f51f:
|
||||
|
||||
[http://twitter.github.io/twemoji/preview.html](http://twitter.github.io/twemoji/preview.html)
|
||||
|
||||
### Fortawesome icons
|
||||
|
||||
[http://fortawesome.github.io/Font-Awesome/icons/](http://fortawesome.github.io/Font-Awesome/icons/)
|
||||
|
||||
**Usage:**
|
||||
|
||||
:fa-xxxx:
|
||||
|
||||
**Examples:**
|
||||
|
||||
:fa-wifi: :fa-twitter: :fa-google-plus: :fa-git-square: :fa-github-alt: :fa-external-link-square:
|
||||
|
||||
### Editor.md logos
|
||||
|
||||
**Usage:**
|
||||
|
||||
:editormd-logo:
|
||||
:editormd-logo-1x:
|
||||
...
|
||||
:editormd-logo-8x:
|
||||
|
||||
**Examples:**
|
||||
|
||||
:editormd-logo: :editormd-logo-1x: :editormd-logo-2x: :editormd-logo-3x: :editormd-logo-4x: :editormd-logo-5x: :editormd-logo-6x: :editormd-logo-7x: :editormd-logo-8x:
|
||||
|
||||
### Mixed tests
|
||||
|
||||
> Blockquotes :star:
|
||||
|
||||
@pandao dasfsadfasdf:fa-edit: :warning: :smiley:dsafsdfsad\:fdsfdf\:f dfdf: :fa-save::fa-star: :fa-truck:
|
||||
**fdfasd:smiley:dsfsdfsfd** ~~fsdfds:smiley:dfsdfsdf :fa-info:~~ @pandao
|
||||
|
||||
:fa-weixin: :fa-qq: :fa-weibo: :fa-tencent-weibo: :fa-github: :fa-git:
|
||||
|
||||
*dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf*
|
||||
|
||||
___Emphasis :fa-gear: Italic:smiley:___ __Emphasis:smiley:__
|
||||
|
||||
# H1 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-star:
|
||||
## H2 dsfd:fa-star:fsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-star:
|
||||
### H3 dsfdfsfd@pandao :smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf @pandao
|
||||
#### H4 dsfdfsfd@pandao :smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
|
||||
##### H5 dsfdfsfd:smiley:dsfsfd @pandao sfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
|
||||
###### H6 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-star:dsfsdf
|
||||
|
||||
[:smiley:](http://www.emoji-cheat-sheet.com/ "link + emoji") link + emoji
|
||||
|
||||
- dafs@pandao sdfsdaf:smiley:dfsdfsdf
|
||||
- dafssdfsdaf:smiley:dfsdfsdf @pandao
|
||||
- dafssdfsdaf:smiley:dfsdfsdf
|
||||
- dafss:fa-truck:dfsdaf:smiley:dfsd @pandao fsdf
|
||||
- dafssd: :fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck:
|
||||
+ dafssdfsdaf:smiley:dfsdfsdf @pandao
|
||||
+ dafs@pandao s:fa-truck:dfsdaf:smiley:dfsdfsdf
|
||||
|
||||
|
||||
1. :smiley:第一行:fa-truck:fsdaf:smiley:dfs@pandao dfsdf :fa-save:: :fa-truck:
|
||||
- dafssdfsdaf:smiley:dfsdfsdf @pandao
|
||||
- dafss:fa-truck:dfsdaf:smiley:dfsdfsdf
|
||||
2. :smiley:第二行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck:
|
||||
3. 第三行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-save:: :fa-truck:
|
||||
|
||||
> Blockquotes @pandao
|
||||
|
||||
> dd:smiley:引用文本(Blockquotes:smiley:)fdasfad :fa-star:: dfd :fa-truck: @pandao
|
||||
|
||||
#### Datetime test
|
||||
|
||||
02:21:47
|
||||
|
||||
2015-03-12 02:21:47
|
||||
|
||||
### In table
|
||||
|
||||
|:100: First Header | Second:smiley: Header:smiley: |
|
||||
| ------------- | ------------- |
|
||||
| Content:fa-truck: Cell | :smiley:Content Cell :smiley: |
|
||||
| Con:fa-truck:tent Cell:bangbang: | Content Cell dfsdfsdf :fa-star: :dfdf :fa-truck: |
|
||||
|
||||
### Editor.md logo emoji
|
||||
|
||||
:fa-heart:fasdfsdfsfddffd:editormd-logo: :editormd-logo: :editormd-logo-4x:
|
||||
|
||||
dfasfasdfasdf:bangbang:
|
||||
|
||||
This is an H1 :editormd-logo-4x: @pandao
|
||||
=============
|
||||
|
||||
@pandao This :fa-save:: :fa-truck:is an H2 :100:
|
||||
-------------
|
||||
|
||||
### GFM task lists :editormd-logo-5x:
|
||||
|
||||
- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:;
|
||||
- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
|
||||
- [x] [ ] :smiley: this is a complete item :smiley:;
|
||||
- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao;
|
||||
- [ ] [ ]this is an incomplete item;
|
||||
- [ ] :smiley: this is an incomplete item [test link](#);
|
||||
- [ ] :smiley: this is an incomplete item [test link](#);
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
|
||||
// You can custom Emoji's graphics files url path
|
||||
editormd.emoji = {
|
||||
path : "http://www.emoji-cheat-sheet.com/graphics/emojis/",
|
||||
ext : ".png"
|
||||
};
|
||||
|
||||
// Twitter Emoji (Twemoji) graphics files url path
|
||||
editormd.twemoji = {
|
||||
path : "http://twemoji.maxcdn.com/72x72/",
|
||||
ext : ".png"
|
||||
};
|
||||
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
toc : true,
|
||||
|
||||
emoji : true, // Support Github emoji, Twitter Emoji(Twemoji), fontAwesome, Editor.md logo emojis.
|
||||
|
||||
taskList : true,
|
||||
path : '../lib/'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
153
public/editormd/examples/extends.html
Normal file
153
public/editormd/examples/extends.html
Normal file
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Expanded Editor.md - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Expanded Editor.md</h1>
|
||||
<p>Expanded of member methods and properties</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">### Expanded Editor.md
|
||||
|
||||
```javascript
|
||||
var testEditor;
|
||||
|
||||
function EditormdExtend() {
|
||||
|
||||
this.extend("methodC", function() {
|
||||
console.log("methodC");
|
||||
});
|
||||
|
||||
// or
|
||||
testEditor.extend("methodA", function() {
|
||||
console.log("methodA");
|
||||
});
|
||||
|
||||
// one by one setting
|
||||
this.set("propertyA", "propertyA");
|
||||
this.set("methodE", function() {
|
||||
console.log("mothodE", this);
|
||||
});
|
||||
|
||||
// mutil
|
||||
this.extend({
|
||||
propertyA : "propertyAAAA", // override, you can override other default method.
|
||||
propertyB : "propertyB",
|
||||
methodD : function() {
|
||||
console.log("methodD");
|
||||
}
|
||||
});
|
||||
|
||||
this.methodB = function() {
|
||||
console.log("methodB");
|
||||
};
|
||||
|
||||
testEditor.methodA();
|
||||
testEditor.methodB();
|
||||
this.methodC();
|
||||
this.methodE();
|
||||
editormd.methodOne();
|
||||
|
||||
console.log(this, this.propertyA);
|
||||
}
|
||||
|
||||
editormd.fn.customMethod = function(){
|
||||
console.log("customMethod", this);
|
||||
};
|
||||
|
||||
$(function() {
|
||||
editormd.methodOne = function(){
|
||||
console.log("editormd.methodOne");
|
||||
};
|
||||
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : '../lib/',
|
||||
onload : function() {
|
||||
this.customMethod();
|
||||
$.proxy(EditormdExtend, this)();
|
||||
}
|
||||
});
|
||||
|
||||
editormd.methodOne();
|
||||
});
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
function EditormdExtend() {
|
||||
|
||||
this.extend("methodC", function() {
|
||||
console.log("methodC");
|
||||
});
|
||||
|
||||
// or
|
||||
testEditor.extend("methodA", function() {
|
||||
console.log("methodA");
|
||||
});
|
||||
|
||||
// one by one setting
|
||||
this.set("propertyA", "propertyA");
|
||||
this.set("methodE", function() {
|
||||
console.log("mothodE", this);
|
||||
});
|
||||
|
||||
// mutil
|
||||
this.extend({
|
||||
propertyA : "propertyAAAA", // override, you can override other default method.
|
||||
propertyB : "propertyB",
|
||||
methodD : function() {
|
||||
console.log("methodD");
|
||||
}
|
||||
});
|
||||
|
||||
this.methodB = function() {
|
||||
console.log("methodB");
|
||||
};
|
||||
|
||||
testEditor.methodA();
|
||||
testEditor.methodB();
|
||||
this.methodC();
|
||||
this.methodE();
|
||||
editormd.methodOne();
|
||||
|
||||
console.log(this, this.propertyA);
|
||||
}
|
||||
|
||||
editormd.fn.customMethod = function() {
|
||||
console.log("customMethod", this);
|
||||
};
|
||||
|
||||
$(function() {
|
||||
editormd.methodOne = function() {
|
||||
console.log("editormd.methodOne");
|
||||
};
|
||||
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : '../lib/',
|
||||
onload : function() {
|
||||
this.customMethod();
|
||||
$.proxy(EditormdExtend, this)();
|
||||
}
|
||||
});
|
||||
|
||||
editormd.methodOne();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
119
public/editormd/examples/external-use.html
Normal file
119
public/editormd/examples/external-use.html
Normal file
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>External use - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>External use</h1>
|
||||
<p>External use of toolbar handlers / modal dialog</p>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="undo">Undo</button>
|
||||
<button id="open-link-dialog">Open link dialog</button>
|
||||
<button id="insert-bold">Insert Bold</button>
|
||||
<button id="insert-h6">Insert Heading 6</button>
|
||||
<button id="insert-inline-code">Insert Inline code</button>
|
||||
<button id="open-image-dialog">Open image dialog</button>
|
||||
<button id="open-help-dialog">Open help dialog</button>
|
||||
<button id="open-html-entities-dialog">Open html entities dialog</button>
|
||||
</div>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">[TOC]
|
||||
|
||||
### External use of toolbar handlers / modal dialog
|
||||
|
||||
```javascript
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : '../lib/'
|
||||
});
|
||||
|
||||
// the first method
|
||||
$("#undo").bind('click', function() {
|
||||
$.proxy(testEditor.toolbarHandlers.undo, testEditor)();
|
||||
});
|
||||
|
||||
// the Second method : using manually loaded dialog plugin
|
||||
// <script src="../plugins/html-entities/html-entities.js"></script>
|
||||
$("#open-html-entities-dialog").bind('click', function() {
|
||||
testEditor.htmlEntities();
|
||||
});
|
||||
|
||||
// using toolbar dialog plugin
|
||||
$("#open-link-dialog").bind('click', function() {
|
||||
$.proxy(testEditor.toolbarHandlers.link, testEditor)();
|
||||
});
|
||||
|
||||
// or
|
||||
$("#open-image-dialog").bind('click', function(){
|
||||
// load and execute plugin
|
||||
testEditor.executePlugin("imageDialog", "../plugins/image-dialog/image-dialog");
|
||||
});
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
|
||||
<!-- manually load dialog plugin -->
|
||||
<script src="../plugins/html-entities-dialog/html-entities-dialog.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : '../lib/'
|
||||
});
|
||||
|
||||
// the first method
|
||||
$("#undo").bind('click', function() {
|
||||
$.proxy(testEditor.toolbarHandlers.undo, testEditor)();
|
||||
});
|
||||
|
||||
// the Second method : using manually loaded dialog plugin
|
||||
$("#open-html-entities-dialog").bind('click', function() {
|
||||
testEditor.htmlEntitiesDialog();
|
||||
});
|
||||
|
||||
$("#insert-bold").bind('click', function() {
|
||||
$.proxy(testEditor.toolbarHandlers.bold, testEditor)();
|
||||
testEditor.focus();
|
||||
});
|
||||
|
||||
$("#insert-h6").bind('click', function() {
|
||||
$.proxy(testEditor.toolbarHandlers.h6, testEditor)();
|
||||
testEditor.focus();
|
||||
});
|
||||
|
||||
$("#insert-inline-code").bind('click', function() {
|
||||
$.proxy(testEditor.toolbarHandlers.code, testEditor)();
|
||||
testEditor.focus();
|
||||
});
|
||||
|
||||
$("#open-help-dialog").bind('click', function() {
|
||||
$.proxy(testEditor.toolbarHandlers.help, testEditor)();
|
||||
});
|
||||
|
||||
// using toolbar dialog plugin
|
||||
$("#open-link-dialog").bind('click', function() {
|
||||
$.proxy(testEditor.toolbarHandlers.link, testEditor)();
|
||||
});
|
||||
|
||||
// or
|
||||
$("#open-image-dialog").bind('click', function(){
|
||||
testEditor.executePlugin("imageDialog", "../plugins/image-dialog/image-dialog"); // load and execute plugin
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
53
public/editormd/examples/flowchart.html
Normal file
53
public/editormd/examples/flowchart.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>FlowChart - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>FlowChart 流程图</h1>
|
||||
<p>Based on flowchart.js：<a href="http://adrai.github.io/flowchart.js/" target="_blank">http://adrai.github.io/flowchart.js/</a></p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Using FlowChart
|
||||
|
||||
setting:
|
||||
|
||||
{
|
||||
flowChart : true
|
||||
}
|
||||
|
||||
#### Example
|
||||
|
||||
```flow
|
||||
st=>start: User login
|
||||
op=>operation: Operation
|
||||
cond=>condition: Successful Yes or No?
|
||||
e=>end: Into admin
|
||||
|
||||
st->op->cond
|
||||
cond(yes)->e
|
||||
cond(no)->op
|
||||
```</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 640,
|
||||
path : '../lib/',
|
||||
flowChart : true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
92
public/editormd/examples/form-get-value.html
Normal file
92
public/editormd/examples/form-get-value.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!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="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>表单取值</h1>
|
||||
<p>Form get textarea value.</p>
|
||||
</header>
|
||||
<form method="post" action="http://editormd.ipandao.com/php/post.php">
|
||||
<div id="test-editormd">
|
||||
<!-- Custom textarea name attribute <textarea style="display:none;" name="test-textarea-name"> -->
|
||||
<textarea style="display:none;">#### Get value
|
||||
|
||||
每个 Editor.md 的 ID 元素下都有一个保存 Markdown 源码的 Textarea，你也可以通过设置开启另一个保存 HTML 源码的 Textarea，可以按需要获取相应的值，如下：
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
#### Example
|
||||
|
||||
```javascript
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 640,
|
||||
path : "../lib/",
|
||||
saveHTMLToTextarea : true
|
||||
});
|
||||
|
||||
testEditor.getMarkdown(); // 获取 Markdown 源码
|
||||
testEditor.getHTML(); // 获取 Textarea 保存的 HTML 源码
|
||||
testEditor.getPreviewedHTML(); // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用
|
||||
```
|
||||
|
||||
#### Backend get form value
|
||||
|
||||
假设编辑器 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="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$.get("./test.md", function(md) {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 640,
|
||||
path : "../lib/",
|
||||
appendMarkdown : md,
|
||||
saveHTMLToTextarea : true
|
||||
});
|
||||
});
|
||||
|
||||
//testEditor.getMarkdown(); // 获取 Markdown 源码
|
||||
//testEditor.getHTML(); // 获取 Textarea 保存的 HTML 源码
|
||||
//testEditor.getPreviewedHTML(); // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
231
public/editormd/examples/full.html
Normal file
231
public/editormd/examples/full.html
Normal file
@@ -0,0 +1,231 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Full example - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
<style>
|
||||
/*.editormd-preview-theme-dark {
|
||||
color: #777;
|
||||
background:#2C2827;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .editormd-toc-menu > .markdown-toc {
|
||||
background:#fff;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .editormd-toc-menu > .markdown-toc h1{
|
||||
border-color:#ddd;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .markdown-body h1,
|
||||
.editormd-preview-theme-dark .markdown-body h2,
|
||||
.editormd-preview-theme-dark .markdown-body hr {
|
||||
border-color: #222;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .editormd-preview-container blockquote {
|
||||
color: #555;
|
||||
border-color: #333;
|
||||
background: #222;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .editormd-preview-container abbr {
|
||||
background:#ff9900;
|
||||
color: #fff;
|
||||
padding: 1px 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .editormd-preview-container code {
|
||||
background: #5A9600;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 1px 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .editormd-preview-container table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .editormd-preview-container .fa-emoji {
|
||||
color: #B4BF42;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .editormd-preview-container .katex {
|
||||
color: #FEC93F;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark [class*=editormd-logo] {
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .sequence-diagram text {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .sequence-diagram rect,
|
||||
.editormd-preview-theme-dark .sequence-diagram path {
|
||||
color:#fff;
|
||||
fill : #64D1CB;
|
||||
stroke : #64D1CB;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .flowchart rect,
|
||||
.editormd-preview-theme-dark .flowchart path {
|
||||
stroke : #A6C6FF;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .flowchart rect {
|
||||
fill: #A6C6FF;
|
||||
}
|
||||
|
||||
.editormd-preview-theme-dark .flowchart text {
|
||||
fill: #5879B4;
|
||||
}*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>完整示例</h1>
|
||||
<p>Full example</p>
|
||||
<ul style="margin: 10px 0 0 18px;">
|
||||
<li>Enable HTML tags decode</li>
|
||||
<li>Enable TeX, Flowchart, Sequence Diagram, Emoji, FontAwesome, Task lists</li>
|
||||
<li>Enable Image upload</li>
|
||||
<li>Enable [TOCM], Search Replace, Code fold</li>
|
||||
</ul>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="goto-line-btn">Goto line 90</button>
|
||||
<button id="show-btn">Show editor</button>
|
||||
<button id="hide-btn">Hide editor</button>
|
||||
<button id="get-md-btn">Get Markdown</button>
|
||||
<button id="get-html-btn">Get HTML</button>
|
||||
<button id="watch-btn">Watch</button>
|
||||
<button id="unwatch-btn">Unwatch</button>
|
||||
<button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
|
||||
<button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
|
||||
<button id="show-toolbar-btn">Show toolbar</button>
|
||||
<button id="close-toolbar-btn">Hide toolbar</button>
|
||||
<button id="toc-menu-btn">ToC Dropdown menu</button>
|
||||
<button id="toc-default-btn">ToC default</button>
|
||||
</div>
|
||||
<div id="test-editormd"></div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../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/',
|
||||
theme : "dark",
|
||||
previewTheme : "dark",
|
||||
editorTheme : "pastel-on-dark",
|
||||
markdown : md,
|
||||
codeFold : true,
|
||||
//syncScrolling : false,
|
||||
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
|
||||
searchReplace : true,
|
||||
//watch : false, // 关闭实时预览
|
||||
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
|
||||
//toolbar : false, //关闭工具栏
|
||||
//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
|
||||
emoji : true,
|
||||
taskList : true,
|
||||
tocm : true, // Using [TOCM]
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#goto-line-btn").bind("click", function(){
|
||||
testEditor.gotoLine(90);
|
||||
});
|
||||
|
||||
$("#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();
|
||||
});
|
||||
|
||||
$("#toc-menu-btn").click(function(){
|
||||
testEditor.config({
|
||||
tocDropdown : true,
|
||||
tocTitle : "目录 Table of Contents",
|
||||
});
|
||||
});
|
||||
|
||||
$("#toc-default-btn").click(function() {
|
||||
testEditor.config("tocDropdown", false);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
84
public/editormd/examples/goto-line.html
Normal file
84
public/editormd/examples/goto-line.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Goto line - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Goto line</h1>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="goto-line-btn">Goto line 90</button>
|
||||
<button id="goto-line-150-btn">Goto line 150</button>
|
||||
<button id="goto-line-240-btn">Goto line 240</button>
|
||||
<button id="goto-line-300-btn">Goto line 300</button>
|
||||
<button id="goto-line-400-btn">Goto line 400</button>
|
||||
<button id="goto-first-line-btn">Goto first line</button>
|
||||
<button id="goto-last-line-btn">Goto last line</button>
|
||||
</div>
|
||||
<div id="test-editormd"></div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../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,
|
||||
codeFold : true,
|
||||
htmlDecode : "style,script,iframe",
|
||||
tex : true,
|
||||
emoji : true,
|
||||
taskList : true,
|
||||
flowChart : true,
|
||||
sequenceDiagram : true,
|
||||
//gotoLine : false // disabled
|
||||
});
|
||||
});
|
||||
|
||||
$("#goto-line-btn").bind("click", function(){
|
||||
testEditor.gotoLine(90);
|
||||
});
|
||||
|
||||
$("#goto-line-150-btn").bind("click", function(){
|
||||
testEditor.gotoLine(150);
|
||||
});
|
||||
|
||||
$("#goto-line-240-btn").bind("click", function(){
|
||||
testEditor.gotoLine(240);
|
||||
});
|
||||
|
||||
$("#goto-line-300-btn").bind("click", function(){
|
||||
testEditor.gotoLine(300);
|
||||
});
|
||||
|
||||
$("#goto-line-400-btn").bind("click", function(){
|
||||
testEditor.gotoLine(400);
|
||||
});
|
||||
|
||||
$("#goto-first-line-btn").bind("click", function(){
|
||||
testEditor.gotoLine("first");
|
||||
// or
|
||||
//testEditor.gotoLine(1);
|
||||
});
|
||||
|
||||
$("#goto-last-line-btn").bind("click", function(){
|
||||
testEditor.gotoLine("last");
|
||||
// or
|
||||
//testEditor.gotoLine(testEditor.cm.lineCount());
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>HTML Preview (markdown to html) - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.preview.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
<style>
|
||||
body {padding: 40px;}
|
||||
|
||||
#layout > header, .btns {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
z-index: 100;
|
||||
padding: 18px;
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#sidebar:hover {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#sidebar h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#custom-toc-container {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#test-editormd-view, #test-editormd-view2 {
|
||||
padding-left: 0;
|
||||
padding-right: 430px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Markdown转HTML的显示处理之自定义 ToC 容器</h1>
|
||||
<p>即：非编辑情况下的HTML预览</p>
|
||||
<p>HTML Preview (markdown to html and custom ToC container)</p>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button onclick="location.href='./html-preview-markdown-to-html.html';">返回 Back</button>
|
||||
</div>
|
||||
<div id="sidebar">
|
||||
<h1>Table of Contents</h1>
|
||||
<div class="markdown-body editormd-preview-container" id="custom-toc-container">#custom-toc-container</div>
|
||||
</div>
|
||||
<div id="test-editormd-view">
|
||||
<textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>
|
||||
</div>
|
||||
<div id="test-editormd-view2">
|
||||
<textarea id="append-test" style="display:none;">
|
||||
|
||||
###科学公式 TeX(KaTeX)
|
||||
|
||||
$$E=mc^2$$
|
||||
|
||||
行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。
|
||||
|
||||
$$\(\sqrt{3x-1}+(1+x)^2\)$$
|
||||
|
||||
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
|
||||
|
||||
$$X^2 > Y$$
|
||||
|
||||
#####上标和下标
|
||||
|
||||
上标：X<sup>2</sup>
|
||||
|
||||
下标：O<sub>2</sub>
|
||||
|
||||
##### 代码块里包含的过滤标签及属性不会被过滤
|
||||
|
||||
```html
|
||||
<style type="text/style">
|
||||
body{background:red;}
|
||||
</style>
|
||||
|
||||
<script type="text/javscript">
|
||||
alert("script");
|
||||
</script>
|
||||
|
||||
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen></iframe>
|
||||
```
|
||||
|
||||
#####Style
|
||||
|
||||
<style>
|
||||
body{background:red;}
|
||||
</style>
|
||||
|
||||
<style type="text/style">
|
||||
body{background:red;}
|
||||
</style>
|
||||
|
||||
#####Script
|
||||
|
||||
<script>
|
||||
alert("script");
|
||||
</script>
|
||||
|
||||
<script type="text/javscript">
|
||||
alert("script");
|
||||
</script></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <script src="js/zepto.min.js"></script>
|
||||
<script>
|
||||
var jQuery = Zepto; // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
|
||||
</script> -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../lib/marked.min.js"></script>
|
||||
<script src="../lib/prettify.min.js"></script>
|
||||
|
||||
<script src="../lib/raphael.min.js"></script>
|
||||
<script src="../lib/underscore.min.js"></script>
|
||||
<script src="../lib/sequence-diagram.min.js"></script>
|
||||
<script src="../lib/flowchart.min.js"></script>
|
||||
<script src="../lib/jquery.flowchart.min.js"></script>
|
||||
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditormdView, testEditormdView2;
|
||||
|
||||
$.get("test.md", function(markdown) {
|
||||
|
||||
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
|
||||
markdown : markdown ,//+ "\r\n" + $("#append-test").text(),
|
||||
//htmlDecode : true, // 开启 HTML 标签解析，为了安全性，默认不开启
|
||||
htmlDecode : "style,script,iframe", // you can filter tags decode
|
||||
//toc : false,
|
||||
tocm : true, // Using [TOCM]
|
||||
tocContainer : "#custom-toc-container", // 自定义 ToC 容器层
|
||||
//gfm : false,
|
||||
//tocDropdown : true,
|
||||
// markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
|
||||
emoji : true,
|
||||
taskList : true,
|
||||
tex : true, // 默认不解析
|
||||
flowChart : true, // 默认不解析
|
||||
sequenceDiagram : true, // 默认不解析
|
||||
});
|
||||
|
||||
//console.log("返回一个 jQuery 实例 =>", testEditormdView);
|
||||
|
||||
// 获取Markdown源码
|
||||
//console.log(testEditormdView.getMarkdown());
|
||||
|
||||
//alert(testEditormdView.getMarkdown());
|
||||
});
|
||||
|
||||
testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
|
||||
htmlDecode : "style,script,iframe", // you can filter tags decode
|
||||
emoji : true,
|
||||
taskList : true,
|
||||
tex : true, // 默认不解析
|
||||
flowChart : true, // 默认不解析
|
||||
sequenceDiagram : true, // 默认不解析
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
142
public/editormd/examples/html-preview-markdown-to-html.html
Normal file
142
public/editormd/examples/html-preview-markdown-to-html.html
Normal file
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>HTML Preview(markdown to html) - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.preview.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
<style>
|
||||
.editormd-html-preview {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Markdown转HTML的显示处理</h1>
|
||||
<p>即：非编辑情况下的HTML预览</p>
|
||||
<p>HTML Preview(markdown to html)</p>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button onclick="location.href='./html-preview-markdown-to-html-custom-toc-container.html';">将 ToC 移到自定义容器层</button>
|
||||
</div>
|
||||
<div id="test-editormd-view">
|
||||
<textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>
|
||||
</div>
|
||||
<div id="test-editormd-view2">
|
||||
<textarea id="append-test" style="display:none;">
|
||||
|
||||
###科学公式 TeX(KaTeX)
|
||||
|
||||
$$E=mc^2$$
|
||||
|
||||
行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。
|
||||
|
||||
$$\(\sqrt{3x-1}+(1+x)^2\)$$
|
||||
|
||||
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
|
||||
|
||||
$$X^2 > Y$$
|
||||
|
||||
#####上标和下标
|
||||
|
||||
上标：X<sup>2</sup>
|
||||
|
||||
下标：O<sub>2</sub>
|
||||
|
||||
##### 代码块里包含的过滤标签及属性不会被过滤
|
||||
|
||||
```html
|
||||
<style type="text/style">
|
||||
body{background:red;}
|
||||
</style>
|
||||
|
||||
<script type="text/javscript">
|
||||
alert("script");
|
||||
</script>
|
||||
|
||||
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen></iframe>
|
||||
```
|
||||
|
||||
#####Style
|
||||
|
||||
<style>
|
||||
body{background:red;}
|
||||
</style>
|
||||
|
||||
<style type="text/style">
|
||||
body{background:red;}
|
||||
</style>
|
||||
|
||||
#####Script
|
||||
|
||||
<script>
|
||||
alert("script");
|
||||
</script>
|
||||
|
||||
<script type="text/javscript">
|
||||
alert("script");
|
||||
</script></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <script src="js/zepto.min.js"></script>
|
||||
<script>
|
||||
var jQuery = Zepto; // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
|
||||
</script> -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../lib/marked.min.js"></script>
|
||||
<script src="../lib/prettify.min.js"></script>
|
||||
|
||||
<script src="../lib/raphael.min.js"></script>
|
||||
<script src="../lib/underscore.min.js"></script>
|
||||
<script src="../lib/sequence-diagram.min.js"></script>
|
||||
<script src="../lib/flowchart.min.js"></script>
|
||||
<script src="../lib/jquery.flowchart.min.js"></script>
|
||||
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditormdView, testEditormdView2;
|
||||
|
||||
$.get("test.md", function(markdown) {
|
||||
|
||||
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
|
||||
markdown : markdown ,//+ "\r\n" + $("#append-test").text(),
|
||||
//htmlDecode : true, // 开启 HTML 标签解析，为了安全性，默认不开启
|
||||
htmlDecode : "style,script,iframe", // you can filter tags decode
|
||||
//toc : false,
|
||||
tocm : true, // Using [TOCM]
|
||||
//tocContainer : "#custom-toc-container", // 自定义 ToC 容器层
|
||||
//gfm : false,
|
||||
//tocDropdown : true,
|
||||
// markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
|
||||
emoji : true,
|
||||
taskList : true,
|
||||
tex : true, // 默认不解析
|
||||
flowChart : true, // 默认不解析
|
||||
sequenceDiagram : true, // 默认不解析
|
||||
});
|
||||
|
||||
//console.log("返回一个 jQuery 实例 =>", testEditormdView);
|
||||
|
||||
// 获取Markdown源码
|
||||
//console.log(testEditormdView.getMarkdown());
|
||||
|
||||
//alert(testEditormdView.getMarkdown());
|
||||
});
|
||||
|
||||
testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
|
||||
htmlDecode : "style,script,iframe", // you can filter tags decode
|
||||
emoji : true,
|
||||
taskList : true,
|
||||
tex : true, // 默认不解析
|
||||
flowChart : true, // 默认不解析
|
||||
sequenceDiagram : true, // 默认不解析
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
119
public/editormd/examples/html-tags-decode.html
Normal file
119
public/editormd/examples/html-tags-decode.html
Normal file
@@ -0,0 +1,119 @@
|
||||
<!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="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>识别和解析HTML标签</h1>
|
||||
<p>HTML tags (filter) decode, You can increase safety by filtering the danger label.</p>
|
||||
<p>注：虽然此功能能极大地扩展 Markdown 语法，但也面临着安全上的风险，所以默认是不开启的。</p>
|
||||
<p>Update: 可以通过设置 `settings.htmlDecode = "style,script,iframe|on*"`来实现过滤指定标签及属性的解析，提高安全性；</p>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button class="filter-btn" exp="true">Unfilter</button>
|
||||
<button class="filter-btn" exp="style,script,iframe|*">Filter style,script,iframe|*</button>
|
||||
<button class="filter-btn" exp="style,script,iframe|on*">Filter style,script,iframe|on*</button>
|
||||
<button class="filter-btn" exp="style,script,iframe|onclick,title,onmouseover,onmouseout,style">Filter style,script,iframe|onclick,title,onmouseover,onmouseout,style</button>
|
||||
</div>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### 开启识别和解析 HTML 标签
|
||||
|
||||
配置项：
|
||||
|
||||
{
|
||||
htmlDecode : true // Decode all html tags & attributes
|
||||
// Filter tags/attributes expression : tagName,tagName,...|attrName,attrName,...
|
||||
htmlDecode : "style,script,iframe,sub,sup|on*" // Filter tags, and all on* attributes
|
||||
//htmlDecode : "style,script,iframe,sub,sup|*" // Filter tags, and all attributes
|
||||
//htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
|
||||
}
|
||||
|
||||
#### 示例
|
||||
|
||||
##### 上标和下标
|
||||
|
||||
上标：X<sup>2</sup>
|
||||
|
||||
下标：O<sub>2</sub>
|
||||
|
||||
##### 代码块里包含的过滤标签及属性不会被过滤
|
||||
|
||||
```html
|
||||
<style type="text/style">
|
||||
body{background:red;}
|
||||
</style>
|
||||
|
||||
<script type="text/javscript">
|
||||
alert("script");
|
||||
</script>
|
||||
|
||||
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen></iframe>
|
||||
```
|
||||
|
||||
##### Style
|
||||
|
||||
<style>
|
||||
body{background:red;}
|
||||
</style>
|
||||
|
||||
<style type="text/style">
|
||||
body{background:red;}
|
||||
</style>
|
||||
|
||||
##### Script
|
||||
|
||||
<script>
|
||||
alert("script");
|
||||
</script>
|
||||
|
||||
<script type="text/javscript">
|
||||
alert("script");
|
||||
</script>
|
||||
|
||||
##### Events
|
||||
|
||||
<div style="color:green;" onclick="alert(1233);" title="div xxxxx">Events</div>
|
||||
<div style="color:red;" contenteditable onclick="alert(1233);" onmouseover="alert(1233);" onmouseout="alert(1233);" title="div xxxxx">Events</div>
|
||||
|
||||
##### 插入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="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 720,
|
||||
path : '../lib/',
|
||||
htmlDecode : true, // Decode all html tags & attributes
|
||||
// Expression : tagName,tagName,...|attrName,attrName,...
|
||||
//htmlDecode : "style,script,iframe,sub,sup|on*" // Filter tags, and all on* attributes
|
||||
//htmlDecode : "style,script,iframe,sub,sup|*" // Filter tags, and all attributes
|
||||
//htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
|
||||
});
|
||||
|
||||
$(".filter-btn").click(function(){
|
||||
testEditor.config("htmlDecode", $(this).attr("exp"));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
109
public/editormd/examples/image-cross-domain-upload.html
Normal file
109
public/editormd/examples/image-cross-domain-upload.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!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="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</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;">#### 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 版
|
||||
|
||||
当前域名：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
|
||||
header("Access-Control-Allow-Origin: *"); // Setting allow domian name
|
||||
|
||||
$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="js/jquery.min.js"></script>
|
||||
<script src="../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://www.ipandao.com/editor.md/examples/php/cross-domain-upload.php?test=dfdf",
|
||||
crossDomainUpload : true,
|
||||
uploadCallbackURL : "http://localhost/editor.md/examples/php/upload_callback.html?test=dfdf"
|
||||
|
||||
/*
|
||||
跨域时，上传的图片服务器后台只需要返回一个跳转 URL 并跳转到原页面同域下的 callback 页面，结构如下：
|
||||
{
|
||||
success : 0 | 1, // 0 表示上传失败，1 表示上传成功
|
||||
message : "提示的信息，上传成功或上传失败及错误信息等。",
|
||||
dialog_id : $_GET['dialog_id'],
|
||||
url : "远程图片地址" // 上传成功时才返回
|
||||
}
|
||||
*/
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
68
public/editormd/examples/image-upload.html
Normal file
68
public/editormd/examples/image-upload.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!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="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout" style="height: 2000px;background: #f6f6f6;">
|
||||
<header>
|
||||
<h1>图片上传示例</h1>
|
||||
<p>Image upload example</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Settings
|
||||
|
||||
```javascript
|
||||
{
|
||||
imageUpload : false,
|
||||
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
|
||||
imageUploadURL : "./php/upload.php",
|
||||
}
|
||||
```
|
||||
|
||||
#### JSON data
|
||||
|
||||
```json
|
||||
{
|
||||
success : 0 | 1, // 0 表示上传失败，1 表示上传成功
|
||||
message : "提示的信息，上传成功或上传失败及错误信息等。",
|
||||
url : "图片地址" // 上传成功时才返回
|
||||
}
|
||||
```</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 640,
|
||||
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?test=dfdf",
|
||||
|
||||
/*
|
||||
上传的后台只需要返回一个 JSON 数据，结构如下：
|
||||
{
|
||||
success : 0 | 1, // 0 表示上传失败，1 表示上传成功
|
||||
message : "提示的信息，上传成功或上传失败及错误信息等。",
|
||||
url : "图片地址" // 上传成功时才返回
|
||||
}
|
||||
*/
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/editormd/examples/images/4.jpg
Normal file
BIN
public/editormd/examples/images/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
BIN
public/editormd/examples/images/7.jpg
Normal file
BIN
public/editormd/examples/images/7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
public/editormd/examples/images/8.jpg
Normal file
BIN
public/editormd/examples/images/8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
public/editormd/examples/images/editormd-screenshot.png
Normal file
BIN
public/editormd/examples/images/editormd-screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
356
public/editormd/examples/index.html
Normal file
356
public/editormd/examples/index.html
Normal file
@@ -0,0 +1,356 @@
|
||||
<!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="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
<style>
|
||||
#layout {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
#header {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
background: #2196F3;
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2196F3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#header h1 {
|
||||
font-size: 45px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 90%;
|
||||
padding-bottom:30px;
|
||||
margin: 0 auto;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul li {
|
||||
width: 24%;
|
||||
margin-bottom: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
color: #2196F3;
|
||||
display: block;
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
-webkit-transition: all 300ms ease-out;
|
||||
transition: all 300ms ease-out;
|
||||
}
|
||||
|
||||
ul li a span {
|
||||
color: #999;
|
||||
display: block;
|
||||
padding-top: 3px;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
ul li a:hover {
|
||||
color: #fff;
|
||||
background: #2196F3;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
ul li a:hover span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.category, .footer {
|
||||
width: 90%;
|
||||
padding: 15px;
|
||||
font-size: 18px;
|
||||
margin: 15px auto 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border: none;
|
||||
border-top: 1px solid #eee;
|
||||
font-size: 12px;
|
||||
margin-top: 30px;
|
||||
padding-top: 35px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
padding: 8px 15px;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: background-color 300ms ease-out;
|
||||
transition: background-color 300ms ease-out;
|
||||
}
|
||||
.menu a:hover {
|
||||
background-color: #1A8BE8;
|
||||
}
|
||||
|
||||
[href="#top"] {
|
||||
color: #999;
|
||||
float: right;
|
||||
padding-top: 10px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
[href="#top"] .fa {
|
||||
margin-left: 8px;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a name="top"></a>
|
||||
<div id="layout">
|
||||
<div id="header">
|
||||
<h1><i class="editormd-logo editormd-logo-3x"></i></h1>
|
||||
<h1>Editor.md Examples</h1>
|
||||
<p>Open source online markdown editor.</p>
|
||||
<div class="menu">
|
||||
<a href="#basic">Basic</a>
|
||||
<a href="#customs">自定义 Customs</a>
|
||||
<a href="#markdown-extras">Markdown Extras</a>
|
||||
<a href="#image-upload">Image Upload</a>
|
||||
<a href="#events">事件处理 Events handle</a>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="category"><a name="basic"></a>Basic</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="./simple.html">简单示例 <span>Simple example</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./full.html">完整示例 <span>Full example</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./use-requirejs.html">使用 Require.js <span>Using Require.js</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./use-seajs.html">使用 Sea.js <span>Using Seajs</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./use-zepto.html">使用 Zepto.js <span>Using Zepto.js</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./form-get-value.html">表单取值 <span>Get textarea value in form</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./html-preview-markdown-to-html.html">非编辑时 Markdown 转 HTML 的显示处理 <span>Markdown to HTML for preview</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<h1 class="category">
|
||||
<a href="#top">TOP<i class="fa fa-angle-up"></i></a>
|
||||
<a name="customs"></a>自定义 Customs
|
||||
</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="./custom-toolbar.html">自定义工具栏 <span>Custom toolbar</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multi-languages.html">多语言 <span>Multi-languages for l18n</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./auto-height.html">自动高度 <span>Auto height</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./toolbar-auto-fixed.html">工具栏自动固定定位的开启与禁用 <span>Enable / disable toolbar auto fixed position.</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./dynamic-create-editormd.html">动态创建 Editor.md <span>Dynamic create Editor.md</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./delay-renderer-preview.html">延迟解析和预览 <span>Delay Rerender & Preview</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multi-editormd.html">多个 Editor.md 并存 <span>Multi Editor.md</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./goto-line.html">跳转到指定的行 <span>Goto line</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./readonly.html">只读模式 <span>Read only mode</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./themes.html">自定义编辑器样式主题 <span>Setting / change editor style theme</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./search-replace.html">搜索替换功能 <span>Search / Replace</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./code-fold.html">代码折叠功能 <span>Code fold</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom-keyboard-shortcuts.html">自定义键盘快捷键 <span>Custom keyboard shortcuts</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./define-plugin.html">自定义插件 <span>Define extention plugins for Editor.md</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./manually-load-modules.html">手动加载依赖模块文件 <span>Manually loading dependent module files.</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./sync-scrolling.html">双向、单向或禁用同步滚动 <span>Bisync, Single, Disabled sync scrolling</span></a>
|
||||
<li>
|
||||
<li>
|
||||
<a href="./external-use.html">外部使用工具栏的操作方法和对话框 <span>External use of toolbar handlers / modal dialog</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./resettings.html">加载完成且创建成功之后的重配置 <span>loaded resettings</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./change-mode.html">变身为代码编辑器 <span>Change mode become to the code editor</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./set-get-replace-selection.html">插入字符 / 设置和获取光标位置 / 设置、获取和替换选中的文本 <span>Insert value & Set / Get cursor & Set / Get / Replace selection</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./extends.html">扩展成员方法和属性 <span>Expanded of member methods and properties</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<h1 class="category">
|
||||
<a href="#top">TOP<i class="fa fa-angle-up"></i></a>
|
||||
<a name="markdown-extras"></a>Markdown Extras
|
||||
</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="./html-tags-decode.html">识别和（过滤）解析 HTML 标签 <span>HTML tags (fliter) decode</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./toc.html">自动生成目录(下拉菜单) ToC / ToCM <span>Table of Contents (ToC)</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./task-lists.html">GFM 任务列表 <span>Github Flavored Markdown (GFM) Task Lists</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./@links.html">@链接 <span>@links</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./emoji.html">Emoji / Twemoji 表情 / Font Awesome 图标 <span>Emoji / Twemoji / Font Awesome icons</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./katex.html">科学公式 TeX <span>TeX / LaTeX (Based on KaTeX)</span> </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./flowchart.html">流程图 <span>FlowChart example</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./sequence-diagram.html">时序图 / 序列图 <span>Sequence Diagram example</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./page-break.html">分页符 <span>Page break</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<h1 class="category">
|
||||
<a href="#top">TOP<i class="fa fa-angle-up"></i></a>
|
||||
<a name="image-upload"></a>Image Upload
|
||||
</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="./image-upload.html">图片上传 <span>Image upload</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./image-cross-domain-upload.html">图片跨域上传 <span>Image cross-domain upload</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<h1 class="category">
|
||||
<a href="#top">TOP<i class="fa fa-angle-up"></i></a>
|
||||
<a name="events"></a>事件处理 Events handle
|
||||
</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="./on-off.html">事件注册和解除方法 <span>On / Off (bind/unbind) event handle</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./onload.html">加载完成事件处理 <span>Onload event handle example</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./onchange.html">变化监听处理 <span>Onchange event handle example</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./onfullscreen.html">全屏事件处理 <span>Onfullscreen / onfullscreenExit event handle example</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./onresize.html">Onresize<span>Onresize event handle</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./onpreviewing-onpreviewed.html">Onpreviewing / Onpreviewed<span>Onpreviewing / Onpreviewed event handle</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./onwatch-onunwatch.html">Onwatch / Onunwatch<span>Onwatch / Onunwatch event handle</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./onscroll-onpreviewscroll.html">Onscroll / Onpreviewscroll<span>Onscroll / Onpreviewscroll event handle</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clear"></div>
|
||||
<div class="footer">
|
||||
<p>
|
||||
<a href="https://pandao.github.io/editor.md/" target="_blank" title="Editor.md">
|
||||
<img src="https://pandao.github.io/editor.md/images/logos/editormd-logo-64x64.png"/>
|
||||
</a>
|
||||
</p>
|
||||
<p>Copyright © 2015 <a href="https://pandao.github.io/editor.md/" target="_blank" title="Editor.md">Editor.md</a></p>
|
||||
<p>Open source online markdown editor. <a href="https://github.com/pandao/editor.md" class="fa fa-github fa-lg" target="_blank" title="Editor.md in Github"></a></p>
|
||||
<p>The <a href="https://github.com/pandao/editor.md/blob/master/LICENSE" target="_blank">MIT</a> license</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script>
|
||||
var clickOrTouch = function(touchType) {
|
||||
touchType = touchType || "touchend";
|
||||
var eventType = "click";
|
||||
|
||||
try {
|
||||
document.createEvent("TouchEvent");
|
||||
eventType = touchType;
|
||||
} catch(e) {}
|
||||
|
||||
return eventType;
|
||||
};
|
||||
|
||||
$(function() {
|
||||
|
||||
$("a[href*=#]").bind(clickOrTouch(), function() {
|
||||
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname)
|
||||
{
|
||||
var hash = this.hash;
|
||||
var target = $(hash);
|
||||
target = target.length && target || $("[name=" + hash.slice(1) + "]");
|
||||
|
||||
if (target.length)
|
||||
{
|
||||
$("html, body").animate({
|
||||
scrollTop: target.offset().top
|
||||
}, 800);
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
4
public/editormd/examples/js/jquery.min.js
vendored
Normal file
4
public/editormd/examples/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
36
public/editormd/examples/js/require.min.js
vendored
Normal file
36
public/editormd/examples/js/require.min.js
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
/*
|
||||
RequireJS 2.1.15 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved.
|
||||
Available via the MIT or new BSD license.
|
||||
see: http://github.com/jrburke/requirejs for details
|
||||
*/
|
||||
var requirejs,require,define;
|
||||
(function(ba){function G(b){return"[object Function]"===K.call(b)}function H(b){return"[object Array]"===K.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function T(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function t(b,c){return fa.call(b,c)}function m(b,c){return t(b,c)&&b[c]}function B(b,c){for(var d in b)if(t(b,d)&&c(b[d],d))break}function U(b,c,d,e){c&&B(c,function(c,g){if(d||!t(b,g))e&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
|
||||
RegExp)?(b[g]||(b[g]={}),U(b[g],c,d,e)):b[g]=c});return b}function u(b,c){return function(){return c.apply(b,arguments)}}function ca(b){throw b;}function da(b){if(!b)return b;var c=ba;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,e){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=e;d&&(c.originalError=d);return c}function ga(b){function c(a,k,b){var f,l,c,d,e,g,i,p,k=k&&k.split("/"),h=j.map,n=h&&h["*"];if(a){a=a.split("/");l=a.length-1;j.nodeIdCompat&&
|
||||
Q.test(a[l])&&(a[l]=a[l].replace(Q,""));"."===a[0].charAt(0)&&k&&(l=k.slice(0,k.length-1),a=l.concat(a));l=a;for(c=0;c<l.length;c++)if(d=l[c],"."===d)l.splice(c,1),c-=1;else if(".."===d&&!(0===c||1==c&&".."===l[2]||".."===l[c-1])&&0<c)l.splice(c-1,2),c-=2;a=a.join("/")}if(b&&h&&(k||n)){l=a.split("/");c=l.length;a:for(;0<c;c-=1){e=l.slice(0,c).join("/");if(k)for(d=k.length;0<d;d-=1)if(b=m(h,k.slice(0,d).join("/")))if(b=m(b,e)){f=b;g=c;break a}!i&&(n&&m(n,e))&&(i=m(n,e),p=c)}!f&&i&&(f=i,g=p);f&&(l.splice(0,
|
||||
g,f),a=l.join("/"))}return(f=m(j.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(k){if(k.getAttribute("data-requiremodule")===a&&k.getAttribute("data-requirecontext")===i.contextName)return k.parentNode.removeChild(k),!0})}function e(a){var k=m(j.paths,a);if(k&&H(k)&&1<k.length)return k.shift(),i.require.undef(a),i.makeRequire(null,{skipMap:!0})([a]),!0}function n(a){var k,c=a?a.indexOf("!"):-1;-1<c&&(k=a.substring(0,c),a=a.substring(c+1,a.length));return[k,a]}function p(a,
|
||||
k,b,f){var l,d,e=null,g=k?k.name:null,j=a,p=!0,h="";a||(p=!1,a="_@r"+(K+=1));a=n(a);e=a[0];a=a[1];e&&(e=c(e,g,f),d=m(r,e));a&&(e?h=d&&d.normalize?d.normalize(a,function(a){return c(a,g,f)}):-1===a.indexOf("!")?c(a,g,f):a:(h=c(a,g,f),a=n(h),e=a[0],h=a[1],b=!0,l=i.nameToUrl(h)));b=e&&!d&&!b?"_unnormalized"+(O+=1):"";return{prefix:e,name:h,parentMap:k,unnormalized:!!b,url:l,originalName:j,isDefine:p,id:(e?e+"!"+h:h)+b}}function s(a){var k=a.id,b=m(h,k);b||(b=h[k]=new i.Module(a));return b}function q(a,
|
||||
k,b){var f=a.id,c=m(h,f);if(t(r,f)&&(!c||c.defineEmitComplete))"defined"===k&&b(r[f]);else if(c=s(a),c.error&&"error"===k)b(c.error);else c.on(k,b)}function w(a,b){var c=a.requireModules,f=!1;if(b)b(a);else if(v(c,function(b){if(b=m(h,b))b.error=a,b.events.error&&(f=!0,b.emit("error",a))}),!f)g.onError(a)}function x(){R.length&&(ha.apply(A,[A.length,0].concat(R)),R=[])}function y(a){delete h[a];delete V[a]}function F(a,b,c){var f=a.map.id;a.error?a.emit("error",a.error):(b[f]=!0,v(a.depMaps,function(f,
|
||||
d){var e=f.id,g=m(h,e);g&&(!a.depMatched[d]&&!c[e])&&(m(b,e)?(a.defineDep(d,r[e]),a.check()):F(g,b,c))}),c[f]=!0)}function D(){var a,b,c=(a=1E3*j.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],l=[],g=!1,h=!0;if(!W){W=!0;B(V,function(a){var i=a.map,j=i.id;if(a.enabled&&(i.isDefine||l.push(a),!a.error))if(!a.inited&&c)e(j)?g=b=!0:(f.push(j),d(j));else if(!a.inited&&(a.fetched&&i.isDefine)&&(g=!0,!i.prefix))return h=!1});if(c&&f.length)return a=C("timeout","Load timeout for modules: "+f,null,
|
||||
f),a.contextName=i.contextName,w(a);h&&v(l,function(a){F(a,{},{})});if((!c||b)&&g)if((z||ea)&&!X)X=setTimeout(function(){X=0;D()},50);W=!1}}function E(a){t(r,a[0])||s(p(a[0],null,!0)).init(a[1],a[2])}function I(a){var a=a.currentTarget||a.srcElement,b=i.onScriptLoad;a.detachEvent&&!Y?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=i.onScriptError;(!a.detachEvent||Y)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function J(){var a;
|
||||
for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var W,Z,i,L,X,j={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},h={},V={},$={},A=[],r={},S={},aa={},K=1,O=1;L={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?r[a.map.id]=a.exports:a.exports=r[a.map.id]={}},module:function(a){return a.module?
|
||||
a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return m(j.config,a.map.id)||{}},exports:a.exports||(a.exports={})}}};Z=function(a){this.events=m($,a.id)||{};this.map=a;this.shim=m(j.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};Z.prototype={init:function(a,b,c,f){f=f||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=u(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=
|
||||
c;this.inited=!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],u(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
|
||||
this.map.url;S[a]||(S[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var f=this.exports,l=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(l)){if(this.events.error&&this.map.isDefine||g.onError!==ca)try{f=i.execCb(c,l,b,f)}catch(d){a=d}else f=i.execCb(c,l,b,f);this.map.isDefine&&void 0===f&&((b=this.module)?f=b.exports:this.usingExports&&
|
||||
(f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=l;this.exports=f;if(this.map.isDefine&&!this.ignore&&(r[c]=f,g.onResourceLoad))g.onResourceLoad(i,this.map,this.depMaps);y(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
|
||||
this.map,b=a.id,d=p(a.prefix);this.depMaps.push(d);q(d,"defined",u(this,function(f){var l,d;d=m(aa,this.map.id);var e=this.map.name,P=this.map.parentMap?this.map.parentMap.name:null,n=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(e=f.normalize(e,function(a){return c(a,P,!0)})||""),f=p(a.prefix+"!"+e,this.map.parentMap),q(f,"defined",u(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=m(h,f.id)){this.depMaps.push(f);
|
||||
if(this.events.error)d.on("error",u(this,function(a){this.emit("error",a)}));d.enable()}}else d?(this.map.url=i.nameToUrl(d),this.load()):(l=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),l.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(h,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),l.fromText=u(this,function(f,c){var d=a.name,e=p(d),P=M;c&&(f=c);P&&(M=!1);s(e);t(j.config,b)&&(j.config[d]=j.config[b]);try{g.exec(f)}catch(h){return w(C("fromtexteval",
|
||||
"fromText eval for "+b+" failed: "+h,h,[b]))}P&&(M=!0);this.depMaps.push(e);i.completeLoad(d);n([d],l)}),f.load(a.name,n,l,j))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){V[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,u(this,function(a,b){var c,f;if("string"===typeof a){a=p(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=m(L,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;q(a,"defined",u(this,function(a){this.defineDep(b,
|
||||
a);this.check()}));this.errback&&q(a,"error",u(this,this.errback))}c=a.id;f=h[c];!t(L,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,u(this,function(a){var b=m(h,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:j,contextName:b,registry:h,defined:r,urlFetched:S,defQueue:A,Module:Z,makeModuleMap:p,
|
||||
nextTick:g.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=j.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(j[b]||(j[b]={}),U(j[b],a,!0,!0)):j[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(aa[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);b[c]=a}),j.shim=b);a.packages&&v(a.packages,function(a){var b,
|
||||
a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(j.paths[b]=a.location);j.pkgs[b]=a.name+"/"+(a.main||"main").replace(ia,"").replace(Q,"")});B(h,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=p(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ba,arguments));return b||a.exports&&da(a.exports)}},makeRequire:function(a,e){function j(c,d,m){var n,q;e.enableBuildCallback&&(d&&G(d))&&(d.__requireJsBuild=
|
||||
!0);if("string"===typeof c){if(G(d))return w(C("requireargs","Invalid require call"),m);if(a&&t(L,c))return L[c](h[a.id]);if(g.get)return g.get(i,c,a,j);n=p(c,a,!1,!0);n=n.id;return!t(r,n)?w(C("notloaded",'Module name "'+n+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):r[n]}J();i.nextTick(function(){J();q=s(p(null,a));q.skipMap=e.skipMap;q.init(c,d,m,{enabled:!0});D()});return j}e=e||{};U(j,{isBrowser:z,toUrl:function(b){var d,e=b.lastIndexOf("."),k=b.split("/")[0];if(-1!==
|
||||
e&&(!("."===k||".."===k)||1<e))d=b.substring(e,b.length),b=b.substring(0,e);return i.nameToUrl(c(b,a&&a.id,!0),d,!0)},defined:function(b){return t(r,p(b,a,!1,!0).id)},specified:function(b){b=p(b,a,!1,!0).id;return t(r,b)||t(h,b)}});a||(j.undef=function(b){x();var c=p(b,a,!0),e=m(h,b);d(b);delete r[b];delete S[c.url];delete $[b];T(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&($[b]=e.events),y(b))});return j},enable:function(a){m(h,a.id)&&s(a).enable()},completeLoad:function(a){var b,
|
||||
c,d=m(j.shim,a)||{},g=d.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=m(h,a);if(!b&&!t(r,a)&&c&&!c.inited){if(j.enforceDefine&&(!g||!da(g)))return e(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,d.deps||[],d.exportsFn])}D()},nameToUrl:function(a,b,c){var d,e,h;(d=m(j.pkgs,a))&&(a=d);if(d=m(aa,a))return i.nameToUrl(d,b,c);if(g.jsExtRegExp.test(a))d=a+(b||"");else{d=j.paths;a=a.split("/");for(e=a.length;0<e;e-=1)if(h=a.slice(0,
|
||||
e).join("/"),h=m(d,h)){H(h)&&(h=h[0]);a.splice(0,e,h);break}d=a.join("/");d+=b||(/^data\:|\?/.test(d)||c?"":".js");d=("/"===d.charAt(0)||d.match(/^[\w\+\.\-]+:/)?"":j.baseUrl)+d}return j.urlArgs?d+((-1===d.indexOf("?")?"?":"&")+j.urlArgs):d},load:function(a,b){g.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ja.test((a.currentTarget||a.srcElement).readyState))N=null,a=I(a),i.completeLoad(a.id)},onScriptError:function(a){var b=I(a);if(!e(b.id))return w(C("scripterror",
|
||||
"Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var g,x,y,D,I,E,N,J,s,O,ka=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,la=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,Q=/\.js$/,ia=/^\.\//;x=Object.prototype;var K=x.toString,fa=x.hasOwnProperty,ha=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),ea=!z&&"undefined"!==typeof importScripts,ja=z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,
|
||||
Y="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},q={},R=[],M=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;q=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(q=require,require=void 0);g=requirejs=function(b,c,d,e){var n,p="_";!H(b)&&"string"!==typeof b&&(n=b,H(c)?(b=c,c=d,d=e):b=[]);n&&n.context&&(p=n.context);(e=m(F,p))||(e=F[p]=g.s.newContext(p));n&&e.configure(n);return e.require(b,c,d)};g.config=function(b){return g(b)};
|
||||
g.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=g);g.version="2.1.15";g.jsExtRegExp=/^\/|:|\?|\.js$/;g.isBrowser=z;x=g.s={contexts:F,newContext:ga};g({});v(["toUrl","undef","defined","specified"],function(b){g[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=x.head=D.parentNode;g.onError=ca;g.createNode=function(b){var c=
|
||||
b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};g.load=function(b,c,d){var e=b&&b.config||{};if(z)return e=g.createNode(e,c,d),e.setAttribute("data-requirecontext",b.contextName),e.setAttribute("data-requiremodule",c),e.attachEvent&&!(e.attachEvent.toString&&0>e.attachEvent.toString().indexOf("[native code"))&&!Y?(M=!0,e.attachEvent("onreadystatechange",b.onScriptLoad)):
|
||||
(e.addEventListener("load",b.onScriptLoad,!1),e.addEventListener("error",b.onScriptError,!1)),e.src=d,J=e,D?y.insertBefore(e,D):y.appendChild(e),J=null,e;if(ea)try{importScripts(d),b.completeLoad(c)}catch(m){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,m,[c]))}};z&&!q.skipDataMain&&T(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(I=b.getAttribute("data-main"))return s=I,q.baseUrl||(E=s.split("/"),s=E.pop(),O=E.length?E.join("/")+"/":"./",q.baseUrl=
|
||||
O),s=s.replace(Q,""),g.jsExtRegExp.test(s)&&(s=I),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var e,g;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(ka,"").replace(la,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(M){if(!(e=J))N&&"interactive"===N.readyState||T(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return N=b}),e=N;e&&(b||
|
||||
(b=e.getAttribute("data-requiremodule")),g=F[e.getAttribute("data-requirecontext")])}(g?g.defQueue:R).push([b,c,d])};define.amd={jQuery:!0};g.exec=function(b){return eval(b)};g(q)}})(this);
|
||||
2
public/editormd/examples/js/sea.js
Normal file
2
public/editormd/examples/js/sea.js
Normal file
File diff suppressed because one or more lines are too long
74
public/editormd/examples/js/seajs-main.js
Normal file
74
public/editormd/examples/js/seajs-main.js
Normal file
@@ -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();
|
||||
});
|
||||
});
|
||||
2
public/editormd/examples/js/zepto.min.js
vendored
Normal file
2
public/editormd/examples/js/zepto.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
192
public/editormd/examples/katex.html
Normal file
192
public/editormd/examples/katex.html
Normal file
@@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Tex 科学公式语言 (TeX/LaTeX) - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Tex 科学公式语言 (TeX/LaTeX)</h1>
|
||||
<p>Based on KaTeX.js：<a href="http://khan.github.io/KaTeX/" target="_blank">http://khan.github.io/KaTeX/</a></p>
|
||||
<p>P.S. Default using CloudFlare KaTeX's CDN. (注：默认使用 CloudFlare 的 CDN，有时加载速度会比较慢，可自定义加载地址。)</p>
|
||||
<br/>
|
||||
<p><a href="https://jsperf.com/katex-vs-mathjax" target="_blank">KaTeX vs MathJax</a></p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">[TOC]
|
||||
|
||||
#### Setting
|
||||
|
||||
{
|
||||
tex : true
|
||||
}
|
||||
|
||||
#### Custom KaTeX source URL
|
||||
|
||||
```javascript
|
||||
// Default using CloudFlare KaTeX's CDN
|
||||
// You can custom url
|
||||
editormd.katexURL = {
|
||||
js : "your url", // default: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min
|
||||
css : "your url" // default: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min
|
||||
};
|
||||
```
|
||||
|
||||
#### Examples
|
||||
|
||||
##### 行内的公式 Inline
|
||||
|
||||
$$E=mc^2$$
|
||||
|
||||
Inline 行内的公式 $$E=mc^2$$ 行内的公式，行内的$$E=mc^2$$公式。
|
||||
|
||||
$$c = \\pm\\sqrt{a^2 + b^2}$$
|
||||
|
||||
$$x > y$$
|
||||
|
||||
$$f(x) = x^2$$
|
||||
|
||||
$$\alpha = \sqrt{1-e^2}$$
|
||||
|
||||
$$\(\sqrt{3x-1}+(1+x)^2\)$$
|
||||
|
||||
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
|
||||
|
||||
$$\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$$
|
||||
|
||||
$$f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi$$
|
||||
|
||||
$$\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }$$
|
||||
|
||||
$$\displaystyle \left( \sum\_{k=1}^n a\_k b\_k \right)^2 \leq \left( \sum\_{k=1}^n a\_k^2 \right) \left( \sum\_{k=1}^n b\_k^2 \right)$$
|
||||
|
||||
$$a^2$$
|
||||
|
||||
$$a^{2+2}$$
|
||||
|
||||
$$a_2$$
|
||||
|
||||
$${x_2}^3$$
|
||||
|
||||
$$x_2^3$$
|
||||
|
||||
$$10^{10^{8}}$$
|
||||
|
||||
$$a_{i,j}$$
|
||||
|
||||
$$_nP_k$$
|
||||
|
||||
$$c = \pm\sqrt{a^2 + b^2}$$
|
||||
|
||||
$$\frac{1}{2}=0.5$$
|
||||
|
||||
$$\dfrac{k}{k-1} = 0.5$$
|
||||
|
||||
$$\dbinom{n}{k} \binom{n}{k}$$
|
||||
|
||||
$$\oint_C x^3\, dx + 4y^2\, dy$$
|
||||
|
||||
$$\bigcap_1^n p \bigcup_1^k p$$
|
||||
|
||||
$$e^{i \pi} + 1 = 0$$
|
||||
|
||||
$$\left ( \frac{1}{2} \right )$$
|
||||
|
||||
$$x_{1,2}=\frac{-b\pm\sqrt{\color{Red}b^2-4ac}}{2a}$$
|
||||
|
||||
$${\color{Blue}x^2}+{\color{YellowOrange}2x}-{\color{OliveGreen}1}$$
|
||||
|
||||
$$\textstyle \sum_{k=1}^N k^2$$
|
||||
|
||||
$$\dfrac{ \tfrac{1}{2}[1-(\tfrac{1}{2})^n] }{ 1-\tfrac{1}{2} } = s_n$$
|
||||
|
||||
$$\binom{n}{k}$$
|
||||
|
||||
$$0+1+2+3+4+5+6+7+8+9+10+11+12+13+14+15+16+17+18+19+20+\cdots$$
|
||||
|
||||
$$\sum_{k=1}^N k^2$$
|
||||
|
||||
$$\textstyle \sum_{k=1}^N k^2$$
|
||||
|
||||
$$\prod_{i=1}^N x_i$$
|
||||
|
||||
$$\textstyle \prod_{i=1}^N x_i$$
|
||||
|
||||
$$\coprod_{i=1}^N x_i$$
|
||||
|
||||
$$\textstyle \coprod_{i=1}^N x_i$$
|
||||
|
||||
$$\int_{1}^{3}\frac{e^3/x}{x^2}\, dx$$
|
||||
|
||||
$$\int_C x^3\, dx + 4y^2\, dy$$
|
||||
|
||||
$${}_1^2\!\Omega_3^4$$
|
||||
|
||||
##### 多行公式 Multi line
|
||||
|
||||
> \`\`\`math or \`\`\`latex or \`\`\`katex
|
||||
|
||||
```math
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi
|
||||
```
|
||||
|
||||
```math
|
||||
\displaystyle
|
||||
\left( \sum\_{k=1}^n a\_k b\_k \right)^2
|
||||
\leq
|
||||
\left( \sum\_{k=1}^n a\_k^2 \right)
|
||||
\left( \sum\_{k=1}^n b\_k^2 \right)
|
||||
```
|
||||
|
||||
```math
|
||||
\dfrac{
|
||||
\tfrac{1}{2}[1-(\tfrac{1}{2})^n] }
|
||||
{ 1-\tfrac{1}{2} } = s_n
|
||||
```
|
||||
|
||||
```katex
|
||||
\displaystyle
|
||||
\frac{1}{
|
||||
\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
|
||||
\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
|
||||
1+\frac{e^{-6\pi}}
|
||||
{1+\frac{e^{-8\pi}}
|
||||
{1+\cdots} }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```latex
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi
|
||||
```
|
||||
|
||||
#### KaTeX vs MathJax
|
||||
|
||||
[https://jsperf.com/katex-vs-mathjax](https://jsperf.com/katex-vs-mathjax "KaTeX vs MathJax")
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 640,
|
||||
path : '../lib/',
|
||||
tex : true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
109
public/editormd/examples/manually-load-modules.html
Normal file
109
public/editormd/examples/manually-load-modules.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Manually load modules - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>手动加载模式 Manually load modules</h1>
|
||||
<p>在这种模式下，可以同步使用 Editor.md 实例的成员方法。</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Manually load modules exmaple
|
||||
|
||||
```html
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../lib/codemirror/codemirror.min.css" />
|
||||
<link rel="stylesheet" href="../lib/codemirror/addon/dialog/dialog.css" />
|
||||
<link rel="stylesheet" href="../lib/codemirror/addon/search/matchesonscrollbar.css" />
|
||||
<script src="../lib/codemirror/codemirror.min.js"></script>
|
||||
|
||||
<!-- Or, You can also one by one load CodeMirror modes & addons. -->
|
||||
<script src="../lib/codemirror/addons.min.js"></script>
|
||||
<script src="../lib/codemirror/modes.min.js"></script>
|
||||
|
||||
<script src="../lib/marked.min.js"></script>
|
||||
|
||||
<!-- if setting previewCodeHighlight == true -->
|
||||
<script src="../lib/prettify.min.js"></script>
|
||||
|
||||
<!-- if setting flowchart == true, or sequence-diagram == true -->
|
||||
<script src="../lib/raphael.min.js"></script>
|
||||
<script src="../lib/underscore.min.js"></script>
|
||||
<script src="../lib/sequence-diagram.min.js"></script>
|
||||
<script src="../lib/flowchart.min.js"></script>
|
||||
<script src="../lib/jquery.flowchart.min.js"></script>
|
||||
|
||||
<!-- if setting tex == true -->
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css" />
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
autoLoadModules : false // Manually load modules
|
||||
});
|
||||
|
||||
testEditor.fullscreen(); // In Manually load mode, You can be synchronized using the member method.
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
#### KaTeX test
|
||||
|
||||
$$E = mc^2$$
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../lib/codemirror/codemirror.min.css" />
|
||||
<link rel="stylesheet" href="../lib/codemirror/addon/dialog/dialog.css" />
|
||||
<link rel="stylesheet" href="../lib/codemirror/addon/search/matchesonscrollbar.css" />
|
||||
<script src="../lib/codemirror/codemirror.min.js"></script>
|
||||
|
||||
<!-- Or, You can also one by one load CodeMirror modes & addons. -->
|
||||
<script src="../lib/codemirror/addons.min.js"></script>
|
||||
<script src="../lib/codemirror/modes.min.js"></script>
|
||||
|
||||
<script src="../lib/marked.min.js"></script>
|
||||
|
||||
<!-- if setting previewCodeHighlight == true -->
|
||||
<script src="../lib/prettify.min.js"></script>
|
||||
|
||||
<!-- if setting flowchart == true, or sequence-diagram == true -->
|
||||
<script src="../lib/raphael.min.js"></script>
|
||||
<script src="../lib/underscore.min.js"></script>
|
||||
<script src="../lib/sequence-diagram.min.js"></script>
|
||||
<script src="../lib/flowchart.min.js"></script>
|
||||
<script src="../lib/jquery.flowchart.min.js"></script>
|
||||
|
||||
<!-- if setting tex == true -->
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css" />
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : "../lib/",
|
||||
tex : true,
|
||||
autoLoadModules : false // Enable manually load modules
|
||||
});
|
||||
|
||||
testEditor.fullscreen(); // This can be synchronized using the member method
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
64
public/editormd/examples/multi-editormd.html
Normal file
64
public/editormd/examples/multi-editormd.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Multi Editor.md - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
<style>
|
||||
h3 {
|
||||
width : 90%;
|
||||
margin: 0 auto 15px;
|
||||
}
|
||||
|
||||
.editormd {
|
||||
margin: 20px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Multi Editor.md</h1>
|
||||
<p>多个 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>
|
||||
<h3>Editor.md C</h3>
|
||||
<div id="test-editormd3"></div>
|
||||
</div>
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../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/'
|
||||
});
|
||||
|
||||
testEditormd3 = editormd("test-editormd3", {
|
||||
width: "90%",
|
||||
height: 480,
|
||||
markdown : "#### Editor.md C",
|
||||
path : '../lib/'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
89
public/editormd/examples/multi-languages.html
Normal file
89
public/editormd/examples/multi-languages.html
Normal file
@@ -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="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</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>
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<!--<script src="../languages/en.js"></script>
|
||||
<script src="../languages/zh-tw.js"></script> -->
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 640,
|
||||
emoji : true,
|
||||
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 = "../languages/";
|
||||
|
||||
if (value == "zh-cn")
|
||||
{
|
||||
location.reload();
|
||||
}
|
||||
else
|
||||
{
|
||||
editormd.loadScript(path + value, function() {
|
||||
testEditor.lang = editormd.defaults.lang;
|
||||
|
||||
// 只重建涉及语言包的部分，如工具栏、弹出对话框等
|
||||
testEditor.recreate();
|
||||
|
||||
// 整个编辑器重建，预览HTML会重新生成，出现闪动
|
||||
//testEditor = editormd("test-editormd", {
|
||||
//width: "90%",
|
||||
//height: 640,
|
||||
//path : '../lib/'
|
||||
//});
|
||||
|
||||
lang = value;
|
||||
console.log(lang, value, editormd.defaults.lang);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
103
public/editormd/examples/on-off.html
Normal file
103
public/editormd/examples/on-off.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>On / Off (bind/unbind) event handle - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>On / Off (bind/unbind) event handle</h1>
|
||||
<p>Plaese press F12, open the develop tools.</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Example
|
||||
```javascript
|
||||
{
|
||||
onscroll : function(event) {
|
||||
console.clear();
|
||||
console.log("onscroll =>", this, this.id, this.settings, event);
|
||||
},
|
||||
|
||||
onpreviewscroll : function(event) {
|
||||
console.clear();
|
||||
console.log("onpreviewscroll =>", this, this.id, this.settings, event);
|
||||
},
|
||||
|
||||
onload : function() {
|
||||
this.off("previewscroll"); // unbind before handle
|
||||
|
||||
// Override settings.onpreviewscroll
|
||||
this.on("previewscroll", function(){
|
||||
console.clear();
|
||||
console.log("on() => Override settings.onpreviewscroll =>", this, this.id, event, (new Date).getTime());
|
||||
});
|
||||
|
||||
// defined event bind
|
||||
this.on("resize", function(){
|
||||
console.clear();
|
||||
console.log("onresize =>", this, this.id, event, (new Date).getTime());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Or
|
||||
editor.on("resize", function(){
|
||||
// ...
|
||||
});
|
||||
|
||||
editor.off("resize");
|
||||
```
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
$.get("./test.md", function(md){
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
appendMarkdown : md,
|
||||
path : '../lib/',
|
||||
tex : true,
|
||||
htmlDecode : true,
|
||||
flowChart : true,
|
||||
taskList : true,
|
||||
sequenceDiagram : true,
|
||||
onscroll : function(event) {
|
||||
console.clear();
|
||||
console.log("onscroll =>", this, this.id, this.settings, event);
|
||||
},
|
||||
onpreviewscroll : function(event) {
|
||||
console.clear();
|
||||
console.log("onpreviewscroll =>", this, this.id, this.settings, event);
|
||||
},
|
||||
onload : function() {
|
||||
this.off("previewscroll");
|
||||
|
||||
// Override settings.onpreviewscroll
|
||||
this.on("previewscroll", function(){
|
||||
console.clear();
|
||||
console.log("on() => Override settings.onpreviewscroll =>", this, this.id, event, (new Date).getTime());
|
||||
});
|
||||
|
||||
// defined event bind
|
||||
this.on("resize", function(){
|
||||
console.clear();
|
||||
console.log("onresize =>", this, this.id, event, (new Date).getTime());
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
49
public/editormd/examples/onchange.html
Normal file
49
public/editormd/examples/onchange.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Onchange - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Onchange event</h1>
|
||||
<p>Plaese press F12, open the develop tools.</p>
|
||||
<p id="output"></p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Settings
|
||||
|
||||
```javascript
|
||||
{
|
||||
onchange : function() {
|
||||
console.log("onchange =>", this, this.id, this.settings, this.state);
|
||||
// ....
|
||||
}
|
||||
}
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : '../lib/',
|
||||
onchange : function() {
|
||||
$("#output").html("onchange : this.id =>" + this.id + ", markdown =>" + this.getValue());
|
||||
console.log("onchange =>", this, this.id, this.settings, this.state);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
55
public/editormd/examples/onfullscreen.html
Normal file
55
public/editormd/examples/onfullscreen.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Onfullscreen & onfullscreenExit - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Onfullscreen & onfullscreenExit event</h1>
|
||||
<p>Plaese press F12, open the develop tools.</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Setting
|
||||
|
||||
```javascript
|
||||
{
|
||||
onfullscreen : function() {
|
||||
// alert("onfullscreen");
|
||||
// console.log("onfullscreen =>", this, this.id, this.settings);
|
||||
},
|
||||
|
||||
onfullscreenExit : function() {
|
||||
// alert("onfullscreenExit");
|
||||
// console.log("onfullscreenExit =>", this, this.id, this.settings);
|
||||
}
|
||||
}
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var editor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : '../lib/',
|
||||
onfullscreen : function() {
|
||||
alert("onfullscreen");
|
||||
console.log("onfullscreen =>", this, this.id, this.settings);
|
||||
},
|
||||
onfullscreenExit : function() {
|
||||
alert("onfullscreenExit");
|
||||
console.log("onfullscreenExit =>", this, this.id, this.settings);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
52
public/editormd/examples/onload.html
Normal file
52
public/editormd/examples/onload.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Onload - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Onload event</h1>
|
||||
<p>Plaese press F12, open the develop tools.</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Setting
|
||||
|
||||
```javascript
|
||||
{
|
||||
onload : function() {
|
||||
// alert("onload");
|
||||
// this.setMarkdown("### onloaded");
|
||||
// console.log("onload =>", this, this.id, this.settings);
|
||||
}
|
||||
}
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
//watch : false,
|
||||
//matchWordHighlight : "onselected",
|
||||
path : '../lib/',
|
||||
onload : function() {
|
||||
//this.watch();
|
||||
//this.setMarkdown("###test onloaded");
|
||||
//testEditor.setMarkdown("###Test onloaded");
|
||||
alert("onloaded");
|
||||
console.log("onloaded =>", this, this.id, this.settings);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
55
public/editormd/examples/onpreviewing-onpreviewed.html
Normal file
55
public/editormd/examples/onpreviewing-onpreviewed.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Onpreviewing / Onpreviewed - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
<style>
|
||||
.editormd-preview-active {width: 80%;margin: 0 auto;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Onpreviewing / Onpreviewed event handle</h1>
|
||||
<p>Plaese press F12, open the develop tools.</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Settings
|
||||
|
||||
```javascript
|
||||
{
|
||||
onpreviewing : function() {
|
||||
// console.log("onpreviewing =>", this, this.id, this.settings);
|
||||
// on previewing you can custom css .editormd-preview-active
|
||||
},
|
||||
|
||||
onpreviewed : function() {
|
||||
// console.log("onpreviewed =>", this, this.id, this.settings);
|
||||
}
|
||||
}
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : '../lib/',
|
||||
onpreviewing : function() {
|
||||
console.log("onpreviewing =>", this, this.id, this.settings);
|
||||
},
|
||||
onpreviewed : function() {
|
||||
console.log("onpreviewed =>", this, this.id, this.settings);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
49
public/editormd/examples/onresize.html
Normal file
49
public/editormd/examples/onresize.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Onresize - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Onresize event handle</h1>
|
||||
<p>Plaese press F12, open the develop tools.</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Settings
|
||||
|
||||
```javascript
|
||||
{
|
||||
onresize : function() {
|
||||
// console.log("onresize =>", this, this.id, this.settings);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
state.loaded
|
||||
> bind onresize event
|
||||
> window.onresize, editormd watch/unwatch/fullscreen/fullscreenExit/toolbar show|hide
|
||||
> trigger onresize event handle</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : '../lib/',
|
||||
onresize : function() {
|
||||
this.setMarkdown("state.loaded > bind onresize > window.onresize, editormd watch/unwatch/fullscreen/fullscreenExit/toolbar show|hide " + (new Date).getTime());
|
||||
console.log("onresize =>", this, this.id, this.settings);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
63
public/editormd/examples/onscroll-onpreviewscroll.html
Normal file
63
public/editormd/examples/onscroll-onpreviewscroll.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Onscroll / Onpreviewscroll - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Onscroll / Onpreviewscroll event handle</h1>
|
||||
<p>Plaese press F12, open the develop tools.</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Settings
|
||||
|
||||
```javascript
|
||||
{
|
||||
onscroll : function(event) {
|
||||
// console.clear();
|
||||
// console.log("onscroll =>", this, this.id, this.settings, event);
|
||||
// ...
|
||||
},
|
||||
|
||||
onpreviewscroll : function(event) {
|
||||
// console.clear();
|
||||
// console.log("onpreviewscroll =>", this, this.id, this.settings, event);
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
$.get("./test.md", function(md){
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
appendMarkdown : md,
|
||||
path : '../lib/',
|
||||
onscroll : function(event) {
|
||||
console.clear();
|
||||
console.log("onscroll =>", this, this.id, this.settings, event);
|
||||
},
|
||||
onpreviewscroll : function(event) {
|
||||
console.clear();
|
||||
console.log("onpreviewscroll =>", this, this.id, this.settings, event);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
51
public/editormd/examples/onwatch-onunwatch.html
Normal file
51
public/editormd/examples/onwatch-onunwatch.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Onwatch / Onunwatch - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Onwatch / Onunwatch event handle</h1>
|
||||
<p>Plaese press F12, open the develop tools.</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Settings
|
||||
|
||||
```javascript
|
||||
{
|
||||
onwatch : function() {
|
||||
// console.log("onwatch =>", this, this.id, this.settings);
|
||||
},
|
||||
|
||||
onunwatch : function() {
|
||||
// console.log("onunwatch =>", this, this.id, this.settings);
|
||||
}
|
||||
}
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : '../lib/',
|
||||
onwatch : function() {
|
||||
console.log("onwatch =>", this, this.id, this.settings);
|
||||
},
|
||||
onunwatch : function() {
|
||||
console.log("onunwatch =>", this, this.id, this.settings);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
87
public/editormd/examples/page-break.html
Normal file
87
public/editormd/examples/page-break.html
Normal file
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Page break - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Page break</h1>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="print-btn">Print Test</button>
|
||||
<button id="disabled-btn">Disabled</button>
|
||||
<button id="enabled-btn">Enabled</button>
|
||||
</div>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Syntax
|
||||
|
||||
[At least 8 equals]
|
||||
|
||||
[========]
|
||||
|
||||
#### Disabled
|
||||
|
||||
{
|
||||
pageBreak : false
|
||||
}
|
||||
|
||||
#### Examples
|
||||
|
||||
[========]
|
||||
|
||||
> page start
|
||||
|
||||
#### Editor.md directory
|
||||
|
||||
editor.md/
|
||||
lib/
|
||||
css/
|
||||
scss/
|
||||
tests/
|
||||
fonts/
|
||||
images/
|
||||
plugins/
|
||||
examples/
|
||||
languages/
|
||||
editormd.js
|
||||
...
|
||||
|
||||
> page end
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : "../lib/"
|
||||
});
|
||||
|
||||
$("#print-btn").click(function(){
|
||||
var html = testEditor.preview.html();
|
||||
|
||||
document.write('<link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="../css/editormd.css" />' + html);
|
||||
window.print();
|
||||
});
|
||||
|
||||
$("#disabled-btn").click(function(){
|
||||
testEditor.config("pageBreak", false);
|
||||
});
|
||||
|
||||
$("#enabled-btn").click(function(){
|
||||
testEditor.config("pageBreak", true);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
54
public/editormd/examples/php/cross-domain-upload.php
Normal file
54
public/editormd/examples/php/cross-domain-upload.php
Normal file
@@ -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']
|
||||
|
||||
$formats = array(
|
||||
'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp')
|
||||
);
|
||||
|
||||
$name = 'editormd-image-file'; // file input name
|
||||
$callbackUrl = $_GET['callback'];
|
||||
|
||||
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 = $callbackUrl . (empty(parse_url($callbackUrl)['query']) ? '?' : '&') . 'dialog_id=' . $_GET['dialog_id'] . '&temp=' . date('ymdhis');
|
||||
|
||||
if ($imageUploader->upload($name))
|
||||
{
|
||||
$imageUploader->message('上传成功！', 1);
|
||||
}
|
||||
else
|
||||
{
|
||||
$imageUploader->message('上传失败！', 0);
|
||||
}
|
||||
}
|
||||
?>
|
||||
341
public/editormd/examples/php/editormd.uploader.class.php
Normal file
341
public/editormd/examples/php/editormd.uploader.class.php
Normal file
@@ -0,0 +1,341 @@
|
||||
<?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-06-02 15:36:23
|
||||
* 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']);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
$this->files = $_FILES[$name];
|
||||
|
||||
if(!file_exists($this->savePath)) //目录不存在
|
||||
{
|
||||
$this->message($this->errors['not_exist']);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if(!is_writable($this->savePath)) //目录不可写
|
||||
{
|
||||
$this->message($this->errors['unwritable']);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
$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);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($files["size"] / 1024 > $this->maxSize)
|
||||
{
|
||||
$message = "您上传的 " . $files["name"] . "，文件大小超出了系统限定值" . $this->maxSize . " KB，不能上传。";
|
||||
$this->message($message);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!$this->cover) //当不能覆盖时
|
||||
{
|
||||
if(file_exists($this->savePath.$this->saveName)) //有相同的文件存在
|
||||
{
|
||||
$this->message($this->saveName . $this->errors['same_file']);
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
18
public/editormd/examples/php/post.php
Normal file
18
public/editormd/examples/php/post.php
Normal file
@@ -0,0 +1,18 @@
|
||||
<?php
|
||||
header("Content-Type:text/html; charset=utf-8");
|
||||
header("Access-Control-Allow-Origin: *");
|
||||
|
||||
if (isset($_POST['submit'])) {
|
||||
echo "<pre>";
|
||||
echo htmlspecialchars($_POST["test-editormd-markdown-doc"]);
|
||||
|
||||
if(isset($_POST["test-editormd-html-code"])) {
|
||||
echo "<br/><br/>";
|
||||
echo htmlspecialchars($_POST["test-editormd-html-code"]);
|
||||
}
|
||||
|
||||
echo "</pre>";
|
||||
}
|
||||
|
||||
exit;
|
||||
?>
|
||||
51
public/editormd/examples/php/upload.php
Normal file
51
public/editormd/examples/php/upload.php
Normal file
@@ -0,0 +1,51 @@
|
||||
<?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:application/json; charset=utf-8"); // Unsupport IE
|
||||
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);
|
||||
}
|
||||
else
|
||||
{
|
||||
$imageUploader->message('上传失败！', 0);
|
||||
}
|
||||
}
|
||||
?>
|
||||
35
public/editormd/examples/php/upload_callback.html
Normal file
35
public/editormd/examples/php/upload_callback.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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']);
|
||||
|
||||
if (parseInt(query['success']) === 1)
|
||||
{
|
||||
imageDialog.querySelector("[data-url]").value = query['url'];
|
||||
}
|
||||
else
|
||||
{
|
||||
alert(query['message']);
|
||||
}
|
||||
|
||||
location.href = "about:blank";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
60
public/editormd/examples/readonly.html
Normal file
60
public/editormd/examples/readonly.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Read only mode - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>只读模式</h1>
|
||||
<p>Read only mode</p>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="watch-btn">Enable watch</button>
|
||||
<button id="unwatch-btn">Disable watch</button>
|
||||
</div>
|
||||
<div id="test-editormd" class="editormd-onlyread">
|
||||
<textarea style="display:none;">#### Setting
|
||||
|
||||
```javascript
|
||||
{
|
||||
readOnly : true,
|
||||
//styleActiveLine : false, // disable active line
|
||||
//watch : false, // disable watch
|
||||
//lineNumbers : false // hide line numbers
|
||||
}
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 540,
|
||||
path : "../lib/",
|
||||
//watch : false, // disable watch
|
||||
readOnly : true,
|
||||
styleActiveLine : false, // disable active line
|
||||
//lineNumbers : false // hide line numbers
|
||||
});
|
||||
|
||||
$("#watch-btn").click(function(){
|
||||
testEditor.watch();
|
||||
});
|
||||
|
||||
$("#unwatch-btn").click(function(){
|
||||
testEditor.unwatch();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
144
public/editormd/examples/resettings.html
Normal file
144
public/editormd/examples/resettings.html
Normal file
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Resettings - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Resettings</h1>
|
||||
<p>只能设置依赖模块加载完成之后的相关配置或者使用拖动加载模块方式。</p>
|
||||
<p>Only be resetting the relevant configuration of dependent module loaded after, or using manually load modules mode.</p>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="show-btn">Show editor</button>
|
||||
<button id="hide-btn">Hide editor</button>
|
||||
<button id="get-md-btn">Get Markdown</button>
|
||||
<button id="get-html-btn">Get HTML</button>
|
||||
<button id="watch-btn">Watch</button>
|
||||
<button id="unwatch-btn">Unwatch</button>
|
||||
<button id="preview-btn">Preview HTML(Press ESC cancel)</button>
|
||||
<button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
|
||||
<button id="show-toolbar-btn">Show toolbar</button>
|
||||
<button id="close-toolbar-btn">Hide toolbar</button>
|
||||
</div>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Resetting examples
|
||||
|
||||
```javascript
|
||||
this.config("lineNumbers", false);
|
||||
|
||||
this.config({
|
||||
toc : false,
|
||||
tex : false,
|
||||
previewCodeHighlight : true, // before set previewCodeHighlight == false, editor not load pretty.js, so now codes can't highlight and display line numbers.
|
||||
flowChart : false,
|
||||
sequenceDiagram : false,
|
||||
dialogLockScreen : false,
|
||||
dialogDraggable : false,
|
||||
dialogMaskBgColor : "teal",
|
||||
toolbar : true
|
||||
});
|
||||
|
||||
this.config("onresize", function() {
|
||||
console.log("onresize =>", this);
|
||||
});
|
||||
```</textarea></div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../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/",
|
||||
appendMarkdown : "\n" + md,
|
||||
saveHTMLToTextarea : true,
|
||||
watch : false,
|
||||
htmlDecode : true,
|
||||
toolbar : false,
|
||||
previewCodeHighlight : false,
|
||||
tex : true,
|
||||
flowChart : true,
|
||||
sequenceDiagram : true,
|
||||
emoji : true,
|
||||
taskList : true,
|
||||
onload : function() {
|
||||
console.log('onload', this);
|
||||
|
||||
this.config("lineNumbers", false);
|
||||
|
||||
this.config({
|
||||
toc : false,
|
||||
tex : false,
|
||||
toolbar : true,
|
||||
previewCodeHighlight : true, // before set previewCodeHighlight == false, editor not load pretty.js, so now codes can't highlight and display line numbers.
|
||||
flowChart : false,
|
||||
sequenceDiagram : false,
|
||||
dialogLockScreen : false,
|
||||
dialogMaskOpacity : 0.5, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
|
||||
dialogDraggable : false,
|
||||
dialogMaskBgColor : "#000"
|
||||
});
|
||||
|
||||
this.config("onresize", function() {
|
||||
console.log("onresize =>", this);
|
||||
});
|
||||
|
||||
this.watch();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#show-btn").click(function(){
|
||||
testEditor.show();
|
||||
});
|
||||
|
||||
$("#hide-btn").click(function(){
|
||||
testEditor.hide();
|
||||
});
|
||||
|
||||
$("#get-md-btn").click(function(){
|
||||
alert(testEditor.getMarkdown());
|
||||
});
|
||||
|
||||
$("#get-html-btn").click(function() {
|
||||
alert(testEditor.getHTML());
|
||||
});
|
||||
|
||||
$("#watch-btn").click(function() {
|
||||
testEditor.watch();
|
||||
});
|
||||
|
||||
$("#unwatch-btn").click(function() {
|
||||
testEditor.unwatch();
|
||||
});
|
||||
|
||||
$("#preview-btn").click(function() {
|
||||
testEditor.previewing();
|
||||
});
|
||||
|
||||
$("#fullscreen-btn").click(function() {
|
||||
testEditor.fullscreen();
|
||||
});
|
||||
|
||||
$("#show-toolbar-btn").click(function() {
|
||||
testEditor.showToolbar();
|
||||
});
|
||||
|
||||
$("#close-toolbar-btn").click(function() {
|
||||
testEditor.hideToolbar();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
46
public/editormd/examples/search-replace.html
Normal file
46
public/editormd/examples/search-replace.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Search / Replace - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Search / Replace</h1>
|
||||
<p>Search: Press Ctrl + F / Command + F</p>
|
||||
<p>Replace: Press Ctrl + Shift + F / Command + Option + F</p>
|
||||
<p>Replace All: Press Ctrl + Shift + R / Command + Option + R</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
$.get("./test.md", function(md) {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
markdown : "#### Setting\r\n\r\n {\n searchReplace : true // default true\n }\r\n\r\n" + md,
|
||||
searchReplace : true, // default true
|
||||
htmlDecode : true,
|
||||
tex : true,
|
||||
taskList : true,
|
||||
emoji : true,
|
||||
flowChart : true,
|
||||
sequenceDiagram : true,
|
||||
path : '../lib/'
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
65
public/editormd/examples/sequence-diagram.html
Normal file
65
public/editormd/examples/sequence-diagram.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>SequenceDiagram - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.min.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>SequenceDiagram 时序图/序列图</h1>
|
||||
<p>Based on SequenceDiagram.js：<a href="http://bramp.github.io/js-sequence-diagrams/" target="_blank">http://bramp.github.io/js-sequence-diagrams/</a></p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">#### Setting
|
||||
|
||||
{
|
||||
sequenceDiagram : true
|
||||
}
|
||||
|
||||
#### Syntax
|
||||
|
||||
```seq
|
||||
.........
|
||||
```
|
||||
|
||||
# or
|
||||
|
||||
```sequence
|
||||
.........
|
||||
```
|
||||
|
||||
#### Example
|
||||
|
||||
```seq
|
||||
A->B: Message
|
||||
B->C: Message
|
||||
C->A: Message
|
||||
```
|
||||
|
||||
```sequence
|
||||
Andrew->China: Says Hello
|
||||
Note right of China: China thinks\nabout it
|
||||
China-->Andrew: How are you?
|
||||
Andrew->>China: I am good thanks!
|
||||
```</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var testEditor = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 640,
|
||||
path : '../lib/',
|
||||
sequenceDiagram : true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
110
public/editormd/examples/set-get-replace-selection.html
Normal file
110
public/editormd/examples/set-get-replace-selection.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!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="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</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;">### Examples
|
||||
|
||||
```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="js/jquery.min.js"></script>
|
||||
<script src="../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>
|
||||
76
public/editormd/examples/simple.html
Normal file
76
public/editormd/examples/simple.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Simple example - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Simple example</h1>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">[TOC]
|
||||
|
||||
#### Disabled options
|
||||
|
||||
- TeX (Based on KaTeX);
|
||||
- Emoji;
|
||||
- Task lists;
|
||||
- HTML tags decode;
|
||||
- Flowchart and Sequence Diagram;
|
||||
|
||||
#### Editor.md directory
|
||||
|
||||
editor.md/
|
||||
lib/
|
||||
css/
|
||||
scss/
|
||||
tests/
|
||||
fonts/
|
||||
images/
|
||||
plugins/
|
||||
examples/
|
||||
languages/
|
||||
editormd.js
|
||||
...
|
||||
|
||||
```html
|
||||
<!-- English -->
|
||||
<script src="../dist/js/languages/en.js"></script>
|
||||
|
||||
<!-- 繁體中文 -->
|
||||
<script src="../dist/js/languages/zh-tw.js"></script>
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 640,
|
||||
syncScrolling : "single",
|
||||
path : "../lib/"
|
||||
});
|
||||
|
||||
/*
|
||||
// or
|
||||
testEditor = editormd({
|
||||
id : "test-editormd",
|
||||
width : "90%",
|
||||
height : 640,
|
||||
path : "../lib/"
|
||||
});
|
||||
*/
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
70
public/editormd/examples/sync-scrolling.html
Normal file
70
public/editormd/examples/sync-scrolling.html
Normal file
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Sync scrolling - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Sync scrolling</h1>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button class="bisync-btn">Bisynchronous (Default)</button>
|
||||
<button class="single-btn">Single</button>
|
||||
<button class="disabled-btn">Disabled</button>
|
||||
</div>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">[TOC]
|
||||
|
||||
#### Setting
|
||||
|
||||
config:
|
||||
|
||||
```javascript
|
||||
{
|
||||
// true -> bisync, false -> disabled, "single" -> Only editor area sync
|
||||
syncScrolling : true | false | "single"
|
||||
}
|
||||
```
|
||||
|
||||
function:
|
||||
|
||||
```javascript
|
||||
editor.config("syncScrolling", true);
|
||||
//editor.config("syncScrolling", false);
|
||||
//editor.config("syncScrolling", "single");
|
||||
```
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 360,
|
||||
path : "../lib/"
|
||||
});
|
||||
|
||||
$(".bisync-btn").click(function(){
|
||||
testEditor.config("syncScrolling", true);
|
||||
});
|
||||
|
||||
$(".single-btn").click(function(){
|
||||
testEditor.config("syncScrolling", "single");
|
||||
});
|
||||
|
||||
$(".disabled-btn").click(function(){
|
||||
testEditor.config("syncScrolling", false);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
65
public/editormd/examples/task-lists.html
Normal file
65
public/editormd/examples/task-lists.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Github Flavored Markdown task lists - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Github Flavored Markdown task lists</h1>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">### Setting
|
||||
|
||||
{
|
||||
taskList : true
|
||||
}
|
||||
|
||||
### Examples
|
||||
|
||||
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported;
|
||||
- [x] list syntax required (any unordered or ordered list supported);
|
||||
- [x] this is a complete item;
|
||||
- [ ] this is an incomplete item [test link](#);
|
||||
- [ ] this is an incomplete item;
|
||||
- [ ] this is an incomplete item [test link](#);
|
||||
- [ ] this is an incomplete item [test link](#);
|
||||
- [x] list syntax required (any unordered or ordered list supported);
|
||||
- [x] this is a complete item;
|
||||
- [ ] this is an incomplete item [test link](#);
|
||||
- [ ] this is an incomplete item;
|
||||
- [ ] this is an incomplete item [test link](#);
|
||||
- [x] list syntax required (any unordered or ordered list supported);
|
||||
- [x] this is a complete item;
|
||||
- [ ] this is an incomplete item [test link](#);
|
||||
- [ ] this is an incomplete item;
|
||||
- [ ] this is an incomplete item [test link](#);
|
||||
- [ ] this is an incomplete item [test link](#);
|
||||
|
||||
> Github Flavored Markdown task lists
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
taskList : true,
|
||||
path : '../lib/',
|
||||
htmlDebode : true,
|
||||
onload : function() {
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
365
public/editormd/examples/test.md
Normal file
365
public/editormd/examples/test.md
Normal file
@@ -0,0 +1,365 @@
|
||||
# Editor.md
|
||||
|
||||
|
||||
|
||||
     
|
||||
|
||||
**目录 (Table of Contents)**
|
||||
|
||||
[TOCM]
|
||||
|
||||
[TOC]
|
||||
|
||||
# Heading 1
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
#### Heading 4
|
||||
##### Heading 5
|
||||
###### Heading 6
|
||||
# Heading 1 link [Heading link](https://github.com/pandao/editor.md "Heading link")
|
||||
## Heading 2 link [Heading link](https://github.com/pandao/editor.md "Heading link")
|
||||
### Heading 3 link [Heading link](https://github.com/pandao/editor.md "Heading link")
|
||||
#### Heading 4 link [Heading link](https://github.com/pandao/editor.md "Heading link") Heading link [Heading link](https://github.com/pandao/editor.md "Heading link")
|
||||
##### Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link")
|
||||
###### Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link")
|
||||
|
||||
#### 标题（用底线的形式）Heading (underline)
|
||||
|
||||
This is an H1
|
||||
=============
|
||||
|
||||
This is an H2
|
||||
-------------
|
||||
|
||||
### 字符效果和横线等
|
||||
|
||||
----
|
||||
|
||||
~~删除线~~ <s>删除线（开启识别HTML标签时）</s>
|
||||
*斜体字* _斜体字_
|
||||
**粗体** __粗体__
|
||||
***粗斜体*** ___粗斜体___
|
||||
|
||||
上标：X<sub>2</sub>，下标：O<sup>2</sup>
|
||||
|
||||
**缩写(同HTML的abbr标签)**
|
||||
|
||||
> 即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启
|
||||
|
||||
The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
|
||||
|
||||
### 引用 Blockquotes
|
||||
|
||||
> 引用文本 Blockquotes
|
||||
|
||||
引用的行内混合 Blockquotes
|
||||
|
||||
> 引用：如果想要插入空白换行`即<br />标签`，在插入处先键入两个以上的空格然后回车即可，[普通链接](http://localhost/)。
|
||||
|
||||
### 锚点与链接 Links
|
||||
|
||||
[普通链接](http://localhost/)
|
||||
|
||||
[普通链接带标题](http://localhost/ "普通链接带标题")
|
||||
|
||||
直接链接：<https://github.com>
|
||||
|
||||
[锚点链接][anchor-id]
|
||||
|
||||
[anchor-id]: http://www.this-anchor-link.com/
|
||||
|
||||
[mailto:test.test@gmail.com](mailto:test.test@gmail.com)
|
||||
|
||||
GFM a-tail link @pandao 邮箱地址自动链接 test.test@gmail.com www@vip.qq.com
|
||||
|
||||
> @pandao
|
||||
|
||||
### 多语言代码高亮 Codes
|
||||
|
||||
#### 行内代码 Inline code
|
||||
|
||||
执行命令：`npm install marked`
|
||||
|
||||
#### 缩进风格
|
||||
|
||||
即缩进四个空格，也做为实现类似 `<pre>` 预格式化文本 ( Preformatted Text ) 的功能。
|
||||
|
||||
<?php
|
||||
echo "Hello world!";
|
||||
?>
|
||||
|
||||
预格式化文本：
|
||||
|
||||
| First Header | Second Header |
|
||||
| ------------- | ------------- |
|
||||
| Content Cell | Content Cell |
|
||||
| Content Cell | Content Cell |
|
||||
|
||||
#### JS代码
|
||||
|
||||
```javascript
|
||||
function test() {
|
||||
console.log("Hello world!");
|
||||
}
|
||||
|
||||
(function(){
|
||||
var box = function() {
|
||||
return box.fn.init();
|
||||
};
|
||||
|
||||
box.prototype = box.fn = {
|
||||
init : function(){
|
||||
console.log('box.init()');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
add : function(str) {
|
||||
alert("add", str);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
remove : function(str) {
|
||||
alert("remove", str);
|
||||
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
box.fn.init.prototype = box.fn;
|
||||
|
||||
window.box =box;
|
||||
})();
|
||||
|
||||
var testBox = box();
|
||||
testBox.add("jQuery").remove("jQuery");
|
||||
```
|
||||
|
||||
#### HTML 代码 HTML codes
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<mate charest="utf-8" />
|
||||
<meta name="keywords" content="Editor.md, Markdown, Editor" />
|
||||
<title>Hello world!</title>
|
||||
<style type="text/css">
|
||||
body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}
|
||||
ul{list-style: none;}
|
||||
img{border:none;vertical-align: middle;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="text-xxl">Hello world!</h1>
|
||||
<p class="text-green">Plain text</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### 图片 Images
|
||||
|
||||
Image:
|
||||
|
||||
|
||||
|
||||
> Follow your heart.
|
||||
|
||||
|
||||
|
||||
> 图为：厦门白城沙滩
|
||||
|
||||
图片加链接 (Image + Link)：
|
||||
|
||||
[](https://pandao.github.io/editor.md/images/7.jpg "李健首张专辑《似水流年》封面")
|
||||
|
||||
> 图为：李健首张专辑《似水流年》封面
|
||||
|
||||
----
|
||||
|
||||
### 列表 Lists
|
||||
|
||||
#### 无序列表（减号）Unordered Lists (-)
|
||||
|
||||
- 列表一
|
||||
- 列表二
|
||||
- 列表三
|
||||
|
||||
#### 无序列表（星号）Unordered Lists (*)
|
||||
|
||||
* 列表一
|
||||
* 列表二
|
||||
* 列表三
|
||||
|
||||
#### 无序列表（加号和嵌套）Unordered Lists (+)
|
||||
|
||||
+ 列表一
|
||||
+ 列表二
|
||||
+ 列表二-1
|
||||
+ 列表二-2
|
||||
+ 列表二-3
|
||||
+ 列表三
|
||||
* 列表一
|
||||
* 列表二
|
||||
* 列表三
|
||||
|
||||
#### 有序列表 Ordered Lists (-)
|
||||
|
||||
1. 第一行
|
||||
2. 第二行
|
||||
3. 第三行
|
||||
|
||||
#### GFM task list
|
||||
|
||||
- [x] GFM task list 1
|
||||
- [x] GFM task list 2
|
||||
- [ ] GFM task list 3
|
||||
- [ ] GFM task list 3-1
|
||||
- [ ] GFM task list 3-2
|
||||
- [ ] GFM task list 3-3
|
||||
- [ ] GFM task list 4
|
||||
- [ ] GFM task list 4-1
|
||||
- [ ] GFM task list 4-2
|
||||
|
||||
----
|
||||
|
||||
### 绘制表格 Tables
|
||||
|
||||
| 项目 | 价格 | 数量 |
|
||||
| -------- | -----: | :----: |
|
||||
| 计算机 | $1600 | 5 |
|
||||
| 手机 | $12 | 12 |
|
||||
| 管线 | $1 | 234 |
|
||||
|
||||
First Header | Second Header
|
||||
------------- | -------------
|
||||
Content Cell | Content Cell
|
||||
Content Cell | Content Cell
|
||||
|
||||
| First Header | Second Header |
|
||||
| ------------- | ------------- |
|
||||
| Content Cell | Content Cell |
|
||||
| Content Cell | Content Cell |
|
||||
|
||||
| Function name | Description |
|
||||
| ------------- | ------------------------------ |
|
||||
| `help()` | Display the help window. |
|
||||
| `destroy()` | **Destroy your computer!** |
|
||||
|
||||
| Left-Aligned | Center Aligned | Right Aligned |
|
||||
| :------------ |:---------------:| -----:|
|
||||
| col 3 is | some wordy text | $1600 |
|
||||
| col 2 is | centered | $12 |
|
||||
| zebra stripes | are neat | $1 |
|
||||
|
||||
| Item | Value |
|
||||
| --------- | -----:|
|
||||
| Computer | $1600 |
|
||||
| Phone | $12 |
|
||||
| Pipe | $1 |
|
||||
|
||||
----
|
||||
|
||||
#### 特殊符号 HTML Entities Codes
|
||||
|
||||
© & ¨ ™ ¡ £
|
||||
& < > ¥ € ® ± ¶ § ¦ ¯ « ·
|
||||
|
||||
X² Y³ ¾ ¼ × ÷ »
|
||||
|
||||
18ºC " '
|
||||
|
||||
[========]
|
||||
|
||||
### Emoji表情 :smiley:
|
||||
|
||||
> Blockquotes :star:
|
||||
|
||||
#### GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:
|
||||
|
||||
- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:;
|
||||
- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
|
||||
- [x] [ ] :smiley: this is a complete item :smiley:;
|
||||
- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao;
|
||||
- [ ] [ ]this is an incomplete item :fa-star: :fa-gear:;
|
||||
- [ ] :smiley: this is an incomplete item [test link](#) :fa-star: :fa-gear:;
|
||||
- [ ] :smiley: this is :fa-star: :fa-gear: an incomplete item [test link](#);
|
||||
|
||||
#### 反斜杠 Escape
|
||||
|
||||
\*literal asterisks\*
|
||||
|
||||
[========]
|
||||
|
||||
### 科学公式 TeX(KaTeX)
|
||||
|
||||
$$E=mc^2$$
|
||||
|
||||
行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。
|
||||
|
||||
$$x > y$$
|
||||
|
||||
$$\(\sqrt{3x-1}+(1+x)^2\)$$
|
||||
|
||||
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
|
||||
|
||||
多行公式：
|
||||
|
||||
```math
|
||||
\displaystyle
|
||||
\left( \sum\_{k=1}^n a\_k b\_k \right)^2
|
||||
\leq
|
||||
\left( \sum\_{k=1}^n a\_k^2 \right)
|
||||
\left( \sum\_{k=1}^n b\_k^2 \right)
|
||||
```
|
||||
|
||||
```katex
|
||||
\displaystyle
|
||||
\frac{1}{
|
||||
\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
|
||||
\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
|
||||
1+\frac{e^{-6\pi}}
|
||||
{1+\frac{e^{-8\pi}}
|
||||
{1+\cdots} }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```latex
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi
|
||||
```
|
||||
|
||||
### 分页符 Page break
|
||||
|
||||
> Print Test: Ctrl + P
|
||||
|
||||
[========]
|
||||
|
||||
### 绘制流程图 Flowchart
|
||||
|
||||
```flow
|
||||
st=>start: 用户登陆
|
||||
op=>operation: 登陆操作
|
||||
cond=>condition: 登陆成功 Yes or No?
|
||||
e=>end: 进入后台
|
||||
|
||||
st->op->cond
|
||||
cond(yes)->e
|
||||
cond(no)->op
|
||||
```
|
||||
|
||||
[========]
|
||||
|
||||
### 绘制序列图 Sequence Diagram
|
||||
|
||||
```seq
|
||||
Andrew->China: Says Hello
|
||||
Note right of China: China thinks\nabout it
|
||||
China-->Andrew: How are you?
|
||||
Andrew->>China: I am good thanks!
|
||||
```
|
||||
|
||||
### End
|
||||
207
public/editormd/examples/themes.html
Normal file
207
public/editormd/examples/themes.html
Normal file
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Themes - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
<style>
|
||||
/* Custom Editor.md theme css example */
|
||||
/*
|
||||
.editormd-theme-dark {
|
||||
border-color: #1a1a17;
|
||||
|
||||
}
|
||||
|
||||
.editormd-theme-dark .editormd-toolbar {
|
||||
background: #1A1A17;
|
||||
border-color: #1a1a17;
|
||||
}
|
||||
|
||||
.editormd-theme-dark .editormd-menu > li > a {
|
||||
color: #777;
|
||||
border-color: #1a1a17;
|
||||
}
|
||||
|
||||
.editormd-theme-dark .editormd-menu > li.divider {
|
||||
border-right: 1px solid #111;
|
||||
}
|
||||
|
||||
.editormd-theme-dark .editormd-menu > li > a:hover, .editormd-menu > li > a.active {
|
||||
border-color: #333;
|
||||
background: #333;
|
||||
}*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Themes</h1>
|
||||
<p>
|
||||
<select id="editormd-theme-select">
|
||||
<option selected="selected" value="">select Editor.md themes</option>
|
||||
</select>
|
||||
<select id="editor-area-theme-select">
|
||||
<option selected="selected" value="">select editor area themes</option>
|
||||
</select>
|
||||
<select id="preview-area-theme-select">
|
||||
<option selected="selected" value="">select preview area themes</option>
|
||||
</select>
|
||||
</p>
|
||||
</header>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">[TOC]
|
||||
|
||||
### Themes
|
||||
|
||||
#### Setting
|
||||
|
||||
configs:
|
||||
|
||||
```javascript
|
||||
{
|
||||
// Editor.md theme, default or dark, change at v1.5.0
|
||||
// You can also custom css class .editormd-theme-xxxx
|
||||
theme : "default | dark",
|
||||
|
||||
// Preview container theme, added v1.5.0
|
||||
// You can also custom css class .editormd-preview-theme-xxxx
|
||||
previewTheme : "default | dark",
|
||||
|
||||
// Added @v1.5.0 & after version this is CodeMirror (editor area) theme
|
||||
editorTheme : editormd.editorThemes['theme-name']
|
||||
}
|
||||
```
|
||||
|
||||
functions:
|
||||
|
||||
```javascript
|
||||
editor.setTheme('theme-name');
|
||||
editor.setEditorTheme('theme-name');
|
||||
editor.setPreviewTheme('theme-name');
|
||||
```
|
||||
|
||||
#### Default theme
|
||||
|
||||
- Editor.md theme : `default`
|
||||
- Preview area theme : `default`
|
||||
- Editor area theme : `default`
|
||||
|
||||
> Recommend `dark` theme.
|
||||
|
||||
#### Recommend editor area themes
|
||||
|
||||
- ambiance
|
||||
- eclipse
|
||||
- mdn-like
|
||||
- mbo
|
||||
- monokai
|
||||
- neat
|
||||
- pastel-on-dark
|
||||
|
||||
#### Editor area themes
|
||||
|
||||
- default
|
||||
- 3024-day
|
||||
- 3024-night
|
||||
- ambiance
|
||||
- ambiance-mobile
|
||||
- base16-dark
|
||||
- base16-light
|
||||
- blackboard
|
||||
- cobalt
|
||||
- eclipse
|
||||
- elegant
|
||||
- erlang-dark
|
||||
- lesser-dark
|
||||
- mbo
|
||||
- mdn-like
|
||||
- midnight
|
||||
- monokai
|
||||
- neat
|
||||
- neo
|
||||
- night
|
||||
- paraiso-dark
|
||||
- paraiso-light
|
||||
- pastel-on-dark
|
||||
- rubyblue
|
||||
- solarized
|
||||
- the-matrix
|
||||
- tomorrow-night-eighties
|
||||
- twilight
|
||||
- vibrant-ink
|
||||
- xq-dark
|
||||
- xq-light
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
function themeSelect(id, themes, lsKey, callback)
|
||||
{
|
||||
var select = $("#" + id);
|
||||
|
||||
for (var i = 0, len = themes.length; i < len; i ++)
|
||||
{
|
||||
var theme = themes[i];
|
||||
var selected = (localStorage[lsKey] == theme) ? " selected=\"selected\"" : "";
|
||||
|
||||
select.append("<option value=\"" + theme + "\"" + selected + ">" + theme + "</option>");
|
||||
}
|
||||
|
||||
select.bind("change", function(){
|
||||
var theme = $(this).val();
|
||||
|
||||
if (theme === "")
|
||||
{
|
||||
alert("theme == \"\"");
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log("lsKey =>", lsKey, theme);
|
||||
|
||||
localStorage[lsKey] = theme;
|
||||
callback(select, theme);
|
||||
});
|
||||
|
||||
return select;
|
||||
}
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
|
||||
// Editor.md theme, default or dark, change at v1.5.0
|
||||
// You can also custom css class .editormd-preview-theme-xxxx
|
||||
theme : (localStorage.theme) ? localStorage.theme : "dark",
|
||||
|
||||
// Preview container theme, added v1.5.0
|
||||
// You can also custom css class .editormd-preview-theme-xxxx
|
||||
previewTheme : (localStorage.previewTheme) ? localStorage.previewTheme : "dark",
|
||||
|
||||
// Added @v1.5.0 & after version is CodeMirror (editor area) theme
|
||||
editorTheme : (localStorage.editorTheme) ? localStorage.editorTheme : "pastel-on-dark",
|
||||
path : '../lib/'
|
||||
});
|
||||
|
||||
themeSelect("editormd-theme-select", editormd.themes, "theme", function($this, theme) {
|
||||
testEditor.setTheme(theme);
|
||||
});
|
||||
|
||||
themeSelect("editor-area-theme-select", editormd.editorThemes, "editorTheme", function($this, theme) {
|
||||
testEditor.setCodeMirrorTheme(theme);
|
||||
// or testEditor.setEditorTheme(theme);
|
||||
});
|
||||
|
||||
themeSelect("preview-area-theme-select", editormd.previewThemes, "previewTheme", function($this, theme) {
|
||||
testEditor.setPreviewTheme(theme);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
199
public/editormd/examples/toc.html
Normal file
199
public/editormd/examples/toc.html
Normal file
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>TOC - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
<style>
|
||||
#custom-toc-container {
|
||||
border: 1px solid #ddd;
|
||||
width: 90%;
|
||||
margin: 0 auto 15px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#custom-toc-container > .markdown-toc {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>TOC (Table of Contents) example</h1>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="insert-btn">ToC insert to custom container</button>
|
||||
<button id="menu-btn">ToC Dropdown menu</button>
|
||||
<button id="menu2-btn">ToC Dropdown menu insert to custom container</button>
|
||||
<button id="default-btn">Default</button>
|
||||
<button id="tocm-btn">Enable [TOCM]</button>
|
||||
</div>
|
||||
<div class="markdown-body editormd-preview-container" id="custom-toc-container">#custom-toc-container</div>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;"># 支撑起整个互联网时代的 7 款开源软件
|
||||
|
||||
[TOCM]
|
||||
|
||||
[TOC]
|
||||
|
||||
开源软件现在成为整个互联网时代的支撑技术，你可能已经无法离开由开源软件构建起来的网络世界了。下面我们就来看看一些最重要的开源技术。
|
||||
|
||||
### 为互联网而生的操作系统linux
|
||||
|
||||
Linux是一款免费的操作系统，诞生于1991年，用户可以通过网络或其他途径免费获得，并可以任意修改其源代码。
|
||||
|
||||
#### linux A
|
||||
|
||||
它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想，是一个性能稳 定的多用户网络操作系统。这个系统是由全世界各地的成千上万的程序员设计和实现的。其目的是建立不受任何商品化软件的版权制约的、全世界都能自由使用的 Unix兼容产品。
|
||||
|
||||
#### Test link heading [linux B](https://github.com/pandao/editor.md) Test link heading
|
||||
|
||||
#### Test link heading [linux B](https://github.com/pandao/editor.md) Test link heading [linux B](https://github.com/pandao/editor.md) Test link heading, Test link heading, [linux B](https://github.com/pandao/editor.md) Test link heading
|
||||
|
||||
##### linux B-1
|
||||
|
||||
###### linux B-1-1
|
||||
|
||||
###### linux B-1-2
|
||||
|
||||
##### linux B-2
|
||||
|
||||
###### linux B-2-1
|
||||
|
||||
###### linux B-2-2
|
||||
|
||||
#支撑起整个互联网时代的 7 款开源软件-2
|
||||
|
||||
Linux可以说是已经无处不在，像Android手机就是以Linux为基础开发的，世界上大多的超级计算机也都采用的Linux系统，大多数的 数据中心使用Linux作为其支撑操作系统。谷歌、百度、淘宝等都通过Linuxt提供了我们每天用的互联网服务。Linux在航空控制系统中也扮演着重 要角色。
|
||||
|
||||
###加密互联网的安全协议OpenSSL
|
||||
|
||||
OpenSSL是套开放源代码的软件库包，实现了SSL与TLS协议。OpenSSL可以说是一个基于密码学的安全开发包，囊括了主要的密码算法、常用的密钥和证书封装管理功能以及SSL协议，并提供了丰富的应用程序供测试或其它目的使用。
|
||||
|
||||
也可以说OpenSSL是网络通信提供安全及数据完整性的一种安全协议，SSL可以在Internet上提供秘密性传输，能使用户/服务器应用之间的通信不被攻击者窃听。OpenSSL被网银、在线支付、电商网站、门户网站、电子邮件等重要网站广泛使用。
|
||||
|
||||
去年OpenSSL爆出安全漏洞，因为其应用如此之广，该漏洞爆出让整个互联网都为之震颤。
|
||||
|
||||
### 互联网的记忆——MySQL
|
||||
|
||||
MySQL是一个开源的小型的数据库管理系统，原开发者为瑞典的MySQL AB公司，该公司于2008年被Sun公司收购。2009年，甲骨文公司（Oracle）收购Sun公司，MySQL成为Oracle旗下产品。
|
||||
|
||||
很多信息都是存在数据库里面的，很多工程师在开发一些的小型项目时都会采用这个MySQL数据库。MySQL为C、C++、JAVA、PHP等多重 编程语言提供了API接口。而且支持windows、Mac、Linux等多种系统。这种广泛的支持使其得到更多开发者的青睐，MySQL是开发者需要掌 握的数据库之一。
|
||||
|
||||
Mysql最初为小型应用而开发，但现在的Mysql已经不是一个小型数据库了。基本上所有的互联网公司都会使用这个数据库系统，一些金融交易也会 采用Mysql作为数据库引擎。Mysql通过相应的调优既可以支撑大规模的访问，又可以保证数据安全性，已经成为威胁传统商业数据库系统的重要力量。
|
||||
|
||||
### 万能开发工具Eclipse
|
||||
|
||||
Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。Eclipse最初由OTI和IBM两家公司的IDE产品开发组创建，起始于1999年4月。目前由 IBM牵头，围绕着Eclipse项目已经发展成为了一个庞大的Eclipse联盟，有150多家软件公司参与到Eclipse项目中，其中包括 Borland、Rational Software、Red Hat及Sybase等。
|
||||
|
||||
就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。很多Java编程软件都是在Eclipse平台开发的，还有包括 Oracle在内的许多大公司也纷纷加入了该项目，并宣称Eclipse将来能成为可进行任何语言开发的IDE集大成者，使用者只需下载各种语言的插件即 可。
|
||||
|
||||
Eclipse并不是一个直接服务于消费者的产品，它更像一个工匠手中万用工具，用Eclipse开发者可以打造出各种充满创造性的服务来满足最终用户的需求。
|
||||
|
||||
### 互联网的门卫Apache
|
||||
|
||||
Apache HTTP Server（简称Apache）是Apache软件基金会的一个开放源码的网页服务器，可以在大多数计算机操作系统中运行，由于其多平台和安全性被广泛 使用，也是最流行的Web服务器端软件之一，市场占有率达60%左右。它快速、可靠并且可通过简单的API扩展，它可以和各种解释器配合使用，包括 PHP/Perl/Python等。
|
||||
|
||||
Apache就像一个负责的门卫，管理着服务器数据的进出。每当你在你的地址栏里输入 http://XXX.com 的时候，在遥远的远端，很有可能正是一台跑着Apache的服务器，将你需要的信息传输给浏览器。
|
||||
|
||||
###大数据的心脏Hadoop
|
||||
|
||||
Hadoop 是一个能够对大量数据进行分布式处理的软件框架，由Apache基金会开发。用户可以在不了解分布式底层细节的情况下，开发分布式程序。Hadoop 一 直帮助解决各种问题，包括超大型数据集的排序和大文件的搜索。它还是各种搜索引擎的核心，比如 Amazon 的 A9 和用于查找酒信息 的 Able Grape 垂直搜索引擎。阿里巴巴集团在商品推荐、用户行为分析、信用计算领域也都有hadoop的应用。
|
||||
|
||||
在“大数据”已经成为潮流的当下，Hadoop已经成为最主要的一项技术。可以毫不夸张的说，没有Hadoop，就没有大多数的大数据应用。可以说对一个不知道Hadoop的程序员而言，你已经out了。
|
||||
|
||||
|
||||
#### Test link heading [linux B](https://github.com/pandao/editor.md) Test link heading
|
||||
|
||||
#### Test link heading [linux B](https://github.com/pandao/editor.md) Test link heading [linux B](https://github.com/pandao/editor.md) Test link heading, Test link heading, [linux B](https://github.com/pandao/editor.md) Test link heading
|
||||
|
||||
##### linux B-1
|
||||
|
||||
###### linux B-1-1
|
||||
|
||||
###### linux B-1-2
|
||||
|
||||
##### linux B-2
|
||||
|
||||
###### linux B-2-1
|
||||
|
||||
###### linux B-2-2
|
||||
|
||||
### 互联网的“排版引擎”WebKit
|
||||
|
||||
说是浏览器内核，其实“排版引擎”更容易理解一些。通过服务器传输给浏览器的信息只是一串乱糟糟的文本。要看到我们平时看到精美的网友，需要浏览器内核对这些文本进行解析，将枯燥的描述“画”成美丽的浏览界面。
|
||||
|
||||
WebKit 是一个开源的浏览器引擎，与之相应的引擎有 Gecko（Mozilla Firefox 等使用的排版引擎）和 Trident（也称为 MSHTML，IE 使用的排版引擎）。根据 StatCounter 的浏览器市场份额调查，于2012年11月，Webkit 市占超过了 40%，它已经成为拥有最大市场份额的 排版引擎，超越了 Internet Explorer 所使用的Trident 及 Firefox 所使用的 Gecko 引擎，并且 WebKit 份额正在逐年增加。
|
||||
|
||||
目前几乎所有网站和网银已经逐渐支持 WebKit 。WebKit 内核在手机上的应用也十分广泛，例如苹果的 Safari 、谷歌的 Chrome 浏览器都是基于这个框架来开发的。
|
||||
|
||||
### 小结
|
||||
|
||||
很多人可能尚未意识到，我们使用的电脑中运行有开源软件，手机中运行有开源软件，家里的电视也运行有开源软件，甚至小小的数码产品中也运行有开源软件，尤其是互联网服务器端软件，几乎全部是开源软件。毫不夸张地说，开源软件已经渗透到了我们日常生活的方方面面。
|
||||
|
||||
稿源：[钛媒体](http://www.tmtpost.com/194306.html)
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 720,
|
||||
path : "../lib/",
|
||||
//toc : false, // diable ToC
|
||||
tocStartLevel : 2 // Parse beginning of H2, Default value 1
|
||||
});
|
||||
|
||||
$("#insert-btn").click(function() {
|
||||
testEditor.config({
|
||||
tocContainer : "#custom-toc-container",
|
||||
tocDropdown : false
|
||||
});
|
||||
});
|
||||
|
||||
$("#menu-btn").click(function(){
|
||||
testEditor.config({
|
||||
tocContainer : "",
|
||||
tocDropdown : true,
|
||||
tocTitle : "目录 Table of Contents dsfsadfsfdsdf",
|
||||
});
|
||||
});
|
||||
|
||||
$("#menu2-btn").click(function(){
|
||||
testEditor.config({
|
||||
tocContainer : "#custom-toc-container",
|
||||
tocDropdown : true,
|
||||
tocTitle : "目录 Table of Contents dsfsadfsfdsdf",
|
||||
});
|
||||
});
|
||||
|
||||
$("#default-btn").click(function() {
|
||||
$("#custom-toc-container").html("#custom-toc-container");
|
||||
testEditor.config({
|
||||
tocContainer : "",
|
||||
tocm : false,
|
||||
tocDropdown : false
|
||||
});
|
||||
});
|
||||
|
||||
$("#tocm-btn").click(function() {
|
||||
$("#custom-toc-container").html("#custom-toc-container");
|
||||
testEditor.config({
|
||||
tocm : true,
|
||||
tocContainer : "",
|
||||
tocDropdown : false
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
122
public/editormd/examples/toolbar-auto-fixed.html
Normal file
122
public/editormd/examples/toolbar-auto-fixed.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Toolbar auto fixed - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout" style="height:3000px;">
|
||||
<header>
|
||||
<h1>工具栏自动固定定位的开启与禁用</h1>
|
||||
<p>Enable / disable toolbar auto fixed position.</p>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="enable-btn">Enable</button>
|
||||
<button id="disable-btn">Disable</button>
|
||||
</div>
|
||||
<div id="test-editormd">
|
||||
<textarea style="display:none;">### Hello world!
|
||||
|
||||
codemirror
|
||||
In-browser code editor
|
||||
|
||||
codemirror 6291 3 days ago
|
||||
angular-ui-codemirror
|
||||
This directive allows you to add CodeMirror to your textarea elements.
|
||||
|
||||
angular-ui 174 6 weeks ago
|
||||
share-codemirror
|
||||
Codemirror bindings for ShareJS
|
||||
|
||||
share 24 3 months ago
|
||||
requirejs-codemirror
|
||||
Load codemirror with needed modes and appending codemirror's css only when needed
|
||||
|
||||
tuchk4 14 2 months ago
|
||||
codemirror-interactive-numbers
|
||||
Drag and update literal numbers inside codemirror
|
||||
|
||||
fullstackio 4 17 months ago
|
||||
cm-searchbox
|
||||
CodeMirror addon for search and replace
|
||||
|
||||
coderaiser 3 4 days ago
|
||||
ng-codemirror-dictionary-hint
|
||||
Angular directive that adds hint support to a Codemirror instance based on a custom dictionary.
|
||||
|
||||
amarnus 3 3 months ago
|
||||
opentok-editor
|
||||
A real time collaborative editor for OpenTok using CodeMirror and ot.js
|
||||
|
||||
aullman 3 2 weeks ago
|
||||
cirru-mode
|
||||
Cirru mode for CodeMorror
|
||||
|
||||
Cirru 2 12 months ago
|
||||
ckeditor-codemirror
|
||||
A bower wrapper for the ckeditor codemirror plugin
|
||||
|
||||
friedolinfoerder 1 2 weeks ago
|
||||
cm-show-invisibles
|
||||
Addon for CodeMirror that helps to show invisibles.
|
||||
|
||||
coderaiser 1 6 days ago
|
||||
angular-codemirror
|
||||
Add CodeMirror to your AngularJS app
|
||||
|
||||
chouseknecht 0 12 months ago
|
||||
codemirror-chord
|
||||
Codemirror mode for guitar chords
|
||||
|
||||
zabudipar 0 3 weeks ago
|
||||
codemirror-states
|
||||
Export and import CodeMirror line classes, line widgets and markers
|
||||
|
||||
lusever 0 12 days ago
|
||||
ember-cli-codemirror-shim
|
||||
ES6 module shim for CodeMirror.
|
||||
|
||||
IvyApp 0 3 months ago
|
||||
ivy-codemirror
|
||||
Shim repository for ivy-codemirror.
|
||||
|
||||
IvyApp 0 2 months ago
|
||||
ng-codemirror
|
||||
Allows you to integrate AngularJS and Codemirror with compatibility for RequireJS 2.x.
|
||||
|
||||
VictorQueiroz 0 4 months ago
|
||||
sml-codemirror-mode
|
||||
Bower Distribution of the Sparqlification Mapping Language (SML) Syntax Highlighting Mode for CodeMirror
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="../editormd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var testEditor;
|
||||
|
||||
$(function() {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width : "90%",
|
||||
height : 1600,
|
||||
path : "../lib/"
|
||||
});
|
||||
|
||||
$("#enable-btn").bind("click", function() {
|
||||
testEditor.setToolbarAutoFixed(true);
|
||||
// or
|
||||
//testEditor.config("toolbarAutoFixed", true);
|
||||
});
|
||||
|
||||
$("#disable-btn").bind("click", function() {
|
||||
testEditor.setToolbarAutoFixed(false);
|
||||
// or
|
||||
//testEditor.config("toolbarAutoFixed", false);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
174
public/editormd/examples/use-requirejs.html
Normal file
174
public/editormd/examples/use-requirejs.html
Normal file
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Using require.js - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../lib/codemirror/codemirror.min.css" />
|
||||
<!-- <link rel="stylesheet" href="../lib/codemirror/addon/fold/foldgutter.css" /> -->
|
||||
<link rel="stylesheet" href="../css/editormd.min.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Using require.js</h1>
|
||||
<ul style="margin: 10px 0 0 18px;">
|
||||
<li>Enable HTML tags decode</li>
|
||||
<li>Enable TeX, Flowchart, Sequence Diagram, Emoji, FontAwesome, Task lists</li>
|
||||
<li>Enable Image upload</li>
|
||||
<li>Enable [TOCM], Search Replace, Code fold</li>
|
||||
</ul>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="show-btn">Show editor</button>
|
||||
<button id="hide-btn">Hide editor</button>
|
||||
<button id="get-md-btn">Get Markdown</button>
|
||||
<button id="get-html-btn">Get HTML</button>
|
||||
<button id="watch-btn">Watch</button>
|
||||
<button id="unwatch-btn">Unwatch</button>
|
||||
<button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
|
||||
<button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
|
||||
<button id="show-toolbar-btn">Show toolbar</button>
|
||||
<button id="close-toolbar-btn">Hide toolbar</button>
|
||||
<button id="toc-menu-btn">ToC Dropdown menu</button>
|
||||
<button id="toc-default-btn">ToC default</button>
|
||||
</div>
|
||||
<div id="test-editormd"></div>
|
||||
</div>
|
||||
<script src="js/require.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
requirejs.config({
|
||||
baseUrl: "../lib/",
|
||||
paths: {
|
||||
jquery : "../examples/js/jquery.min",
|
||||
marked : "marked.min",
|
||||
prettify : "prettify.min",
|
||||
raphael : "raphael.min",
|
||||
underscore : "underscore.min",
|
||||
flowchart : "flowchart.min",
|
||||
jqueryflowchart : "jquery.flowchart.min",
|
||||
sequenceDiagram : "sequence-diagram.min",
|
||||
katex : "//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min",
|
||||
editormd : "../editormd.amd" // Using Editor.md amd version for Require.js
|
||||
},
|
||||
waitSeconds: 30
|
||||
});
|
||||
|
||||
var deps = [
|
||||
"editormd",
|
||||
"../languages/en",
|
||||
"../plugins/link-dialog/link-dialog",
|
||||
"../plugins/reference-link-dialog/reference-link-dialog",
|
||||
"../plugins/image-dialog/image-dialog",
|
||||
"../plugins/code-block-dialog/code-block-dialog",
|
||||
"../plugins/table-dialog/table-dialog",
|
||||
"../plugins/emoji-dialog/emoji-dialog",
|
||||
"../plugins/goto-line-dialog/goto-line-dialog",
|
||||
"../plugins/help-dialog/help-dialog",
|
||||
"../plugins/html-entities-dialog/html-entities-dialog",
|
||||
"../plugins/preformatted-text-dialog/preformatted-text-dialog"
|
||||
];
|
||||
|
||||
var testEditor;
|
||||
|
||||
require(deps, function(editormd) {
|
||||
|
||||
// if enable codeFold
|
||||
// or <link rel="stylesheet" href="../lib/codemirror/addon/fold/foldgutter.css" />
|
||||
editormd.loadCSS("../lib/codemirror/addon/fold/foldgutter");
|
||||
|
||||
$.get('test.md', function(md) {
|
||||
testEditor = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 640,
|
||||
path : '../lib/',
|
||||
markdown : md,
|
||||
codeFold : true,
|
||||
searchReplace : true,
|
||||
saveHTMLToTextarea : true, // 保存HTML到Textarea
|
||||
htmlDecode : "style,script,iframe|on*", // 开启HTML标签解析，为了安全性，默认不开启
|
||||
emoji : true,
|
||||
taskList : true,
|
||||
tex : true,
|
||||
tocm : true, // Using [TOCM]
|
||||
autoLoadModules : false,
|
||||
previewCodeHighlight : true,
|
||||
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();
|
||||
});
|
||||
|
||||
$("#toc-menu-btn").click(function(){
|
||||
testEditor.config({
|
||||
tocDropdown : true,
|
||||
tocTitle : "目录 Table of Contents",
|
||||
});
|
||||
});
|
||||
|
||||
$("#toc-default-btn").click(function() {
|
||||
testEditor.config("tocDropdown", false);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
176
public/editormd/examples/use-seajs.html
Normal file
176
public/editormd/examples/use-seajs.html
Normal file
@@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Using sea.js - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.min.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
<style>
|
||||
header p code {
|
||||
padding: 3px;
|
||||
border: 1px solid #ddd;
|
||||
background: #f6f6f6;
|
||||
border-radius: 3px;
|
||||
font-size: 85%;
|
||||
font-family: Consolas, 'Monaco', courier, monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Using sea.js</h1>
|
||||
<p>说明：</p>
|
||||
<p>1、由于Editor.md是依赖jQuery的，所以在使用Sea.js加载Editor.md时，要在jQuery.js文件尾部加上 <code>if(typeof define === "function") { define(function () { return $.noConflict(); }); }</code>，使jQuery支持Sea.js；</p>
|
||||
<p>2、flowChart（流程图）和sequenceDiagram（时序图）基于Raphael.js，由于疑似Sea.js与Raphael.js有冲突，所以必须先加载Raphael.js再加载Sea.js，Editor.md才能在Sea.js下正常进行；</p>
|
||||
<ul style="margin: 10px 0 0 18px;">
|
||||
<li>Enable HTML tags decode</li>
|
||||
<li>Enable TeX, Flowchart, Sequence Diagram, Emoji, FontAwesome, Task lists</li>
|
||||
<li>Enable Image upload</li>
|
||||
<li>Enable [TOCM], Search Replace, Code fold</li>
|
||||
</ul>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="show-btn">Show editor</button>
|
||||
<button id="hide-btn">Hide editor</button>
|
||||
<button id="get-md-btn">Get Markdown</button>
|
||||
<button id="get-html-btn">Get HTML</button>
|
||||
<button id="watch-btn">Watch</button>
|
||||
<button id="unwatch-btn">Unwatch</button>
|
||||
<button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
|
||||
<button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
|
||||
<button id="show-toolbar-btn">Show toolbar</button>
|
||||
<button id="close-toolbar-btn">Hide toolbar</button>
|
||||
<button id="toc-menu-btn">ToC Dropdown menu</button>
|
||||
<button id="toc-default-btn">ToC default</button>
|
||||
</div>
|
||||
<div id="test-editormd"></div>
|
||||
</div>
|
||||
<!-- Flowchart & Sequence Diagram based on Raphael.js, and must load Raphael.js of Sea.js before. -->
|
||||
<script src="../lib/raphael.min.js"></script>
|
||||
<script src="js/sea.js"></script>
|
||||
<script type="text/javascript">
|
||||
seajs.config({
|
||||
base : "./",
|
||||
alias : {
|
||||
jquery : "js/jquery.min",
|
||||
editormd : "../editormd"
|
||||
}
|
||||
});
|
||||
|
||||
//seajs.use("./js/seajs-main"); //使用main.js时 editormd 路径要改为 "../../editormd"
|
||||
|
||||
var deps = [
|
||||
"jquery",
|
||||
"editormd",
|
||||
"../languages/en",
|
||||
"../plugins/link-dialog/link-dialog",
|
||||
"../plugins/reference-link-dialog/reference-link-dialog",
|
||||
"../plugins/image-dialog/image-dialog",
|
||||
"../plugins/code-block-dialog/code-block-dialog",
|
||||
"../plugins/table-dialog/table-dialog",
|
||||
"../plugins/emoji-dialog/emoji-dialog",
|
||||
"../plugins/goto-line-dialog/goto-line-dialog",
|
||||
"../plugins/help-dialog/help-dialog",
|
||||
"../plugins/html-entities-dialog/html-entities-dialog",
|
||||
"../plugins/preformatted-text-dialog/preformatted-text-dialog"
|
||||
];
|
||||
|
||||
seajs.use(deps, function($, editormd) {
|
||||
var testEditor;
|
||||
|
||||
$.get("./test.md", function(md){
|
||||
testEditor = editormd("test-editormd", {
|
||||
width: "90%",
|
||||
height: 640,
|
||||
path : '../lib/',
|
||||
markdown : md,
|
||||
//toolbar : false, // 关闭工具栏
|
||||
codeFold : true,
|
||||
searchReplace : true,
|
||||
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
|
||||
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
|
||||
emoji : true,
|
||||
taskList : true,
|
||||
tocm : true, // Using [TOCM]
|
||||
tex : true, // 开启科学公式 TeX 语言支持，默认关闭
|
||||
//previewCodeHighlight : false, // 关闭预览窗口的代码高亮，默认开启
|
||||
flowChart : true, // 疑似 Sea.js与 Raphael.js 有冲突，必须先加载 Raphael.js ，Editor.md 才能在 Sea.js 下正常进行；
|
||||
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();
|
||||
});
|
||||
|
||||
$("#toc-menu-btn").click(function(){
|
||||
testEditor.config({
|
||||
tocDropdown : true,
|
||||
tocTitle : "目录 Table of Contents",
|
||||
});
|
||||
});
|
||||
|
||||
$("#toc-default-btn").click(function() {
|
||||
testEditor.config("tocDropdown", false);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
126
public/editormd/examples/use-zepto.html
Normal file
126
public/editormd/examples/use-zepto.html
Normal file
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Using Zepto.js - Editor.md examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="../css/editormd.css" />
|
||||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<header>
|
||||
<h1>Using Zepto.js</h1>
|
||||
<ul style="margin: 10px 0 0 18px;">
|
||||
<li>Enable HTML tags decode</li>
|
||||
<li>Enable TeX, Flowchart, Sequence Diagram, Emoji, FontAwesome, Task lists</li>
|
||||
<li>Enable Image upload</li>
|
||||
<li>Enable [TOCM], Search Replace, Code fold</li>
|
||||
</ul>
|
||||
</header>
|
||||
<div class="btns">
|
||||
<button id="show-btn">Show editor</button>
|
||||
<button id="hide-btn">Hide editor</button>
|
||||
<button id="get-md-btn">Get Markdown</button>
|
||||
<button id="get-html-btn">Get HTML</button>
|
||||
<button id="watch-btn">Watch</button>
|
||||
<button id="unwatch-btn">Unwatch</button>
|
||||
<button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
|
||||
<button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
|
||||
<button id="show-toolbar-btn">Show toolbar</button>
|
||||
<button id="close-toolbar-btn">Hide toolbar</button>
|
||||
<button id="toc-menu-btn">ToC Dropdown menu</button>
|
||||
<button id="toc-default-btn">ToC default</button>
|
||||
</div>
|
||||
<form action="http://editormd.ipandao.com/php/post.php" method="post">
|
||||
<div class="editormd" id="test-editormd">
|
||||
<textarea>### Hello world!</textarea>
|
||||
</div>
|
||||
<br/><input type="submit" name="submit" value="Submit" class="btn" style="margin-left: 5%;" />
|
||||
</form>
|
||||
</div>
|
||||
<script src="js/zepto.min.js"></script>
|
||||
<script src="../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,
|
||||
codeFold : true,
|
||||
searchReplace : true,
|
||||
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
|
||||
//watch : false,
|
||||
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
|
||||
emoji : true,
|
||||
taskList : true,
|
||||
tocm : true, // Using [TOCM]
|
||||
tex : true, // 开启科学公式 TeX 语言支持，默认关闭
|
||||
//previewCodeHighlight : false, // 关闭预览窗口的代码高亮，默认开启
|
||||
flowChart : true,
|
||||
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();
|
||||
});
|
||||
|
||||
$("#toc-menu-btn").click(function(){
|
||||
testEditor.config({
|
||||
tocDropdown : true,
|
||||
tocTitle : "目录 Table of Contents",
|
||||
});
|
||||
});
|
||||
|
||||
$("#toc-default-btn").click(function() {
|
||||
testEditor.config("tocDropdown", false);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user