色一情一乱一伦麻豆,午夜福利国产精品视频,国产一区二区高清不卡

在Vue3+ElementPlus前端中增加對@wangeditor的富文本編輯器和上傳文件的處理的封裝，實現系統新聞資訊的管理

在很多業務系統中，有時候需要編輯富文本，就是包括圖文消息排版等處理，圖片有時候需要結合后端實現圖片的上傳處理，在本篇隨筆中，結合@wangeditor的富文本編輯器和上傳文件的處理的封裝，來實現系統新聞資訊的管理，可以實現圖片上傳和圖文排版的常規操作。

1、@wangeditor的富文本編輯器

該富文本編輯器控件的官網地址：https://www.wangeditor.com/，官網提供很詳盡的使用介紹。

對應Vue版本的編輯器控件是：@wangeditor/editor-for-vue

因此我們可以通過pnpm 、npm等安裝管理工具進行組件的安裝。

pnpm install @wangeditor/editor-for-vue --save

其他的處理就和常規的組件使用差不多了。我們來大概介紹下使用的案例。

界面代碼

<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
</template>

腳本控制代碼

<script>
  import Vue from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

  export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
      return {
        editor: null,
        html: '<p>hello</p>',
        toolbarConfig: {},
        editorConfig: { placeholder: '請輸入內容...' },
        mode: 'default', // or 'simple'
      }
    },
    methods: {
      onCreated(editor) {
        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否則會報錯
      },
    },
    mounted() {
      // 模擬 ajax 請求，異步渲染編輯器
      setTimeout(() => {
        this.html = '<p>模擬 Ajax 異步設置內容 HTML</p>'
      }, 1500)
    },
    beforeDestroy() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 組件銷毀時，及時銷毀編輯器
    },
  })
</script>

通過官方案例的指引，我們可以對其工具欄、編輯器配置、菜單、以及相應API進行處理即可。

界面效果如下所示。

2、自定義上傳文件的處理

一般富文本的編輯器，都會提供相應的圖片上傳接口處理，該@wangeditor的富文本編輯器也是提供了很彈性化的文件上傳接口的處理，以便兼容我們各自五花八門的圖片上傳接口處理。

通過官網的配置介紹，我們可以適應自己后端的接口和相關的配置信息。

如我的后端上傳文件的接口為： /api/fileupload/postupload ，后端接口定義如下所示。

        /// <summary>
        /// 多文件上傳處理（自動根據配置文件選擇合適的上傳方式）
        /// </summary>
        /// <returns></returns>
        [RequestSizeLimit(100000000)] //請求正文最大大小100M
        [HttpPost]
        [Route("postupload")]
        public async Task<List<ResponseFileInfo>> PostUpload()
        {
            var httpContext = this.HttpContext;
            var form = await Request.ReadFormAsync();
            string? guid = form["guid"];
            string? folder = form["folder"];
            var files = form.Files;

其中我們接受的參數包括guid（附件的GUID），folder（圖片類別）以及接收Files的集合。返回的集合里面包括有id,文件名稱，文件地址等內容，如下所示。

因此根據我的后端接口上傳處理，傳入相關的參數來處理編輯器控件配置。

// 更多詳細配置看 https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87
editorConfig.MENU_CONF["uploadImage"] = {
  // 服務端上傳地址，根據實際業務改寫
  server: "/api/fileupload/postupload",
  // form-data 的 fieldName，根據實際業務改寫
  fieldName: "file",
  // 選擇文件時的類型限制，根據實際業務改寫
  allowedFileTypes: ["image/png", "image/jpg", "image/jpeg"],

  // 單個文件的最大體積限制，默認為 2M
  maxFileSize: 1 * 1024 * 1024, // 1M

  // 最多可上傳幾個文件，默認為 100
  maxNumberOfFiles: 10,

  // 自定義上傳參數，參數會被添加到 formData 中，一起上傳到服務端。
  meta: {
    folder: props.imageFolder,
    guid: props.imageGuid,
  },
  // 自定義增加 http  headers,如果接口需要令牌頭信息，需要帶上
  headers: {
    Accept: 'text/x-json',
    Authorization: 'Bearer ' + getAccessToken(),
  },

  // 將 meta 拼接到 url 參數中，默認 false
  metaWithUrl: false,

  // 自定義插入圖片
  customInsert(res: any, insertFn: InsertFnType) {
    // console.log("customInsert", res);
    const result = res.result as Array<ResponseFileInfo>;
    if (result.length > 0) {
      const { id, name, url } = result[0];
      // res.data.url是后端返回的圖片地址，根據實際業務改寫
      if (url) {
        setTimeout(() => {

          // insertFn插入圖片進編輯器
          insertFn(url, name, url);
        }, 2000);
      }
    }
  }
};

根據返回的結果，我們調用編輯器的接口實現圖片的插入。

  // 自定義插入圖片
  customInsert(res: any, insertFn: InsertFnType) {
    // console.log("customInsert", res);
    const result = res.result as Array<ResponseFileInfo>;
    if (result.length > 0) {
      const { id, name, url } = result[0];
      // res.data.url是后端返回的圖片地址，根據實際業務改寫
      if (url) {
        setTimeout(() => {

          // insertFn插入圖片進編輯器
          insertFn(url, name, url);
        }, 2000);
      }
    }
  }
};

3、實現框架中的系統新聞資訊的管理

為了方便使用富文本編輯器，不用每次都配置一次相關的參數，我們把集成好上傳圖片的功能整合到自定義編輯器控件里面去，因此就可以實現重用了。

因此定義了該控件的幾個可以傳入來的相關屬性參數如下所示。

const props = defineProps({
  modelValue: {
    type: String,
    required: false
  },
  placeholder: {
    type: String,
    default: '請輸入內容...',
    required: false
  },
  imageFolder: {
    type: String,
    default: '文章圖片',
    required: false
  },
  imageGuid: {
    type: String,
    default: util.guid(),
    required: false
  }
});

并在內容變化的時候，觸發事件通知。

// Emits
const emit = defineEmits<{
  (e: 'update:modelValue', val: any | any[]): void;
}>();

再把前面的編輯器自定義參數處理內容整合進去。

// 更多詳細配置看 https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87
editorConfig.MENU_CONF["uploadImage"] = {
  // 服務端上傳地址，根據實際業務改寫
  server: "/api/fileupload/postupload",
  // form-data 的 fieldName，根據實際業務改寫
  fieldName: "file",
  // 選擇文件時的類型限制，根據實際業務改寫
  allowedFileTypes: ["image/png", "image/jpg", "image/jpeg"],

  // 單個文件的最大體積限制，默認為 2M
  maxFileSize: 1 * 1024 * 1024, // 1M

  // 最多可上傳幾個文件，默認為 100
  maxNumberOfFiles: 10,

  // 自定義上傳參數，參數會被添加到 formData 中，一起上傳到服務端。
  meta: {
    folder: props.imageFolder,
    guid: props.imageGuid,
  },
  // 自定義增加 http  headers,如果接口需要令牌頭信息，需要帶上
  headers: {
    Accept: 'text/x-json',
    Authorization: 'Bearer ' + getAccessToken(),
  },

  // 將 meta 拼接到 url 參數中，默認 false
  metaWithUrl: false,

  // 自定義插入圖片
  customInsert(res: any, insertFn: InsertFnType) {
    // console.log("customInsert", res);
    const result = res.result as Array<ResponseFileInfo>;
    if (result.length > 0) {
      const { id, name, url } = result[0];
      // res.data.url是后端返回的圖片地址，根據實際業務改寫
      if (url) {
        setTimeout(() => {

          // insertFn插入圖片進編輯器
          insertFn(url, name, url);
        }, 2000);
      }
    }
  }
};

由于我們后端的接口不是匿名的，需要令牌，因此需要額外增加對應的Token令牌信息的頭部。

  // 自定義增加 http  headers,如果接口需要令牌頭信息，需要帶上
  headers: {
    Accept: 'text/x-json',
    Authorization: 'Bearer ' + getAccessToken(),
  },

然后監控相關的內容處理即可。

// 組件銷毀時，也及時銷毀編輯器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

//加載的時候，賦值給編輯器
onMounted(() => {
  valueHtml.value = props.modelValue ?? "";
  // console.log(props.modelValue)
});

watch(() => props.modelValue, (val) => {
  valueHtml.value = val
})

watch(() => valueHtml.value, (newVal) => {
  emit("update:modelValue", newVal)
  // 使用 nextTick 確保 DOM 更新完成后再更新編輯器內容
  nextTick(() => {
    if (editorRef.value) {
      editorRef.value.setHtml(newVal);
    }
  });
})

完成編輯器的自定義控件，如下所示。

然后我們在具體的頁面里面，導入自定義控件，就可以在頁面代碼中使用自己的富文本編輯控件了。

 <my-editor v-model="editForm.content" image-folder="文章圖片" />

在我們完成了@wangeditor的富文本編輯器和上傳文件的處理的封裝后，我們可以用它來實現系統新聞資訊的管理。

然后嘗試上傳文件處理

測試上傳文件，完成后端接口對接處理即可。

這樣我們就可以在多端中查看或者處理相關的系統新聞資訊內容了，如以下界面是通過H5對接后端接口，實現新聞資訊內容的管理。

posted on 2025-07-27 20:07 伍華聰閱讀(1788) 評論(3) 收藏舉報

刷新頁面返回頂部

wuhuacong(伍華聰)的專欄

在Vue3+ElementPlus前端中增加對@wangeditor的富文本編輯器和上傳文件的處理的封裝，實現系統新聞資訊的管理

1、@wangeditor的富文本編輯器

2、自定義上傳文件的處理

3、實現框架中的系統新聞資訊的管理

導航

公告