HTML Editor go on

src/components/CMyPageElem/CMyPageElem.vue

@@ -1,26 +1,44 @@
 <template>
   <div>
     <div v-if="mypathin && !!rec">
-      <q-toolbar>
-        <q-toggle v-if="tools.isManager()"
-                  v-model="editOn"
-                  icon="fas fa-pencil-alt"
-                  >
-
-        </q-toggle>
-       <!-- <q-toggle v-if="tools.isManager()"
-                  v-model="addOn"
-                  icon="fas fa-plus"
-                  >
-
-        </q-toggle>-->
-
-
-      </q-toolbar>
+      <q-toggle
+        v-if="tools.isManager()"
+        v-model="editOn"
+        color="green"
+        @update:model-value="changeVisuDrawer"
+        icon="fas fa-pencil-alt"
+      >
+      </q-toggle>
+      <q-drawer
+        v-model="editOn"
+        side="right"
+        show-if-above
+        :width="400"
+        :breakpoint="700"
+        elevated
+      >
+        <q-bar dense class="bg-primary text-white">
+          <q-toolbar-title> Editor </q-toolbar-title>
+          <q-btn
+            flat
+            round
+            color="white"
+            icon="close"
+            @click="editOn = false; changeVisuDrawer()"
+          ></q-btn>
+        </q-bar>
+        <CMyEditElem
+          :myelem="selElem"
+          :editOn="true"
+          :path="rec.path"
+          @saveElem="saveElem"
+        >
+        </CMyEditElem>
+      </q-drawer>
 
       <div class="q-ma-sm q-gutter-sm q-pa-xs">
         <div v-if="!!rec.img1" class="text-center">
-          <q-img :src="``+ rec.img1" class="img"></q-img>
+          <q-img :src="`` + rec.img1" class="img"></q-img>
         </div>
 
         <div v-if="!!rec.content" v-html="rec.content"></div>
@@ -28,41 +46,62 @@
         </q-video>
 
         <div v-if="!!rec.img2" class="text-center">
-          <q-img :src="``+ rec.img2" class="img"></q-img>
+          <q-img :src="`` + rec.img2" class="img"></q-img>
         </div>
 
         <div v-if="!!rec.content2" v-html="rec.content2"></div>
-        <q-video v-if="!!rec.video2" :src="rec.video2" :ratio="rec.ratio2"></q-video>
+        <q-video
+          v-if="!!rec.video2"
+          :src="rec.video2"
+          :ratio="rec.ratio2"
+        ></q-video>
 
         <div v-if="!!rec.img3" class="text-center">
-          <q-img :src="``+ rec.img2" class="img"></q-img>
+          <q-img :src="`` + rec.img2" class="img"></q-img>
         </div>
 
         <div v-if="!!rec.content3" v-html="rec.content3"></div>
-        <q-video v-if="!!rec.video3" :src="rec.video3" :ratio="rec.ratio3"></q-video>
+        <q-video
+          v-if="!!rec.video3"
+          :src="rec.video3"
+          :ratio="rec.ratio3"
+        ></q-video>
         <div v-if="!!rec.content4" v-html="rec.content4"></div>
 
-        <span v-for="(myelem, ind) in myelems" :key="ind">
-          <CMyElem v-if="myelem.active || editOn" :myelem="myelem" :editOn="editOn" :addOn="addOn" :path="rec.path">
-
+        <div v-for="(myelem, ind) in myelems" :key="ind">
+          <CMyElem
+            v-if="myelem.active || editOn"
+            :myelem="myelem"
+            :editOn="editOn"
+            :addOn="addOn"
+            :path="rec.path"
+            @selElemClick="selElemClick"
+          >
           </CMyElem>
-        </span>
+        </div>
         <div v-if="myelems.length === 0">
-          <CMyElem v-if="editOn" :myelem="myelemVoid" :editOn="editOn" :addOn="addOn" :path="rec.path">
-
+          <CMyElem
+            v-if="editOn"
+            :myelem="myelemVoid"
+            :editOn="editOn"
+            :addOn="addOn"
+            :path="rec.path"
+          >
           </CMyElem>
         </div>
       </div>
     </div>
     <div v-else>
-
       <div v-if="!!title">
         <CTitle
-          v-if="imgbackground" :imgbackground="imgbackground"
-          :headtitle="title" :sizes="sizes" :styleadd="styleadd"></CTitle>
+          v-if="imgbackground"
+          :imgbackground="imgbackground"
+          :headtitle="title"
+          :sizes="sizes"
+          :styleadd="styleadd"
+        ></CTitle>
         <div v-if="!imgbackground">
-          <CImgTitle v-if="img" :src="img" :title="title">
-          </CImgTitle>
+          <CImgTitle v-if="img" :src="img" :title="title"> </CImgTitle>
         </div>
         <slot></slot>
         <div v-if="!nofooter">