组件加入tinymce

src/components/FormDesigner/Container.vue

@@ -281,6 +281,7 @@ import 'vue-awesome/icons/sliders-h'
 import 'vue-awesome/icons/regular/image'
 import 'vue-awesome/icons/chalkboard'
 import 'vue-awesome/icons/upload'
+import 'vue-awesome/icons/text-height'
 
 import GenerateForm from './GenerateForm'
 // eslint-disable-next-line no-unused-vars

src/components/FormDesigner/GenerateForm.vue

@@ -21,20 +21,9 @@
               v-for="(col, colIndex) in item.columns"
               :key="colIndex"
               :span="col.span">
-
-
               <template v-for="citem in col.list" >
-                <el-form-item
-                  v-if="citem.type=='blank'"
-                  :label="citem.name"
-                  :prop="citem.model"
-                  :key="citem.key">
-                  <slot
-                    :name="citem.model"
-                    :model="models"/>
-                </el-form-item>
+
                 <genetate-form-item
-                  v-else
                   :key="citem.key"
                   :models.sync="models"
                   :remote="remote"

src/components/FormDesigner/GenerateFormItem.vue

@@ -162,14 +162,21 @@
       />
     </template>
 
+    <template v-if="widget.type=='richtext'">
+                <Tinymce  :height="400"  v-model="dataModel"></Tinymce>
+
+    </template>
+
 
   </el-form-item>
 </template>
 
 <script>
+import Tinymce from '@/components/Tinymce' // 富文本编辑器
 
 export default {
   components: {
+    Tinymce,
   },
   props: ['widget', 'models', 'rules', 'remote'],
   data() {

src/components/FormDesigner/WidgetFormItem.vue

@@ -8,6 +8,10 @@
     :label-width="element.name===''?'0px':''"
 
   >
+  <template v-if="element.type == 'richtext'">
+              <Tinymce  :height="400"          v-model="element.options.defaultValue"
+ />
+    </template>
 
     <template v-if="element.type == 'input'">
       <el-input
@@ -209,11 +213,13 @@ import 'vue-awesome/icons/sliders-h'
 import 'vue-awesome/icons/regular/image'
 import 'vue-awesome/icons/chalkboard'
 import UploadAffix from '@/components/UploadAffix' // 上传模块
+import Tinymce from '@/components/Tinymce' // 富文本编辑器
 
 export default {
   components: {
     icon,
     UploadAffix,
+    Tinymce,
   },
   props: ['element', 'select', 'index', 'data'],
   data() {

src/components/FormDesigner/componentsConfig.js

@@ -233,6 +233,16 @@ export const advanceComponents = [
       },
     },
   },
+
+  {
+    type: 'richtext',
+    name: '富文本',
+    icon: 'text-height',
+    options: {
+      defaultValue: '',
+
+    },
+  },
 ]
 
 export const layoutComponents = [

src/components/Tinymce/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
     <textarea :id="tinymceId" class="tinymce-textarea"/>
-    <div class="editor-custom-btn-container">
+    <div class="editor-custom-btn-container" style="display:none">
       <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"/>
     </div>
   </div>

src/views/Archive/person_edit.vue

@@ -1,21 +1,12 @@
 <template>
  <div>
-          <Tinymce ref="editor" :height="400" v-model="content" />
 <crud-table tableName="person" toolbarButton="add,clear,search" handleButton="edit,delete"></crud-table>
  </div>
 </template>
 <script>
-import Tinymce from '@/components/Tinymce'
 
 export default {
   name: 'PersonEdit',
-  data() {
-    return {
-      content: '',
-    }
-  },
-  components: {
-    Tinymce,
-  },
+
 }
 </script>