From 816f358bbef37a1be72a1b1fecd8939ba5f03890 Mon Sep 17 00:00:00 2001
From: peak <taijunfeng_it@sina.com>
Date: Sat, 20 Aug 2016 19:09:03 +0800
Subject: [PATCH] update examples

---
 example/basic.html           |   4 +-
 example/custom-icon.html     |   2 +-
 example/extended-module.html | 114 +++++++++++++++++++++++++++++++++++
 example/i18n.html            |  81 +++++++++++++++++++++++++
 4 files changed, 198 insertions(+), 3 deletions(-)
 create mode 100644 example/extended-module.html
 create mode 100644 example/i18n.html
diff --git a/example/basic.html b/example/basic.html
index 3f26656..fea1f3d 100644
--- a/example/basic.html
+++ b/example/basic.html
@@ -5,7 +5,7 @@
     <title>vue html5 editor demo</title>
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
     <script src="../dist/vue-html5-editor.js"></script>
-    <script src="//cdn.bootcss.com/vue/1.0.17/vue.js"></script>
+    <script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
     <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
     <style>
         #app {
@@ -21,7 +21,7 @@
 </div>
 
 <script>
-    Vue.use(VueHtml5Editor, {image: {compress: false},language:"zh-cn"})
+    Vue.use(VueHtml5Editor)
     new Vue({
         el: "#app",
         data: {
diff --git a/example/custom-icon.html b/example/custom-icon.html
index 268533f..87525fc 100644
--- a/example/custom-icon.html
+++ b/example/custom-icon.html
@@ -5,7 +5,7 @@
     <title>vue html5 editor demo</title>
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
     <script src="../dist/vue-html5-editor.js"></script>
-    <script src="//cdn.bootcss.com/vue/1.0.17/vue.js"></script>
+    <script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
     <style>
         #app {
             margin: 50px auto;
diff --git a/example/extended-module.html b/example/extended-module.html
new file mode 100644
index 0000000..e81e09b
--- /dev/null
+++ b/example/extended-module.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>vue html5 editor demo</title>
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
+    <script src="../dist/vue-html5-editor.js"></script>
+    <script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
+    <script src="http://cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
+    <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
+    <style>
+        #app {
+            margin: 50px auto;
+            width: 800px;
+            max-width: 100%;
+        }
+    </style>
+</head>
+<body>
+<div id="app">
+    <vue-html5-editor :content.sync="content" :height="500"></vue-html5-editor>
+</div>
+
+
+<script type="x/template" id="template-emoji">
+    <button v-for="s in symbols" type="button" @click="insertSymbol(s)">{{s}}</button>
+</script>
+<script>
+
+    Vue.use(VueHtml5Editor, {
+        i18n: {
+            //i18n for custom module
+            "en-us": {
+                date: "insert current time",
+                emoji: "emoji"
+            }
+        },
+        //config custom module
+        date: {
+            format: "YYYY-MM-DD"
+        },
+        modules: [
+            {
+                name: "date",
+                icon: "fa fa-calendar",
+                i18n: "time",
+                show: true,
+                init: function (editor) {
+                    alert("time module init, config is \r\n" + JSON.stringify(this.config))
+                },
+                handler: function (editor) {
+                    editor.execCommand("insertText", moment().format(this.config.format || "YYYY-MM-DD HH:mm"))
+                },
+                destroyed: function (editor) {
+                    alert("time module destroyed")
+                }
+            },
+            {
+                //custom module with dashboard
+                name: "emoji",
+                icon: "fa fa-smile-o",
+                i18n: "emoji",
+                show: true,
+                init: function (editor) {
+                    console.log("emoji module init")
+                },
+                //vue component
+                dashboard: {
+                    template: "#template-emoji",
+                    data: function () {
+                        return {
+                            symbols: [
+                                ">_<|||",
+                                "^_^;",
+                                "⊙﹏⊙‖∣°",
+                                "^_^|||",
+                                "^_^\"",
+                                "→_→",
+                                "..@_@|||||..",
+                                "…(⊙_⊙;)…",
+                                "o_o ....",
+                                "O__O",
+                                "///^_^.......",
+                                "?o?|||",
+                                "( ^_^ )? ",
+                                "(+_+)?",
+                                "（?ε?）? ",
+                                "o_O???",
+                                "@_@a",
+                                "一 一+",
+                                ">\"<||||",
+                                "‘(*>﹏<*)′"
+                            ]
+                        }
+                    },
+                    methods: {
+                        insertSymbol: function (symbol) {
+                            //$parent is editor component instance
+                            this.$parent.execCommand("insertText", symbol)
+                        }
+                    }
+                }
+            }
+        ]
+    })
+    new Vue({
+        el: "#app",
+        data: {
+            content: "<h3>vue html5 editor</h3>",
+        }
+    })
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/example/i18n.html b/example/i18n.html
new file mode 100644
index 0000000..897a1c5
--- /dev/null
+++ b/example/i18n.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>vue html5 editor demo</title>
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
+    <script src="../dist/vue-html5-editor.js"></script>
+    <script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
+    <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
+    <style>
+        #app {
+            margin: 50px auto;
+            width: 800px;
+            max-width: 100%;
+        }
+    </style>
+</head>
+<body>
+<div id="app">
+    <vue-html5-editor :content.sync="content" :height="500"></vue-html5-editor>
+</div>
+
+<script>
+    Vue.use(VueHtml5Editor, {
+        language: "mars",
+        i18n: {
+            "mars": {
+                "align": "===",
+                "image": "<**>",
+                "list": "&&&",
+                "link": "%%^",
+                "unlink": "^%%",
+                "table": "@@@",
+                "font": "@#$",
+                "full screen": "~~~",
+                "text": "###",
+                "eraser": "<=",
+                "info": "^^^",
+                "color": "%%%",
+                "please enter a url": "%^& @#$#$%%^)(&-",
+                "create link": "&&&%$#",
+                "bold": "[\";]",
+                "italic": "\\\\",
+                "underline": "_-_",
+                "strike through": "--}",
+                "subscript": "^*^",
+                "superscript": ">*<",
+                "heading": "!!!",
+                "font name": "@!!",
+                "font size": ">><<",
+                "left justify": "<<<",
+                "center justify": "<->",
+                "right justify": ">>>",
+                "ordered list": ":|||",
+                "unordered list": "?|||",
+                "fore color": "@#!~",
+                "background color": "@!~~",
+                "row count": "--)",
+                "column count": "--(",
+                "save": "++<>++",
+                "upload": "<++++>",
+                "progress": ">~~~",
+                "unknown": "/\\/\\",
+                "please wait": "-))))",
+                "error": "&%$#@",
+                "abort": "//&",
+                "reset": ")***(",
+                "hr": ">----",
+                "undo": "<---|"
+            }
+        }
+    })
+    new Vue({
+        el: "#app",
+        data: {
+            content: "<h3>#$^%%^ $%&*&(* ';,'; )((*&*^&$</h3>",
+        }
+    })
+</script>
+</body>
+</html>
\ No newline at end of file
