| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <!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="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
- <link href="https://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>
|