add view

src/views/charts/keyboard.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="components-container" style='height:100vh'>
+    <div class='chart-container'>
+       <keyboardChart height='100%' width='100%' />
+    </div>
+
+  </div>
+</template>
+<script>
+    import keyboardChart from 'components/Charts/keyboard';
+
+    export default {
+      components: { keyboardChart },
+      data() {
+        return {
+
+        }
+      }
+    };
+</script>
+
+<style scoped>
+.chart-container{
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+</style>
+

src/views/charts/keyboard2.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="components-container" style='height:100vh'>
+    <div class='chart-container'>
+       <keyboardChart2 id='apple' height='100%' width='100%' />
+    </div>
+
+  </div>
+</template>
+<script>
+    import keyboardChart2 from 'components/Charts/keyboard2';
+
+    export default {
+      components: { keyboardChart2 },
+      data() {
+        return {
+
+        }
+      }
+    };
+</script>
+
+<style scoped>
+.chart-container{
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+</style>
+

src/views/charts/markdown.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="components-container">
+    <code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
+    <div class="editor-container">
+      <MdEditor  id='contentEditor' ref="contentEditor" v-model='content' :height="150"></MdEditor>
+    </div>
+  </div>
+</template>
+<script>
+    import MdEditor from 'components/MdEditor';
+
+    export default {
+      components: { MdEditor },
+      data() {
+        return {
+          content: 'Simplemde'
+        }
+      }
+    };
+</script>
+
+

src/views/charts/tinymce.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="components-container">
+    <code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
+    <div class="editor-container">
+      <Tinymce :height=200 ref="editor" v-model="content"></Tinymce>
+    </div>
+    <!--<div class='editor-content'>
+{{content}}
+    </div>-->
+  </div>
+</template>
+<script>
+    import Tinymce from 'components/Tinymce';
+
+    export default {
+      components: { Tinymce },
+      data() {
+        return {
+          content: 'Tinymce'
+        }
+      },
+      methods: {
+
+      }
+    };
+</script>
+
+