订单样式

src/components/mould/funBlock.vue

+<template>
+    <div>
+      磨磨小耳朵
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "funBlock"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/mould/lookBlock.vue

+<template>
+  <div>
+    <el-row :gutter="40">
+      <el-col :span="12">
+        <area-blcok/>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import AreaBlcok from '../textarea'
+  export default {
+    name: "lookBlock",
+    components:{
+      AreaBlcok
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/mould/playBlock.vue

+<template>
+    <div>
+      玩一玩
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "playBlock"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/resources/editorDialog.vue

@@ -15,13 +15,13 @@
         <lesson-content :formData="formData"/>
       </el-tab-pane>
       <el-tab-pane label="爸妈看一看" name="look">
-
+        <look-block :formData="formData"/>
       </el-tab-pane>
       <el-tab-pane label="宝贝玩一玩" name="play">
-
+        <play-block :formData="formData"/>
       </el-tab-pane>
       <el-tab-pane label="磨磨小耳朵" name="fun">
-
+        <fun-block :formData="formData"/>
       </el-tab-pane>
     </el-tabs>
   </el-dialog>
@@ -29,6 +29,9 @@
 
 <script>
   import baseBlock from '../mould/baseBlock'
+  import lookBlock from '../mould/lookBlock'
+  import playBlock from '../mould/playBlock'
+  import funBlock from '../mould/funBlock'
   import lessonContent from '../mould/lessonContent'
   export default {
     props:[
@@ -36,7 +39,10 @@
     ],
     components:{
       lessonContent,
-      baseBlock
+      baseBlock,
+      lookBlock,
+      playBlock,
+      funBlock
     },
     data() {
       return {

src/components/textarea/index.vue

 <template>
   <div class='tinymce'>
-    <div class="left">
-      <editor v-if="show" id='tinymce' v-model='tinymceHtml' :init='init'></editor>
-    </div>
-    <div class="right">
-      <div class="phone">
-        <div class="content" v-html='tinymceHtml'></div>
-      </div>
+    <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
+    <div>
+      <div class="imgInter" @click="imgInter()">插入图片</div>
     </div>
+    <el-dialog
+      title="插入图片"
+      :visible.sync="dialogVisible"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      center
+      :append-to-body="true"
+      width="30%">
+    </el-dialog>
   </div>
 </template>
 
@@ -31,14 +36,13 @@
       return {
         tinymceHtml: '请输入内容',
         show:'',
+        dialogVisible:true,
         init: {
           language_url: '/static/tinymce/zh_CN.js',
           language: 'zh_CN',
           skin_url: '/static/tinymce/skins/lightgray',
           height: 500,
-          plugins: 'preview media link lists image code table colorpicker textcolor wordcount contextmenu',
-          // toolbar:
-          //   'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
+          plugins: 'preview lists code colorpicker textcolor wordcount contextmenu',
           branding: false
         }
       }
@@ -51,6 +55,12 @@
     },
     mounted () {
 
+    },
+    methods:{
+      imgInter(){
+        this.tinymceHtml += `<img src="https://cdn.singsingenglish.com/new-sing/20181011/2de184727933c47a1a20fb354c55ab29b17256631539238287351.jpg" style="display: block;width: 100%"/>`
+      },
+      get
     },
     created:function(){
       tinymce.init({})
@@ -61,27 +71,22 @@
 <style scoped lang="less">
   @import "../../util/public";
   .tinymce{
-    height: 100%;
-    overflow: auto;
+    padding: 10px;
+    position: relative;
     .clear-both;
-    &>div{
-      float: left;
-      width: 50%;
-      position: relative;
-      .phone{
-        background:url("../../assets/phone.png") no-repeat;
-        background-size: 100% 100%;
-        width: 600px;
-        height: 800px;
-        position: relative;
-        .content{
-          position: absolute;
-          top: 120px;
-          left: 135px;
-          right: 160px;
-          bottom: 135px;
-          overflow: auto;
-        }
+    .imgInter{
+      position: absolute;
+      display: inline-block;
+      text-shadow: 0 1px 1px rgba(255,255,255,0.75);
+      top: 13px;
+      left: 290px;
+      box-shadow: none;
+      filter: none;
+      padding: 4px 6px;
+      border: 1px solid transparent;
+      &:hover{
+        border-color: #e2e4e7;
+        cursor: pointer;
       }
     }
   }