Vue富文本編輯器wangeditor的簡單使用，以及元件的封裝，編輯的回顯

簡單的一個小項目完結，第一次用富文本簡單記錄總結一下~

純個人了解

一、npm安裝wangeditor

 npm install [email protected] --save

我這裡用的是指定版本，也可以不用指定，看個人喜好

二、在需要用到的地方引入

import E from "wangeditor";

三、建立一個用于初始化編輯器的DOM

<el-form-item label="工作職責">
        <div ref="zhizein"></div>
      </el-form-item>

四、在methods裡寫初始化函數

initwangeditor() {
      this.editor = new E(this.$refs.zhizein); // 找到初始化的dom
      // 配置頂部菜單
      this.editor.config.menus = [
        "list", // 清單
        "justify", // 對齊方式
      ];
      // 編輯器編輯區域内容你變化時
      this.editor.config.onchange = (html) => {
        // 賦給data裡的變量儲存下來
        this.form.zhize = html; // html就是輸入的内容(有格式的)
        // console.log(this.form.zhize, "this.form.zhize");
      };
      this.editor.config.zIndex = 1 // 因為有覆寫，設定了編輯的z-index
      // 建立富文本編輯器
      this.editor.create();
    },

五、在頁面加載時初始化

mounted() {
    this.initwangeditor();
  },

這樣就可以有一個簡單的富文本編輯器啦~

效果如圖

Vue富文本編輯器wangeditor的簡單使用，以及元件的封裝，編輯的回顯

當然，在vue中最好是做成元件，上面的小例子僅僅是入門的使用方法，下面，我準備把他封裝一下，争取拿來就能用。話不多說，上代碼~

一、在components檔案夾下建立wangEnduit.vue檔案，内容如下：

可以直接CV，但請注意

将圖檔上傳位址完善，大約在80行。

<template >
  <div class="editor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>

<script>
import E from "wangeditor";

export default {
  name: "editoritem",
  data() {
    return {
      editor: null,
      info_: null,
    };
  },
  model: {
    prop: "value",
    event: "change",
  },
  // 接收父元件的傳值
  props: {
    value: { // 輸入的内容
      type: String,
      default: "",
    },
    isClear: { // 是否清空
      type: Boolean,
      default: false,
    },
    // 編輯時回顯的内容
    contxt: {
      type: String,
      default: "",
    },
  },
  watch: {
    contxt(contxt) {
      // 在這裡監聽，如果說回顯時，把回顯的内容放到編輯區域
      if (contxt !== "") {
        this.editor.txt.html(this.contxt);
      }
    },

    isClear(val) {
      // 觸發清除
      if (val) {
        this.editor.txt.clear();
        this.info_ = null;
      }
    },
    value: function (value) {
      // 當内容發生變化是
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value);
      }
    },
  },

  mounted() {
    this.seteditor();
     // 可能是個無效的判斷，因為要區分編輯（回顯）跟新增
    if (this.contxt == "") {
      // console.log("這是在修改文章");
    } else {
      this.editor.txt.html(this.value);
    }
  },
  methods: {
    seteditor() {
        // 初始化一下
      this.editor = new E(this.$refs.toolbar, this.$refs.editor);
        // 這裡是圖檔上傳部分
        // 首先，把token拿出來
      let token = localStorage.getItem("token");

      this.editor.config.uploadImgShowBase64 = false; // base64格式
      this.editor.config.uploadImgServer = 後端檔案上傳位址; // 圖檔上傳的位址，這個是後端寫好的
      this.editor.config.uploadImgHeaders = {
        token,
        "Access-Control-Allow-Origin": "*",
      }// 請求頭，因為第一次跨域了

      this.editor.config.uploadFileName = "file"; // 後端接受上傳檔案的參數名
      this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 圖檔大小限制為 2M
      this.editor.config.uploadImgMaxLength = 6; // 一次最多上傳 3 張
      this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 逾時

      // 配置富文本的菜單，或者叫功能
      this.editor.config.menus = [
        "head", // 标題
        "bold", // 粗體
        "fontSize", // 字号
        "fontName", // 字型
        "italic", // 斜體
        "underline", // 下劃線
        "strikeThrough", // 删除線
        "foreColor", // 文字顔色
        "backColor", // 背景顔色
        "link", // 插傳入連結接
        "list", // 清單
        "justify", // 對齊方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入圖檔
        "table", // 表格
        "video", // 插入視訊
        "code", // 插入代碼
        "undo", // 撤銷
        "redo", // 重複
        "fullscreen", // 全屏
      ];

      this.editor.config.uploadImgHooks = {
        fail: (xhr, editor, result) => {
          // 插入圖檔失敗回調
        },
        success: (xhr, editor, result) => {
          // 圖檔上傳成功回調
        },
        timeout: (xhr, editor) => {
          // 網絡逾時的回調
        },
        error: (xhr, editor) => {
          // 圖檔上傳錯誤的回調
        },

        customInsert: (insertImg, result, editor) => {
          // console.log(result, "result");
          //result為上傳圖檔成功的時候傳回的資料，這裡我們需要後端傳回的圖檔位址，輸出一下就能拿到
          let url = result.data;
          insertImg(url);//圖檔的函數
        },
      };
      this.editor.config.onchange = (html) => {
        this.info_ = html; // 綁定目前逐漸地值
        this.$emit("change", this.info_); // 将内容同步到父元件中
      };
      // 建立富文本編輯器
      this.editor.create();
    },
  },
};
</script>

<style >
.editor {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
.toolbar {
  border: 1px solid #ccc;
}
.text {
  border: 1px solid #ccc;
  height: 500px;
  /*height: 500px; */
  overflow-y: auto;
}
</style>

元件整好了，接下來就是使用了

一、在要是用的地方引入、注冊、使用

import EditorBar from "@/components/wangEnduit";

components: {
    EditorBar,
  },

data：

data() {
    return {
      detail: "",
      isClear: false,
      news: '',
    }
  };

change方法

change(val) {
      // console.log(val, 'valFu')
      // val就是我們要的了
      this.news = val;
    },

這一步完成後，就會在頁面上看到編輯器的樣式啦~~

Vue富文本編輯器wangeditor的簡單使用，以及元件的封裝，編輯的回顯

那麼怎麼釋出文章呢？

首先，定義一個方法

// 新增文章
    fabu() {
      // console.log(this.news,'news')
      // 根據自己接口實際配置請求參數

      let query = {
        content: this.news,// 文章内容
        // 還有包括類型、标題等等請自己配置
      };
      // console.log(query,'query')

      // 這裡是添加的請求，例如，純手寫可能有錯
      axios({
        url:'',
        method:'post',
        data:query,
        headers:{}
      }).then(res =>{
        // 看看傳回
        console.log(res,'add news res')
      });

    },

然後點選觸發，當然一些驗證沒有做，請自行完善

<el-button type="primary" @click="fabu">新增</el-button>

最後，我們說一說回顯，元件内有回顯的處理，那麼怎麼觸發呢~

我的回顯操作，是在新聞清單頁面，需要幾步就能完成回顯

1、拿到新聞的文章内容

2、傳給子元件

這樣回顯就完成了，回顯後再編輯

3、給元件的@change事件定義方法，這個方法的主要目的就是，子元件内監聽内容變化

4、在剛剛定義的方法裡，将編輯内容重新指派給新聞的文章内容，（第一步）

5、在儲存按鈕上自定一個方法，向後端寫好的接口發送請求，最新的文章内容就是，第三步方法裡的文章内容

首先先看data:

data() {
    return {
      // 要回顯的新聞
      updateone: {},
      // 控制遮罩
      maskindex: 1,
    };
  },

這是我的第一步，在新聞清單裡拿到完整新聞（scope.row）

<el-table-column label="操作" align="center">
      <template #default="scope">
          <el-button
            type="text"
            icon="el-icon-setting"
            @click="showmask(scope.row)"
           >修改</el-button
         >
       </template>
  </el-table-column>

showmask:

showmask(row) {
      // console.log(row, "row");
      this.maskindex = 0;
      this.updateone = row;
    },

這樣就能打開我的遮罩層啦~，這裡是我再次引用了元件，如果直接看到這裡不明白的話，往上看看元件的使用就好了

<!-- 編輯mask -->
    <div class="mask" v-show="maskindex == 0">
      <div class="maskcon">
        <div class="cotent">
          <p style="magrin: 10px 0">内容：</p>
          <div>
            <editor-bar
              v-model="detail"
              :isClear="isClear"
              <--這個注釋會報錯，删掉就行，這裡把文章的内容傳給了子元件-->
              :contxt="updateone.content"
              <--這個注釋會報錯，删掉就行，回顯完後再次編輯-->
              @change="change"
            ></editor-bar>
          </div>
        </div>

再次編輯的chage事件：

change(val) {
      // val:修改後的文章内容
      this.updateone.content = val;
    },

最後發送請求儲存下來就好啦

Vue富文本編輯器wangeditor的簡單使用，以及元件的封裝，編輯的回顯

繼續閱讀

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

Vue $emit 子元件向父元件傳遞參數

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條