feat: 创建新的 editor 组件

src/App.vue

@@ -1,8 +1,20 @@
 <template>
-  <div id="app" contenteditable>
+  <div id="app">
     <router-view />
   </div>
 </template>
 
+<script>
+export default {}
+</script>
+
+<style lang="scss">
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>
+
 <style lang="scss" scoped>
+
 </style>

src/components/EditableItem.vue

@@ -0,0 +1,40 @@
+<template>
+  <section>
+    <div contenteditable @input.stop="changeValue">
+      {{ content }}
+    </div>
+    {{ content }}
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'editable-item',
+  props: ['tagName', 'content'],
+  data: () => {
+    return {
+      content: '123'
+    }
+  },
+  methods: {
+    changeValue: function(e) {
+      this.content = e.target.innerText
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+* [contenteditable] {
+  outline: none;
+  padding: 10px;
+
+  &:hover {
+    background: #fafcfe;
+  }
+
+  &:focus {
+    background: #f9fafc;
+  }
+}
+</style>

src/router/index.js

@@ -4,11 +4,18 @@ import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
-const routes = [{
-  path: '/',
-  name: 'home',
-  component: Home
-}]
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home
+  },
+  {
+    path: '/editor',
+    name: 'editor',
+    component: () => import('../views/editor/Editor.vue')
+  }
+]
 
 const router = new VueRouter({
   mode: 'history',

src/views/Home.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <h1>SEEC 课堂助手</h1>
+    调试链接：<br>
+    1. <router-link to="/editor">编辑器</router-link>
   </div>
 </template>
 

src/views/editor/Editor.vue

@@ -0,0 +1,38 @@
+<template>
+  <section id="container">
+    <template v-for="item in editableItems">
+      <editable-item-vue
+        :key="item.id"
+        :tagName="item.tagName"
+        :content="item.content"
+      />
+    </template>
+  </section>
+</template>
+
+<script>
+import EditableItemVue from '../../components/EditableItem.vue'
+export default {
+  name: 'editor',
+  data: () => {
+    return {
+      editableItems: [{ id: '', tagName: 'div', content: '2' }]
+    }
+  },
+  components: {
+    EditableItemVue
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#container {
+  min-height: 100vh;
+  padding: 10px;
+
+  box-sizing: border-box;
+
+  outline: none;
+  border: 40px solid lightblue;
+}
+</style>