底部导航内容的编辑器

src/views/tabbar/tabbarDetail.vue

@@ -84,11 +84,14 @@
                     <el-form-item label="内容标题:" prop="contentTitle">
                         <el-input v-model="ruleForm.contentTitle" placeholder="请输入内容标题"></el-input>
                     </el-form-item>
-                    <el-form-item label="内容详情:" prop="contentDetail">
+                     <el-form-item label="内容详情" prop="contentDetail">
+                        <myEditor ref="myEditor" v-model="ruleForm.contentDetail"></myEditor>
+                    </el-form-item>
+                    <!--el-form-item label="内容详情:" prop="contentDetail">
                         <el-input v-model="ruleForm.contentDetail" type="textarea" :rows="10" placeholder="请输入内容详情"
                             resize="none">
                         </el-input>
-                    </el-form-item>
+                    </el-form-item-->
                 </div>
                 <div class="dialogBtn">
                     <el-button type="info" @click="cancelForm">取消</el-button>
@@ -107,9 +110,12 @@ import tableTitle from './components/tableTitle.vue';
 //引入公用样式
 import '@/styles/global.less';
 import { addFooterContent, getFooterContent, upFooterContent, delFooterContent } from '@/api/tabbar'
+//引入富文本编辑器
+import myEditor from '../../components/edit/myEditor.vue';
 export default {
     components: {
         tableTitle,//表格标题
+        myEditor,
     },
     data() {
         const validateEmpty = (rule, value, callback) => {
@@ -250,7 +256,10 @@ export default {
             //数据回显
             this.ruleForm.listTitle = val.list_title //列表标题
             this.ruleForm.contentTitle = val.con_title //内容标题
-            this.ruleForm.contentDetail = val.content //内容详情
+            this.$nextTick(() => {
+                this.ruleForm.contentDetail = val.content //内容详情
+            });
+            
         },
 
         //1.8 添加