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:
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>
|
||||
Reference in New Issue
Block a user