Skip to content
This repository was archived by the owner on May 9, 2022. It is now read-only.

Commit 816f358

Browse files
author
peak
committed
update examples
1 parent 47e9894 commit 816f358

File tree

4 files changed

+198
-3
lines changed

4 files changed

+198
-3
lines changed

‎example/basic.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>vue html5 editor demo</title>
66
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
77
<script src="../dist/vue-html5-editor.js"></script>
8-
<script src="//cdn.bootcss.com/vue/1.0.17/vue.js"></script>
8+
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
99
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
1010
<style>
1111
#app {
@@ -21,7 +21,7 @@
2121
</div>
2222

2323
<script>
24-
Vue.use(VueHtml5Editor, {image: {compress: false},language:"zh-cn"})
24+
Vue.use(VueHtml5Editor)
2525
new Vue({
2626
el: "#app",
2727
data: {

‎example/custom-icon.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>vue html5 editor demo</title>
66
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
77
<script src="../dist/vue-html5-editor.js"></script>
8-
<script src="//cdn.bootcss.com/vue/1.0.17/vue.js"></script>
8+
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
99
<style>
1010
#app {
1111
margin: 50px auto;

‎example/extended-module.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>vue html5 editor demo</title>
6+
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
7+
<script src="../dist/vue-html5-editor.js"></script>
8+
<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
9+
<script src="http://cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
10+
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
11+
<style>
12+
#app {
13+
margin: 50px auto;
14+
width: 800px;
15+
max-width: 100%;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<div id="app">
21+
<vue-html5-editor :content.sync="content" :height="500"></vue-html5-editor>
22+
</div>
23+
24+
25+
<script type="x/template" id="template-emoji">
26+
<button v-for="s in symbols" type="button" @click="insertSymbol(s)">{{s}}</button>
27+
</script>
28+
<script>
29+
30+
Vue.use(VueHtml5Editor, {
31+
i18n: {
32+
//i18n for custom module
33+
"en-us": {
34+
date: "insert current time",
35+
emoji: "emoji"
36+
}
37+
},
38+
//config custom module
39+
date: {
40+
format: "YYYY-MM-DD"
41+
},
42+
modules: [
43+
{
44+
name: "date",
45+
icon: "fa fa-calendar",
46+
i18n: "time",
47+
show: true,
48+
init: function (editor) {
49+
alert("time module init, config is \r\n" + JSON.stringify(this.config))
50+
},
51+
handler: function (editor) {
52+
editor.execCommand("insertText", moment().format(this.config.format || "YYYY-MM-DD HH:mm"))
53+
},
54+
destroyed: function (editor) {
55+
alert("time module destroyed")
56+
}
57+
},
58+
{
59+
//custom module with dashboard
60+
name: "emoji",
61+
icon: "fa fa-smile-o",
62+
i18n: "emoji",
63+
show: true,
64+
init: function (editor) {
65+
console.log("emoji module init")
66+
},
67+
//vue component
68+
dashboard: {
69+
template: "#template-emoji",
70+
data: function () {
71+
return {
72+
symbols: [
73+
">_<|||",
74+
"^_^;",
75+
"⊙﹏⊙‖∣°",
76+
"^_^|||",
77+
"^_^\"",
78+
"→_→",
79+
"..@_@|||||..",
80+
"…(⊙_⊙;)…",
81+
"o_o ....",
82+
"O__O",
83+
"///^_^.......",
84+
"?o?|||",
85+
"( ^_^ )? ",
86+
"(+_+)?",
87+
"（?ε?）? ",
88+
"o_O???",
89+
"@_@a",
90+
"一 一+",
91+
">\"<||||",
92+
"‘(*>﹏<*)′"
93+
]
94+
}
95+
},
96+
methods: {
97+
insertSymbol: function (symbol) {
98+
//$parent is editor component instance
99+
this.$parent.execCommand("insertText", symbol)
100+
}
101+
}
102+
}
103+
}
104+
]
105+
})
106+
new Vue({
107+
el: "#app",
108+
data: {
109+
content: "<h3>vue html5 editor</h3>",
110+
}
111+
})
112+
</script>
113+
</body>
114+
</html>

‎example/i18n.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>vue html5 editor demo</title>
6+
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
7+
<script src="../dist/vue-html5-editor.js"></script>
8+
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
9+
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
10+
<style>
11+
#app {
12+
margin: 50px auto;
13+
width: 800px;
14+
max-width: 100%;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="app">
20+
<vue-html5-editor :content.sync="content" :height="500"></vue-html5-editor>
21+
</div>
22+
23+
<script>
24+
Vue.use(VueHtml5Editor, {
25+
language: "mars",
26+
i18n: {
27+
"mars": {
28+
"align": "===",
29+
"image": "<**>",
30+
"list": "&&&",
31+
"link": "%%^",
32+
"unlink": "^%%",
33+
"table": "@@@",
34+
"font": "@#$",
35+
"full screen": "~~~",
36+
"text": "###",
37+
"eraser": "<=",
38+
"info": "^^^",
39+
"color": "%%%",
40+
"please enter a url": "%^& @#$#$%%^)(&-",
41+
"create link": "&&&%$#",
42+
"bold": "[\";]",
43+
"italic": "\\\\",
44+
"underline": "_-_",
45+
"strike through": "--}",
46+
"subscript": "^*^",
47+
"superscript": ">*<",
48+
"heading": "!!!",
49+
"font name": "@!!",
50+
"font size": ">><<",
51+
"left justify": "<<<",
52+
"center justify": "<->",
53+
"right justify": ">>>",
54+
"ordered list": ":|||",
55+
"unordered list": "?|||",
56+
"fore color": "@#!~",
57+
"background color": "@!~~",
58+
"row count": "--)",
59+
"column count": "--(",
60+
"save": "++<>++",
61+
"upload": "<++++>",
62+
"progress": ">~~~",
63+
"unknown": "/\\/\\",
64+
"please wait": "-))))",
65+
"error": "&%$#@",
66+
"abort": "//&",
67+
"reset": ")***(",
68+
"hr": ">----",
69+
"undo": "<---|"
70+
}
71+
}
72+
})
73+
new Vue({
74+
el: "#app",
75+
data: {
76+
content: "<h3>#$^%%^ $%&*&(* ';,'; )((*&*^&$</h3>",
77+
}
78+
})
79+
</script>
80+
</body>
81+
</html>

0 commit comments

Comments
 (0)