test

src/components/input/normalArea.vue

@@ -1,7 +1,15 @@
 <template>
   <div>
     <article :id="id" :style="styles">
-      <editor :id="'tinymce_'+id" ref="editor" v-model="inputValue" :init="init" @input="changeText" />
+      <a href="javascript:;" id="edit-btn" @click="() => styleHandle('bold')">加粗</a>
+      <a href="javascript:;" id="edit-btn" @click="() => styleHandle('backColor', 'red')">背景颜色</a>
+      <div id="cc" class="editor" contenteditable="true" style="display:inline-block;border:1px solid #eee; width:200px; height:200px">
+        <p>12321</p>
+      </div>
+      <div id="csc" class="editor" contenteditable="true" style="display:inline-block;border:1px solid #eee; width:300px; height:200px">
+        <p>12321</p>
+      </div>
+      <!-- <editor :id="'tinymce_'+id" ref="editor" v-model="inputValue" :init="init" @input="changeText" /> -->
     </article>
   </div>
 </template>
@@ -79,7 +87,16 @@ export default {
       this.inputValue = e
       this.$emit('update:value', this.inputValue)
       this.$emit('change', this.inputValue)
+    },
+    styleHandle(aCommandName, val) {
+      // const editor = document.getElementById('cc')
+      document.execCommand(aCommandName, false, val)
     }
   }
 }
 </script>
+<style scoped lang="scss">
+.editor {
+  border: 1px solid #666;
+}
+</style>