vue+element ui項目總結點（三）富文本編輯器 vue-wangeditor

1.參考 https://www.npmjs.com/package/vue-wangeditor 使用該富文本編輯器

<template>
  <div class="egit_box">
    <p>富文本編輯器試用</p>
    <div class="text_box" style="width: 100%;display: flex;justify-content: center;">
      <vue-egdit ref="editor" id="editor" v-model="initContent" :menus="meaus"></vue-egdit>
    </div>
    <div class="btn" style="margin-top: 30px;">
      <el-button type="primary" @click="setContent">設置富文本內容</el-button>
      <el-button type="primary" @click="getContent">獲取富文本內容</el-button>
      <el-button type="primary" @click="goNextPage">跳轉頁面</el-button>
    </div>
  </div>
</template>
<script>
//參考文檔 https://www.npmjs.com/package/vue-wangeditor
import vueEgdit from 'vue-wangeditor' export default { components: { vueEgdit }, data() { return { initContent: '初始化富文本內容', 
 meaus: [ 'source', // 源碼模式
        '|', 'bold', // 粗體
        'underline', // 下劃線
        'italic', // 斜體
        'strikethrough', // 中線
        'eraser', // 清空格式
        'forecolor', // 文字顏色
        'bgcolor', // 背景顏色
        '|', 'quote', // 引用
        'fontfamily', // 字體
        'fontsize', // 字號
        'head', // 標題
        'unorderlist', // 無序列表
        'orderlist', // 有序列表
        'alignleft', // 左對齊
        'aligncenter', // 居中
        'alignright', // 右對齊
        '|', 'link', // 連接
        'unlink', // 取消連接
        'table', // 表格
        'emotion', // 表情
        '|', 'img', // 圖片
        'video', // 視頻
        'insertcode', // 插入代碼
        '|', 'undo', // 撤銷
        'redo', // 重作
        'fullscreen' // 全屏
 ] } }, mounted() { console.log(this.$refs.editor, '富文本實例') }, methods: { setContent() { this.initContent = '設置好的內容'; this.$refs.editor.setHtml(this.initContent) //如設置：後臺返回來的固定內容
 console.log(this.initContent, '設置編輯器內容') }, getContent() { this.initContent = this.$refs.editor.getHtml(this.initContent); console.log(this.initContent, '獲取編輯器當前內容的html代碼片斷') }, //vue 跳轉
 goNextPage() { this.$router.push({ name: 'testEgdit', }) } } } </script>