Skip to content

Commit 90d432d

Browse files
author
febobo
committed
add code preview
1 parent 2054671 commit 90d432d

File tree

4 files changed

+10780
-0
lines changed

4 files changed

+10780
-0
lines changed

‎docs/.vuepress/components/Run.vue

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<template lang="html">
2+
<div>
3+
<div class="title">
4+
@Vue3js.cn
5+
<button @click="run">运行一下</button>
6+
</div>
7+
<div class="example">
8+
<div class="codemirror">
9+
<codemirror ref="cmEditor" v-model="code" :options="cmOption" />
10+
</div>
11+
<div class="result">
12+
<h3>result:</h3>
13+
<div id="iframe"></div>
14+
</div>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
import { codemirror } from "vue-codemirror";
21+
// base style
22+
import "codemirror/lib/codemirror.css";
23+
// theme css
24+
import "codemirror/theme/base16-dark.css";
25+
// language
26+
import "codemirror/mode/vue/vue.js";
27+
// active-line.js
28+
import "codemirror/addon/selection/active-line.js";
29+
// styleSelectedText
30+
import "codemirror/addon/selection/mark-selection.js";
31+
import "codemirror/addon/search/searchcursor.js";
32+
// highlightSelectionMatches
33+
import "codemirror/addon/scroll/annotatescrollbar.js";
34+
import "codemirror/addon/search/matchesonscrollbar.js";
35+
import "codemirror/addon/search/searchcursor.js";
36+
import "codemirror/addon/search/match-highlighter.js";
37+
// keyMap
38+
import "codemirror/mode/clike/clike.js";
39+
import "codemirror/addon/edit/matchbrackets.js";
40+
import "codemirror/addon/comment/comment.js";
41+
import "codemirror/addon/dialog/dialog.js";
42+
import "codemirror/addon/dialog/dialog.css";
43+
import "codemirror/addon/search/searchcursor.js";
44+
import "codemirror/addon/search/search.js";
45+
import "codemirror/keymap/sublime.js";
46+
// foldGutter
47+
import "codemirror/addon/fold/foldgutter.css";
48+
import "codemirror/addon/fold/brace-fold.js";
49+
import "codemirror/addon/fold/comment-fold.js";
50+
import "codemirror/addon/fold/foldcode.js";
51+
import "codemirror/addon/fold/foldgutter.js";
52+
import "codemirror/addon/fold/indent-fold.js";
53+
import "codemirror/addon/fold/markdown-fold.js";
54+
import "codemirror/addon/fold/xml-fold.js";
55+
56+
export default {
57+
components: {
58+
codemirror
59+
},
60+
name: "Run",
61+
props: {},
62+
computed: {
63+
codemirror() {
64+
return this.$refs.cmEditor.codemirror;
65+
}
66+
},
67+
data() {
68+
return {
69+
code: `<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>Vue 测试33实例 - 菜鸟教程(runoob.com)</title>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js\"></script>\n</head>\n<body>\n<div id=\"app\">\n <p>原始字符串: {{ message }}</p>\n <p>计算后反转字符串: {{ reversedMessage }}</p>\n</div>\n\n<script>\nlet vm = new Vue({\n el: '#app',\n data: {\n message: 'Runoob!'\n },\n computed: {\n // 计算属性的 getter\n reversedMessage: function () {\n return this.message.split('').reverse().join('')\n }\n }\n})\n</script>\n</body>\n</html>`,
70+
cmOption: {
71+
tabSize: 4,
72+
foldGutter: true,
73+
styleActiveLine: true,
74+
lineNumbers: true,
75+
line: true,
76+
keyMap: "sublime",
77+
mode: "text/x-vue",
78+
theme: "base16-dark",
79+
extraKeys: {
80+
F11(cm) {
81+
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
82+
},
83+
Esc(cm) {
84+
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
85+
}
86+
}
87+
}
88+
};
89+
},
90+
methods: {
91+
run() {
92+
let text = this.codemirror.getValue();
93+
let patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/im;
94+
let patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im;
95+
let array_matches_head = patternHead.exec(text);
96+
let patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
97+
98+
let array_matches_body = patternBody.exec(text);
99+
let basepath_flag = 1;
100+
let basepath = "";
101+
if (array_matches_head) {
102+
text = text.replace("<head>", "<head>" + basepath);
103+
} else if (patternHtml) {
104+
text = text.replace("<html>", "<head>" + basepath + "</head>");
105+
} else if (array_matches_body) {
106+
text = text.replace("<body>", "<body>" + basepath);
107+
} else {
108+
text = basepath + text;
109+
}
110+
let ifr = document.createElement("iframe");
111+
ifr.setAttribute("frameborder", "0");
112+
ifr.setAttribute("id", "iframeResult");
113+
document.getElementById("iframe").innerHTML = "";
114+
document.getElementById("iframe").appendChild(ifr);
115+
116+
let ifrw = ifr.contentWindow
117+
? ifr.contentWindow
118+
: ifr.contentDocument.document
119+
? ifr.contentDocument.document
120+
: ifr.contentDocument;
121+
ifrw.document.open();
122+
ifrw.document.write(text);
123+
ifrw.document.close();
124+
}
125+
}
126+
};
127+
</script>
128+
129+
<style >
130+
.theme-default-content:not(.custom) {
131+
max-width: 70%;
132+
}
133+
.CodeMirror {
134+
border: 1px solid #eee;
135+
height: auto;
136+
}
137+
138+
.CodeMirror-scroll {
139+
height: auto;
140+
overflow-y: hidden;
141+
overflow-x: auto;
142+
}
143+
</style>
144+
<style scoped>
145+
* {
146+
box-sizing: border-box;
147+
}
148+
.title {
149+
display: flex;
150+
justify-content: space-between;
151+
padding: 10px 0;
152+
}
153+
.title button {
154+
padding: 10px 15px;
155+
background: #4caf50;
156+
border-radius: 3px;
157+
color: #fff;
158+
border: none;
159+
}
160+
.example {
161+
display: flex;
162+
height: 70vh;
163+
background: #f7f7f7;
164+
padding: 30px;
165+
border-radius: 15px;
166+
}
167+
.codemirror,
168+
.result {
169+
width: 50%;
170+
height: 100%;
171+
margin: 0;
172+
overflow: auto;
173+
padding-top: 0;
174+
}
175+
176+
.result {
177+
display: block;
178+
padding: 1rem;
179+
line-height: 1.6;
180+
word-break: break-all;
181+
word-wrap: break-word;
182+
}
183+
.result h3{
184+
margin: 0;
185+
}
186+
</style>

‎docs/run/index.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
navbar: false
3+
sidebar: false
4+
---
5+
6+
<Run />

0 commit comments

Comments
 (0)