Skip to content

Commit bdd93d3

Browse files
author
kongbin02
committed
数据格式化 编辑器，可处理json\html\xml文本的格式化处理及高亮显示
1 parent 015e3e9 commit bdd93d3

File tree

11 files changed

+1736
-2
lines changed

11 files changed

+1736
-2
lines changed

‎jsonlint.js

Lines changed: 673 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jsonlint.l

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
int "-"?([0-9]|[1-9][0-9]+)
2+
exp [eE][-+]?[0-9]+
3+
frac "."[0-9]+
4+
5+
%%
6+
\s+ /* skip whitespace */
7+
8+
{int}{frac}?{exp}?\b return 'NUMBER'
9+
\"(?:'\\'[\\"bfnrt/]|'\\u'[a-fA-F0-9]{4}|[^\\\0-\x09\x0a-\x1f"])*\" yytext = yytext.substr(1,yyleng-2); return 'STRING'
10+
11+
"{" return '{'
12+
"}" return '}'
13+
"[" return '['
14+
"]" return ']'
15+
"," return ','
16+
":" return ':'
17+
"true" return 'TRUE'
18+
"false" return 'FALSE'
19+
"null" return 'NULL'
20+
<<EOF>> return 'EOF'
21+
. return 'INVALID'
22+
23+
%%
24+

‎jsonlint.y

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
%start JSONText
2+
3+
/*
4+
ECMA-262 5th Edition, 15.12.1 The JSON Grammar.
5+
*/
6+
7+
8+
%%
9+
10+
JSONString
11+
: STRING
12+
{ // replace escaped characters with actual character
13+
$$ = yytext.replace(/\\(\\|")/g, "$"+"1")
14+
.replace(/\\n/g,'\n')
15+
.replace(/\\r/g,'\r')
16+
.replace(/\\t/g,'\t')
17+
.replace(/\\v/g,'\v')
18+
.replace(/\\f/g,'\f')
19+
.replace(/\\b/g,'\b');
20+
}
21+
;
22+
23+
JSONNumber
24+
: NUMBER
25+
{$$ = yytext == String(Number(yytext))? Number(yytext): yytext;}
26+
;
27+
28+
JSONNullLiteral
29+
: NULL
30+
{$$ = null;}
31+
;
32+
33+
JSONBooleanLiteral
34+
: TRUE
35+
{$$ = true;}
36+
| FALSE
37+
{$$ = false;}
38+
;
39+
40+
JSONText
41+
: JSONValue EOF
42+
{return $$ = $1;}
43+
;
44+
45+
JSONValue
46+
: JSONNullLiteral
47+
| JSONBooleanLiteral
48+
| JSONString
49+
| JSONNumber
50+
| JSONObject
51+
| JSONArray
52+
;
53+
54+
JSONObject
55+
: '{' '}'
56+
{{$$ = {};}}
57+
| '{' JSONMemberList '}'
58+
{$$ = $2;}
59+
;
60+
61+
JSONMember
62+
: JSONString ':' JSONValue
63+
{$$ = [$1, $3];}
64+
;
65+
66+
JSONMemberList
67+
: JSONMember
68+
{{$$ = {}; $$[$1[0]] = $1[1];}}
69+
| JSONMemberList ',' JSONMember
70+
{$$ = $1; $1[$3[0]] = $3[1];}
71+
;
72+
73+
JSONArray
74+
: '[' ']'
75+
{$$ = [];}
76+
| '[' JSONElementList ']'
77+
{$$ = $2;}
78+
;
79+
80+
JSONElementList
81+
: JSONValue
82+
{$$ = [$1];}
83+
| JSONElementList ',' JSONValue
84+
{$$ = $1; $1.push($3);}
85+
;
86+

‎src/layouts/left_menu_data.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,20 @@ const left_menu_data = [
55
img: '../../static/icon/home.png',
66
home_hide: true
77
},
8+
{
9+
label: '数据格式化',
10+
to: '/vue_data_editor',
11+
img: '../../static/icon/vue_data_editor.png',
12+
title: '数据格式化编辑器',
13+
description: '使用Brace插件实现代码高亮编辑器，方便你实现在线的数据格式化编辑与显示的工具。',
14+
url: '/vue_data_editor',
15+
course: ""
16+
},
817
{
918
label: '高亮编译器',
1019
to: '/ace',
1120
img: '../../static/icon/ace.png',
12-
// img: '../static/icon/ace.png',
13-
title: 'ACE代码高亮编译器',
21+
title: 'ACE代码高亮编辑器',
1422
description: '使用Brace插件实现代码高亮编辑器，方便你实现在线的代码编写工具。',
1523
url: '/ace',
1624
course: ""

‎src/pages/vue_data_editor/data_format_utils.js

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import './vkbeautify'
2+
import jsonlint from '../../../jsonlint'
3+
4+
export function string_to_json_wrap(v) {
5+
try {
6+
if (is_json(v)) {
7+
return unicode_to_china(JSON.stringify(string_to_json(v), null, '\t'))
8+
} else {
9+
return v
10+
}
11+
} catch (e) {
12+
}
13+
return v
14+
}
15+
16+
export function json_wrap_to_string(v) {
17+
try {
18+
if (is_json(v)) {
19+
return unicode_to_china(JSON.stringify(string_to_json(v)))
20+
21+
} else {
22+
return v
23+
}
24+
25+
} catch (e) {
26+
}
27+
return v
28+
}
29+
30+
31+
export function string_to_xml_wrap(v) {
32+
try {
33+
return vkbeautify.xml(v);
34+
} catch (e) {
35+
return v
36+
}
37+
}
38+
39+
export function xml_wrap_to_string(v) {
40+
try {
41+
return vkbeautify.xmlmin(v);
42+
} catch (e) {
43+
return v
44+
}
45+
}
46+
47+
export function is_json(str) {
48+
if (typeof str == 'string') {
49+
try {
50+
let obj = JSON.parse(str);
51+
if (typeof obj == 'object' && obj) {
52+
return true;
53+
} else {
54+
return false;
55+
}
56+
57+
} catch (e) {
58+
return false;
59+
}
60+
}
61+
}
62+
63+
export function check_string_type(v) {
64+
try {
65+
if (v.startsWith("<!DOCTYPE html")) {
66+
return 'HTML'
67+
} else if (v.startsWith("<")) {
68+
return 'XML'
69+
} else if (is_json(v)) {
70+
return 'JSON'
71+
} else {
72+
return 'TEXT'
73+
}
74+
} catch (e) {
75+
return 'TEXT'
76+
}
77+
}
78+
79+
export function wrap_to_string(v, t) {
80+
let type = t || check_string_type(v)
81+
switch (type) {
82+
case 'JSON': {
83+
return json_wrap_to_string(v)
84+
}
85+
case 'XML': {
86+
return xml_wrap_to_string(v)
87+
}
88+
case 'HTML': {
89+
return xml_wrap_to_string(v)
90+
}
91+
}
92+
return v
93+
}
94+
95+
export function string_to_wrap(v, t) {
96+
let type = t || check_string_type(v)
97+
switch (type) {
98+
case 'JSON': {
99+
return string_to_json_wrap(v)
100+
}
101+
case 'XML': {
102+
return string_to_xml_wrap(v)
103+
}
104+
case 'HTML': {
105+
return string_to_xml_wrap(v)
106+
}
107+
}
108+
return v
109+
}
110+
111+
export function string_to_json(v) {
112+
try {
113+
if (is_json(v)) {
114+
return jsonlint.parse(v)
115+
} else {
116+
return v
117+
}
118+
} catch (e) {
119+
return v
120+
}
121+
}
122+
123+
export function unicode_to_china(input) {
124+
try {
125+
return input.replace(/\\\\u([0-9a-fA-F]{2,4})/g, function (string, matched) {
126+
return String.fromCharCode(parseInt(matched, 16))
127+
})
128+
} catch (e) {
129+
}
130+
return input
131+
}

‎src/pages/vue_data_editor/index.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import VueDataEditor from './vue_data_editor'
2+
3+
export default {
4+
name: 'ace_index',
5+
data: () => ({
6+
json_value: "{\"q\":\"百度\",\"p\":false,\"g\":[{\"type\":\"sug\",\"sa\":\"s_1\",\"q\":\"百度翻译\"},{\"type\":\"sug\",\"sa\":\"s_2\",\"q\":\"百度地图\"},{\"type\":\"sug\",\"sa\":\"s_3\",\"q\":\"百度网盘\"},{\"type\":\"sug\",\"sa\":\"s_4\",\"q\":\"百度识图\"},{\"type\":\"sug\",\"sa\":\"s_5\",\"q\":\"百度新闻\"},{\"type\":\"sug\",\"sa\":\"s_6\",\"q\":\"百度视频\"},{\"type\":\"sug\",\"sa\":\"s_7\",\"q\":\"百度搜题\"},{\"type\":\"sug\",\"sa\":\"s_8\",\"q\":\"百度一下\"},{\"type\":\"sug\",\"sa\":\"s_9\",\"q\":\"百度手机卫士隐私保护专版\"},{\"type\":\"sug\",\"sa\":\"s_10\",\"q\":\"百度小说\"}],\"slid\":\"2268943525663350670\"}",
7+
xml_value: "<?xml version=\"1.0\" encoding=\"UTF-8\"?><project xmlns=\"http://maven.apache.org/POM/4.0.0\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd\"> <build> <plugins> <plugin> <groupId>org.mybatis.generator</groupId> <artifactId>mybatis-generator-maven-plugin</artifactId> <version>1.3.2</version> <configuration> <configurationFile>src/main/resources/generatorConfig.xml</configurationFile> <verbose>true</verbose> <overwrite>true</overwrite> </configuration> </plugin> </plugins> </build></project>",
8+
html_value: "<!DOCTYPE html><html> <head> <meta charset=\"utf-8\"> <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"> <title>kb-vue-components</title> </head> <body> <div id=\"app\"></div> <!-- built files will be auto injected --> <script type=\"text/javascript\" src=\"/app.js\"></script></body></html>",
9+
}),
10+
render(h) {
11+
return h('div', {
12+
staticClass: 'q-pa-sm'
13+
}, [
14+
h('div', {
15+
staticClass: 'text-left text-tertiary font-14 text-weight-bold'
16+
}, [
17+
'JSON数据格式显示效果：'
18+
]),
19+
h(VueDataEditor, {
20+
on: {
21+
input: (v) => {
22+
this.json_value = v
23+
}
24+
},
25+
props: {
26+
value: this.json_value,
27+
disable: false,
28+
width: '100%',
29+
height: '400px'
30+
}
31+
}),
32+
33+
h('div', {
34+
staticClass: 'row no-wrap q-mt-md'
35+
}, [
36+
h('div', {
37+
staticClass: 'q-pr-sm',
38+
style: {
39+
width: '50%'
40+
}
41+
}, [
42+
h('div', {
43+
staticClass: 'text-left text-tertiary font-14 text-weight-bold'
44+
}, [
45+
'XML数据格式显示效果：'
46+
]),
47+
h(VueDataEditor, {
48+
props: {
49+
value: this.xml_value,
50+
disable: true,
51+
height: '400px'
52+
}
53+
}),
54+
]),
55+
h('div', {
56+
staticClass: 'q-pl-sm',
57+
style: {
58+
width: '50%'
59+
}
60+
}, [
61+
h('div', {
62+
staticClass: 'text-left text-tertiary font-14 text-weight-bold'
63+
}, [
64+
'HTML数据格式显示效果：'
65+
]),
66+
h(VueDataEditor, {
67+
props: {
68+
value: this.html_value,
69+
disable: true,
70+
height: '400px'
71+
}
72+
})
73+
])
74+
])
75+
76+
])
77+
}
78+
}

0 commit comments

Comments
 (0)