vueditor/index.html at master · hifarer/vueditor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vueditor</title>
  <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
  <link rel="stylesheet" type="text/css" href="./dist/style/vueditor.min.css">
  <style>
    body {
      margin: 0;
      height: 2000px;
    }
    #github {
      text-align: right;
    }
    #editor1 {
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>

  <div id="github">
    <a href="https://github.com/hifarer/vueditor">Github</a>
  </div>
  <div id="editor1">
    <Vueditor></Vueditor>
  </div>
  <div id="editor2"></div>

  <script src="//cdn.bootcss.com/vue/2.0.5/vue.min.js"></script>
  <script src="//cdn.bootcss.com/vuex/2.0.0/vuex.min.js"></script>
  <script src="./dist/language/lang.cn.js"></script>
  <script src="./dist/plugins/emoji.min.js"></script>
  <script src="./dist/script/vueditor.min.js"></script>
  <script>
    let uploadUrl = ''
    let plugins = [
      {
        name: 'emoji',
        element: {
          type: 'button',
          lang: {
            title: 'Emoji'
          },
          className: 'icon-smile-o'
        },
        // emoji loaded from script tag, line 35
        component: emoji
      }
    ]

    Vue.use(Vueditor, {
      toolbar: [
        'removeFormat', 'undo', 'redo', '|', 'code', 'element', 'fontName', 'fontSize', 'foreColor', 'backColor', 'divider', 'bold', 'italic', 'underline', 'strikeThrough',
        'link', 'unLink', 'divider', 'subscript', 'superscript', 'divider', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull',
        '|', 'indent', 'outdent', 'insertOrderedList', 'insertUnorderedList', '|', 'emoji', 'picture', 'table', '|', 'fullscreen', 'sourceCode', 'markdown'
      ],
      fontName: [
        {val: 'arial black'},
        {val: 'times new roman'},
        {val: 'Courier New'}
      ],
      fontSize: ['0.8rem', '1.0rem', '1.2rem', '1.5rem', '2.0rem'],
      uploadUrl: uploadUrl,
      plugins: plugins
    })

    let parent = new Vue({
      el: '#editor1'
    })
    let editor = parent.$children[0]
    editor.setContent(`fill your content here`)
  </script>
  <script>
    let inst = Vueditor.createEditor('#editor2', {
      lang: lang,
      toolbar: [
        'removeFormat', 'undo', 'redo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor', 'sourceCode'
      ],
      uploadUrl: '',
      id: 'someid',
      classList: ['someclass']
    })
    inst.setContent('fill your content here')
  </script>
</body>
</html>