VUE實現富文本編輯以及組件傳值的使用總結

VUE實現使用富文本編輯，如下圖：

 

 

實現這個富文本編輯需要以下步驟：

第一步：安裝編輯器組件
　　　　npm install vue-quill-editor –-save

第二步：創建一個Ue.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>

第三步：創建一個font.css給定樣式，需要引入

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before { content: "宋體"; font-family: "SimSun"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before { content: "黑體"; font-family: "SimHei"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before { content: "微軟雅黑"; font-family: "Microsoft YaHei"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before { content: "楷體"; font-family: "KaiTi"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before { content: "仿宋"; font-family: "FangSong"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before { content: "Arial"; font-family: "Arial"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before { content: "Times New Roman"; font-family: "Times New Roman"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before { content: "sans-serif"; font-family: "sans-serif"; } .ql-font-SimSun { font-family: "SimSun"; } .ql-font-SimHei { font-family: "SimHei"; } .ql-font-Microsoft-YaHei { font-family: "Microsoft YaHei"; } .ql-font-KaiTi { font-family: "KaiTi"; } .ql-font-FangSong { font-family: "FangSong"; } .ql-font-Arial { font-family: "Arial"; } .ql-font-Times-New-Roman { font-family: "Times New Roman"; } .ql-font-sans-serif { font-family: "sans-serif"; }

第三步：就是創建MessageTemplateConfig.vue組件代碼了，標紅的為代碼優化部分，橘色的模板內容就是最簡單的富文本編輯器代碼了，模板名稱，郵件標題什么的都是自己定義的，想要什么加什么就行，我這是發送郵件的一個模板。表單驗證的那部分代碼可以解開的，我沒用所以注釋掉了。

<template>
  <div >
    <el-row class="warp">
      <!--
      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="messageTemplate" :rules="rules" label-width="120px">
          <el-form-item label="模板名稱" prop="a_title">
            <el-input v-model="messageTemplate.template_name"></el-input>
          </el-form-item>
          <el-form-item label="郵件標題">
            <el-input v-model="messageTemplate.email_title"></el-input>
          </el-form-item>
          <el-form-item label="抄送人">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="工單創建人"></el-checkbox>
              <el-checkbox label="防火牆小組"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="發送工單信息" >
              <el-button class="tag-read" type="success" size="mini" data-clipboard-text="RQ申請人姓名" @click="copy">RQ申請人姓名</el-button>
              <el-button class="tag-read" type="success" size="mini" data-clipboard-text="RQ申請人工號" @click="copy">RQ申請人工號</el-button>
              <el-button class="tag-read" type="success" size="mini" data-clipboard-text="RQ工單號" @click="copy">RQ工單號</el-button>
              <el-button class="tag-read" type="success" size="mini" data-clipboard-text="創建人姓名" @click="copy">創建人姓名</el-button>
              <el-button class="tag-read" type="success" size="mini" data-clipboard-text="創建人工號" @click="copy">創建人工號</el-button>
              <el-button class="tag-read" type="success" size="mini" data-clipboard-text="工單名稱" @click="copy">工單名稱</el-button>
              <el-button class="tag-read" type="success" size="mini" data-clipboard-text="CHG單號" @click="copy">CHG單號</el-button>
              <el-button class="tag-read" type="success" size="mini" data-clipboard-text="執行時間" @click="copy">執行時間</el-button>
              <el-button class="tag-read" type="success" size="mini" data-clipboard-text="創建人郵箱" @click="copy">創建人郵箱</el-button>
          </el-form-item>
          <el-form-item label="模板內容">
            <div class="edit_container">
              <quill-editor v-model="messageTemplate.content" style="height: 300px;" :options="editorOption">
                <!-- 自定義toolar 代碼優化部分-->
                <div id="toolbar" slot="toolbar">
                  <!-- Add a bold button -->
                  <button class="ql-bold" title="加粗">Bold</button>
                  <button class="ql-italic" title="斜體">Italic</button>
                  <button class="ql-underline" title="下划線">underline</button>
                  <button class="ql-strike" title="刪除線">strike</button>
                  <button class="ql-blockquote" title="引用"></button>
                  <button class="ql-code-block" title="代碼"></button>
                  <button class="ql-header" value="1" title="標題1"></button>
                  <button class="ql-header" value="2" title="標題2"></button>
                  <!--Add list -->
                  <button class="ql-list" value="ordered" title="有序列表"></button>
                  <button class="ql-list" value="bullet" title="無序列表"></button>
                  <!-- Add font size dropdown -->
                  <select class="ql-header" title="段落格式">
                    <option selected>段落</option>
                    <option value="1">標題1</option>
                    <option value="2">標題2</option>
                    <option value="3">標題3</option>
                    <option value="4">標題4</option>
                    <option value="5">標題5</option>
                    <option value="6">標題6</option>
                  </select>
                  <select class="ql-size" title="字體大小">
                    <option value="10px">10px</option>
                    <option value="12px">12px</option>
                    <option value="14px">14px</option>
                    <option value="16px" selected>16px</option>
                    <option value="18px">18px</option>
                    <option value="20px">20px</option>
                  </select>
                  <select class="ql-font" title="字體">
                    <option value="SimSun">宋體</option>
                    <option value="SimHei">黑體</option>
                    <option value="Microsoft-YaHei">微軟雅黑</option>
                    <option value="KaiTi">楷體</option>
                    <option value="FangSong">仿宋</option>
                    <option value="Arial">Arial</option>
                  </select>
                  <!-- Add subscript and superscript buttons -->
                  <select class="ql-color" value="color" title="字體顏色"></select>
                  <select class="ql-background" value="background" title="背景顏色"></select>
                  <select class="ql-align" value="align" title="對齊"></select>
                  <button class="ql-clean" title="還原"></button>
                  <!-- You can also add your own -->
                </div>
              </quill-editor>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button style="margin-top:45px" type="primary" @click="onSubmit">確認提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>


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

<script>
　　//富文本編輯器需要引用的 import { Quill, quillEditor } from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' //引入font.css 路徑需要注意 要寫對 import '../ue/font.css'

　//復制粘貼需要的 import Clipboard from 'clipboard'

  // 自定義字體大小
  let Size = Quill.import('attributors/style/size')
  Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
  Quill.register(Size, true)

  // 自定義字體類型
  var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
    '宋體', '黑體'
  ]
  var Font = Quill.import('formats/font')
  Font.whitelist = fonts
  Quill.register(Font, true)

  export default {
    name: 'FuncFormsEdit',
    components: {
      quillEditor
    },
    computed: {
      /*editor() {
        return this.$refs.myQuillEditor.quill
      }*/
    },
    mounted() {
      //初始化
    },
    data() {
      return {
        messageTemplate: {
          template_name: '',
          email_sender_name: '',
          content:'',
          email_title: ''
        },
        checkList: [],
        value: '',
        options: [{
          value: '1',
          label: '工單創建人'
        },{
          value: '2',
          label: '防火牆小組'
        }],
        //表單驗證
        rules: {
          /*a_title: [
            {required: true, message: '請輸入標題', trigger: 'blur'}
          ],
          a_content: [
            {required: true, message: '請輸入詳細內容', trigger: 'blur'}
          ]*/
        },
        editorOption: {
          placeholder: "請編寫發送內容，直接復制工單信息標簽即可",
          theme: "snow", // or 'bubble'
          modules: {
            toolbar: {
              container: '#toolbar'
            }
          }
        }
      }
    },
    props:["messageTemplate"],
    watch:{
      messageTemplate: function(a,b){
        if (a.email_sender_name != ""){
          this.checkList = eval(a.email_sender_name)
        }
      }
    },
    methods: {
　　　　//這一塊是點擊復制功能 也需要添加組件 安裝命令 npm install clipboard --save copy() { var clipboard = new Clipboard('.tag-read') clipboard.on('success', e => { this.$message({ message: "復制成功", type: "success" }); // 釋放內存  clipboard.destroy() }) },
      onSubmit() {
        this.messageTemplate.email_sender_name = this.checkList;
        let addParam = {
          id: "addMessageTemplate",
          entity: this.messageTemplate
        };
        this.post("addMessageTemplate", addParam, d => {
          this.goto("/pro/operation/message_template")
          window.location.reload();
          if (d.code == 200) {
            this.$message({
              message: "操作成功",
              type: "success"
            });
          }else{
            this.$message({
              message: d.errorMessage,
              type: "error"
            });
          }

        });
      }
    },
  }
</script>

<style scoped>
</style>

第四步：創建一個MessageTemplate.vue文件使用MessageTemplateConfig.vue這個組件

<template>
  <div>
    <el-dialog title="模板管理" :visible.sync="menuVisible" width="60%">
　　　　//調用組件的方式 並綁定值 進行組件間的傳值
      <MessageTemplateConfig :messageTemplate = this.table.messageTemplate></MessageTemplateConfig>
    </el-dialog>
    <DialogPanel
      @ok="doUpdate"
      @cancel="cancel"
      title="修改角色"
      :status="updateDialogStatus"
      :list="updateCols"
      width="90%"
    ></DialogPanel>
    <div class="table-top">
      <el-row>
        <el-input
          v-model="table.filterText"
          placeholder="[模板名稱]"
          size="mini"
          style="width:300px;margin-right:5px;"
        ></el-input>
        <el-tooltip class="item" effect="dark" content="查詢" placement="top">
          <el-button
            @click="query"
            size="mini"
            icon="el-icon-search"
            type="primary"
            circle
          ></el-button>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="添加模板"
          placement="top"
        >
          <el-button
            @click="showMenu()"
            size="mini"
            type="success"
            icon="el-icon-plus"
            circle
          ></el-button>
        </el-tooltip>
      </el-row>
    </div>
    <el-table
      class="auto_height_table"
      stripe
      size="small"
      :height="table.height"
      :data="table.data"
      style="width: 100%"
    >
      <!-- <el-table-column type="selection" width="40"></el-table-column> -->
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-tooltip content="編輯模板" placement="top">
            <i
              @click="toUpdate(scope.row)"
              class="operate-icon el-icon-edit brand-color"
            ></i>
          </el-tooltip>
          <el-tooltip content="刪除模板" placement="top">
            <i
              @click="doDelete(scope.row)"
              class="operate-icon el-icon-delete danger-color"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        label="序號"
        type="index"
        :index="indexMethod"
        width="50"
      ></el-table-column>
      <el-table-column
        align="center"
        v-for="(node, index) in table.cols"
        sortable
        :key="index"
        :prop="node.index"
        :label="node.label"
      >
      </el-table-column>
    </el-table>
    <!--<div class="fw-page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="table.page.currentPage"
        :page-sizes="[30, 50, 100, 200]"
        :page-size="table.page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="table.page.count"
      ></el-pagination>
    </div>-->
  </div>
</template>

<script>
import DialogPanel from "../lib/dialog";
export default {
  name: "roleManage",
  components: { DialogPanel,
    MessageTemplateConfig: resolve => require(["@/components/operation/MessageTemplateConfig"], resolve),},
  data() {
    return {
      menuList: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      menuVisible: false,
      addCols: [],
      updateCols: [],
      addDialogStatus: false,
      updateDialogStatus: false,
      selectedMenus: [],
      table: {
        height: 500,
        cols: [
          { index: "template_name", label: "模板名稱" },
          { index: "create_user", label: "創建人" },
          { index: "create_time", label: "創建時間" }
        ],
        page: {
          count: 0,
          currentPage: 1,
          pageSize: 10
        },
        data: [], //用戶信息
        messageTemplate:"",
        filterText: ""
      }
    };
  },
  methods: {
    //頁碼累加
    indexMethod(index) {
      return (
        (this.table.page.currentPage - 1) * this.table.page.pageSize + 1 + index
      );
    },
    cancel() {
      window.location.reload();
      this.addDialogStatus = false;
      this.updateDialogStatus = false;
    },
    handleSizeChange(val) {
      this.table.page.pageSize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.table.page.currentPage = val;
      this.query();
    },
    doUpdate(list) {
      let column = {};
      for (let i = 0; i < list.length; i++) {
        let name = list[i].index;
        column[name] = list[i].value;
      }
      let checkResult = this.check(column);
      if (!checkResult) {
        return;
      }
      let updateParam = {
        id: "updateRole",
        filterText: this.id,
        entity: column
      };
      this.updateDialogStatus = false;
      this.post("update", updateParam, d => {
        if (d.code == 200) {
          this.query(); //返回成功后刷新列表
          this.$message({
            message: "修改成功",
            type: "success"
          });
        }
      });
    },

    toUpdate(row) {
      let params = {
        id: "queryMessageTemplate",
        filterText: row.id
      };
      this.post("queryMessageTemplate", params, d => {
        this.table.messageTemplate = d.object;
      });
      this.menuVisible = true;
    },
    //表單驗證
    check(column) {
      if (!column.name) {
        this.$message({
          message: "請輸入角色名稱！",
          type: "warning"
        });
        return false;
      }
      if (!column.type) {
        this.$message({
          message: "請輸入角色類型！",
          type: "warning"
        });
        return false;
      }
      return true;
    },
    query() {
      this.table.data = [];
      let params = {
        d: new Date().getTime(),
        id: "queryMessageTemplateList",
        page: this.table.page,
        filterText: this.table.filterText
      };
      this.post("queryMessageTemplateList", params, d => {
        this.table.data = d.list;
      });
    },
    doDelete(row) {
      this.$confirm("確定要刪除該記錄嗎？").then(_ => {
        this.post("delete", { id: "deleteMessageTemplate", filterText: row.id }, d => {
          if (d.code == 200) {
            this.query(); //返回成功后刷新列表
            this.$message({
              message: "刪除成功",
              type: "success"
            });
          }
        });
      });
    },
    autoChangeTableHeight() {
      let allHeight = window.innerHeight;
      let dos = document.getElementsByClassName("auto_height_table");
      for (let i = 0; i < dos.length; i++) {
        let d = dos[i];
        let offsetTop = d.offsetTop;
        let gloHeight = 39;
        let h = allHeight - gloHeight - offsetTop;
        if (h < 393) {
          h = 393;
        }
        this.table.height = h;
      }
    },
    //添加信息模板
    showMenu(row) {
      this.table.messageTemplate = {
        template_name: '',
        email_sender_name: '',
        content:'',
        email_title: ''
      };
      this.menuVisible = true;
    },


  },
  created() {
    this.query();
    this.autoChangeTableHeight();
  },
  mounted() {
    this.$nextTick(_ => {
      this.autoChangeTableHeight();
      window.onresize = _ => {
        this.autoChangeTableHeight();
      };
    });
  },
  destroyed() {
    window.onresize = "";
  }
};
</script>
<style scoped></style>

以上步驟以及代碼中的提示就可以實現簡單的富文本編輯器了。

接下來說一下組件傳值，在第三步和第四步之間用到了組件傳值，代碼中都有標注，接下來拿出來重點說一下：

第四步的使用組件代碼：標紅處為傳遞到組件的值。

<el-dialog title="模板管理" :visible.sync="menuVisible" width="60%">
      <MessageTemplateConfig :messageTemplate = this.table.messageTemplate></MessageTemplateConfig>
</el-dialog>

第三步組件接收到傳遞過來的值，並進行處理：此段代碼刪除了一部分，主要展示接收值，並進行處理，完整代碼看上面第三步代碼即可。

data() {
      return {
        checkList: [],
      }
    },
    props:["messageTemplate"],  //通過props這個屬性獲取傳遞過來的值
    watch:{ 　　　　　　　　　　　　//在通過watch監聽這個值的變化，將值賦給組件中的一個屬性  這里需要注意的是 一定要確定這兩個值是否是同一類型 不然不會生效喲 有時候即使看上去格式一模一樣 但是就是不生效 這時候就要確認一下 兩個值是否是同一類型　　　　　　　　　　　　
      messageTemplate: function(a,b){  //a是新值 b是舊值
        if (a.email_sender_name != ""){
          this.checkList = eval(a.email_sender_name)
        }
      }
    },