Vue+Element 는 부 텍스트 편집기 의 예제 코드 를 사용 합 니 다.

부 텍스트 편집 기 는 모든 항목 에 사 용 됩 니 다.Element 에서 vue-quill-editor 구성 요 소 를 추천 합 니 다.지금 은 제 가 여러분 에 게 제공 하 겠 습 니 다.여러분 에 게 유용 하 기 를 바 랍 니 다.구체 적 인 캡 처 는 다음 과 같다.

편집기 구성 요소 설치
구체 적 인 방법:npm install vue-quill-editor--save
구성 요소 작성
우선 components 폴 더 에 U.vue 구성 요 소 를 만 듭 니 다.효과 도 는 다음 과 같 습 니 다.

구성 요소

<!--        -->
<template>
 <div>
  <script id="editor" type="text/plain"></script>
 </div>
</template>
<script>
 export default {
  name: 'UE',
  data () {
   return {
    editor: null
   }
  },
  props: {
   defaultMsg: {
    type: String
   },
   config: {
    type: Object
   }
  },
  mounted() {
   const _this = this;
   this.editor = UE.getEditor('editor', this.config); //    UE
   this.editor.addListener("ready", function () {
    _this.editor.setContent(_this.defaultMsg); //   UE     ，    。
   });
  },
  methods: {
   getUEContent() { //       
    return this.editor.getContent()
   }
  },
  destroyed() {
   this.editor.destroy();
  }
 }
</script>

페이지 에서 사용
다음은 코드 사용.

<template>
 <div>
  <el-row class="warp">
   <el-col :span="24" class="warp-breadcrum">
    <el-breadcrumb separator=">">
     <el-breadcrumb-item :to="{path:'/home'}"><b>  </b></el-breadcrumb-item>
     <el-breadcrumb-item :to="{path: '/aboutus/aboutlist'}">    </el-breadcrumb-item>
     <el-breadcrumb-item>      </el-breadcrumb-item>
    </el-breadcrumb>
   </el-col>
<!--
Form             ，      rule            ，  Form-Item   prop               。        ：http://element.eleme.io/#/zh-CN/component/form
-->
   <el-col :span="24" class="warp-main">
    <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="120px">
     <el-form-item label="  " prop="a_title">
      <el-input v-model="infoForm.a_title"></el-input>
     </el-form-item>

     <el-form-item label="  " prop="a_source">
      <el-input v-model="infoForm.a_source"></el-input>
     </el-form-item>
<!--     
-->
     <el-form-item label="  ">
      <div class="edit_container">
       <quill-editor v-model="infoForm.a_content"
              ref="myQuillEditor"
              class="editer"
              :options="editorOption" @ready="onEditorReady($event)">
       </quill-editor>
      </div>
     </el-form-item>

     <el-form-item>
      <el-button type="primary" @click="onSubmit">    </el-button>
     </el-form-item>
    </el-form>
   </el-col>


  </el-row>
 </div>
</template>

<script>
 import { quillEditor } from 'vue-quill-editor' //     
 export default {
  data() {
   return {
    infoForm: {
     a_title: '',
     a_source: '',
     a_content:'',
     editorOption: {}
    },
    //    
    rules: {
     a_title: [
      {required: true, message: '     ', trigger: 'blur'}
     ],
     a_content: [
      {required: true, message: '       ', trigger: 'blur'}
     ]
    },
   }
  },
  computed: {
   editor() {
    return this.$refs.myQuillEditor.quill
   }
  },
  mounted() {
   //   
  },
  methods: {
   onEditorReady(editor) {
   },
   onSubmit() {
    //  
//this.$refs.infoForm.validate，      
    this.$refs.infoForm.validate((valid) => {
     if(valid) {
      this.$post('m/add/about/us',this.infoForm).then(res => {
       if(res.errCode == 200) {
        this.$message({
         message: res.errMsg,
         type: 'success'
        });
        this.$router.push('/aboutus/aboutlist');
       } else {
        this.$message({
         message: res.errMsg,
         type:'error'
        });
       }
      });
     }
    });
   }
  },
  components: {
//     
   quillEditor
  }
 }
</script>

이상 은 모든 코드 입 니 다.감사합니다. 여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.