久久久久熟,欧洲福利视频网站

官方首頁：https://www.wangeditor.com/

官方文檔：https://www.wangeditor.com/doc/

基本使用

使用方式

下載

可以使用npm安裝也可以使用CDN進行連接

npm 安裝 npm i wangeditor --save

CDN 鏈接 https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js

使用CDN js 外鏈引入

<div id="div1">
    <p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
</div>

<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    // 或者 const editor = new E( document.getElementById('div1') )
    editor.create()
</script>

使用npm安裝

在需要使用wangeditor的組建中進行引入

import E from "wangeditor";

然后再created函數(shù)中進行創(chuàng)建

//創(chuàng)建 
const editor = new E(this.$refs.editor);
//或者通過dom節(jié)點創(chuàng)建
//const editor = new E(document.getElementById('richText');


//初始化
editor.create()

html結(jié)構(gòu)是

<template>
  <div>
    <div id="richText" ref="editor"></div>
  </div>
</template>

設(shè)置高度、z-index、配置placeholder

設(shè)置方式相同

在創(chuàng)建和初始化之前書寫就可以

//創(chuàng)建 
const editor = new E(this.$refs.editor);
//或者通過dom節(jié)點創(chuàng)建
//const editor = new E(document.getElementById('richText');

      // 設(shè)置高度
      editor.config.height = 500;
      // 配置z-index
      editor.config.zIndex = 500;
      // 配置placeholder
      editor.config.placeholder = "自定義 placeholder 提示文字";
      // editor.config.placeholder = '' // 不想使用 placeholder ，賦值為空字符串即可


//初始化
editor.create()

一個頁面多個編輯器

在一個頁面上創(chuàng)建多個編輯器的時候，可以直接在new后面添加多個

const editor1 = new E('#div1', '#div2')
editor1.create()

const editor2 = new E('#div3')
editor2.create()

自動 focus

編輯器初始化時，默認(rèn)會自動 focus 到編輯區(qū)域?？赏ㄟ^如下操作，取消自動 focus 。

如果只有一個富文本編輯可以直接忽略，如果有其他的就需要取消自動focus

const editor = new E('#div1')

// 取消自動 focus
editor.config.focus = false

editor.create()

自定義 alert

編輯器 customAlert 是對全局的alert做了統(tǒng)一處理，默認(rèn)為 window.alert。

如覺得瀏覽器自帶的alert體驗不佳，可自定義 alert，以便于達到與自身項目統(tǒng)一的alert效果。

const editor = new E('#div1')
 // 自定義 alert
      editor.config.customAlert = function (s, t) {
        console.log("s, t", s, t);
        /**
         * s 是指 錯誤提示
         * t 是指 類型
         */
        _this.$message({
          type:t,
          message:s
        })
        
      };

editor.create()

數(shù)據(jù)回顯

在使用wangeditor的時候，有可能會存在再次編輯情況，再次編輯就需要將之前的文本進行回顯，回顯使用一下代碼

const E = window.wangEditor
    const editor = new E('#div1')
    editor.create()
    editor.txt.html(回顯的變量) // 重新設(shè)置編輯器內(nèi)容

配置菜單

基本上按照官方文檔書寫就可以

自定義菜單

editor.config.menus

使用 editor.config.menus 定義顯示哪些菜單和菜單的順序。

想要那些菜單就寫上那些

 const E = window.wangEditor
    const editor = new E('#div1')

    // 配置菜單欄，刪減菜單，調(diào)整順序
    editor.config.menus = [
        'bold',
        'head',
        'link',
        'italic',
        'underline'
    ]

    editor.create()

editor.config.excludeMenus

使用 editor.config.excludeMenus 當(dāng)只需剔除少數(shù)菜單的時候，直接設(shè)置不需要的菜單

不想要那些菜單就寫上那些

 const E = window.wangEditor
    const editor = new E('#div1')

    // 配置菜單欄，設(shè)置不需要的菜單
    editor.config.excludeMenus = [
        'emoticon',
        'video'
    ]

    editor.create()

【注意】不要同時使用 editor.config.menus 和 editor.config.excludeMenus，以免引起沖突和混亂。

所有菜單

默認(rèn)情況下會顯示所有的菜單，配置如下：

// 默認(rèn)情況下，顯示所有菜單
editor.config.menus = [
    'head',
    'bold',
    'fontSize',
    'fontName',
    'italic',
    'underline',
    'strikeThrough',
    'indent',
    'lineHeight',
    'foreColor',
    'backColor',
    'link',
    'list',
    'todo',
    'justify',
    'quote',
    'emoticon',
    'image',
    'video',
    'table',
    'code',
    'splitLine',
    'undo',
    'redo',
]

配置顏色

編輯器的字體顏色和背景色，可以通過 editor.config.colors 自定義配置

字體顏色和背景顏色同時生效

const E = window.wangEditor
const editor = new E('#div1')

// 配置顏色（文字顏色、背景色）
editor.config.colors = [
    '#000000',
    '#eeece0',
    '#1c487f',
    '#4d80bf'
]

editor.create()

配置字體

編輯器的字體，可以通過 editor.config.fontNames 配置。

const E = window.wangEditor
const editor = new E('#div1')

// 配置字體
editor.config.fontNames = [
    //方式一
    // 對象形式 v4.6.16
    {name:"黑體",value:"黑體"},
    {name:"絕絕字體",value:"Times New Roman"}
    
    //方式二
    // 字符串形式
    '黑體',
    '仿宋',
    '楷體',
    '標(biāo)楷體',
    '華文仿宋',
    '華文楷體',
    '宋體',
    '微軟雅黑',
    'Arial',
    'Tahoma',
    'Verdana',
    'Times New Roman',
    'Courier New',
]

editor.create()

配置字號

編輯器的字號，可以通過 editor.config.fontSizes 配置。

const E = window.wangEditor
const editor = new E('#div1')

editor.config.fontSizes = {
    'x-small': { name: '10px', value: '1' },
    'small': { name: '13px', value: '2' },
    'normal': { name: '16px', value: '3' },
    'large': { name: '18px', value: '4' },
    'x-large': { name: '24px', value: '5' },
    'xx-large': { name: '32px', value: '6' },
    'xxx-large': { name: '48px', value: '7' },
}

editor.create()

【特別注意】上述配置中

key 的值（即 x-small small normal 等這些）不可改變，key 不可增加，只能減少。
value: '1 - 7' 也不可改變，也不可增加，只能減少。而且，value 和 key 必須對應(yīng)起來，例如 small 就必須對應(yīng) 2

因此，上述配置中，你只能修改 name 。但修改之后，不會生效，還需要做一些調(diào)整。

以 'large': { name: '18px', value: '4' } 這個舉例。編輯器設(shè)置這個 font-size ，會生成 <font size="4">...</font> 。所以，你還需要增加下面的 css 代，讓 size="4" 對應(yīng)到 font-size: 18px; 。

font[size="4"] {
    font-size: 18px;
}

編輯器頁面需要該 css ，回顯頁面也需要該 css 。

配置行高

編輯器的行高，可以通過 editor.config.lineHeights 配置。

const E = window.wangEditor
const editor = new E('#div1')

// 配置行高
editor.config.lineHeights = ['1', '1.15', '1.6', '2', '2.5', '3']

editor.create()

配置表情圖標(biāo)

通過 editor.config.emotions 可配置表情圖標(biāo)。表情菜單的 panel 中，支持多 tab 。

const SINA_URL_PATH = 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal'

const E = window.wangEditor
const editor = new E('#div1')

editor.config.emotions = [
    {
        title: '新浪', // tab 的標(biāo)題
        type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者圖片形式
        content: [
            { alt: '[壞笑]', src: `${SINA_URL_PATH}/50/pcmoren_huaixiao_org.png` },
            { alt: '[舔屏]', src: `${SINA_URL_PATH}/40/pcmoren_tian_org.png` },
            { alt: '[污]', src: `${SINA_URL_PATH}/3c/pcmoren_wu_org.png` },
        ]
    },
    {
        title: 'emoji',  // tab 的標(biāo)題
        type: 'emoji', // 'emoji' / 'image'
        // emoji 表情，content 是一個數(shù)組即可
        content: '                ??  ??'.split(/\s/),
    }
]

editor.create()

配置全屏功能

配置屬性

編輯器創(chuàng)建之前, 可以使用 editor.config.showFullScreen = true 來展示全屏功能按鈕, 默認(rèn)是true, 就是不加這個屬性默認(rèn)展示全屏功能按鈕

注意：工具欄和編輯器區(qū)域分離的時候不支持全屏功能

<div id="div1">
    <p>歡迎使用 wangEditor 編輯器</p>
</div>

<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')

    // 配置全屏功能按鈕是否展示
    editor.config.showFullScreen = true

    editor.create()
</script>

設(shè)置菜單欄提示

隱藏菜單欄提示

編輯器的菜單欄提示，可以通過 editor.config.showMenuTooltips 配置。

const E = window.wangEditor
const editor = new E('#div1')

// 隱藏菜單欄提示
editor.config.showMenuTooltips = false

editor.create()

設(shè)置菜單欄提示為上標(biāo)還是下標(biāo)

可以通過editor.config.menuTooltipPosition配置顯示上標(biāo)還是下標(biāo)。

const E = window.wangEditor
const editor = new E('#div1')

// 菜單欄提示為上標(biāo)（默認(rèn)配置）
editor.config.menuTooltipPosition = 'up'

// 菜單欄提示為下標(biāo)
// editor.config.menuTooltipPosition = 'down'

// 以上配置二選一

editor.create()

回調(diào)函數(shù)

onchange

配置 onchange 回調(diào)函數(shù)

配置 onchange 函數(shù)之后，用戶操作（鼠標(biāo)點擊、鍵盤打字等）導(dǎo)致的內(nèi)容變化之后，會自動觸發(fā) onchange 函數(shù)執(zhí)行。

如果需要修改 onchange 觸發(fā)的延遲時間（ onchange 會在用戶無任何操作的 xxx 毫秒之后被觸發(fā)），可通過 onchangeTimeout 配置。更多信息請見配置歷史記錄

const E = window.wangEditor;
const editor = new E("#div1");

// 配置 onchange 回調(diào)函數(shù)
editor.config.onchange = function (newHtml) {
  console.log("change 之后最新的 html", newHtml);
};
// 配置觸發(fā) onchange 的時間頻率，默認(rèn)為 200ms
editor.config.onchangeTimeout = 500; // 修改為 500ms

editor.create();

onSelectionChange

配置 onSelectionChange 回調(diào)函數(shù)

v4.7.5+版本支持

配置 onSelectionChange 函數(shù)之后，用戶選區(qū)操作（鼠標(biāo)選中文字，ctrl+a 全選等）會自動觸發(fā)onSelectionChange 函數(shù)執(zhí)行。

其中回調(diào)參數(shù)有 3 個是text,html,selection,分別為當(dāng)前選擇文本,當(dāng)前選中的html,原生selection對象

const E = window.wangEditor;
const editor = new E("#div1");
// 配置 onSelectionChange 回調(diào)函數(shù)
editor.config.onSelectionChange = function (newSelection) {
  console.log("onSelectionChange", newSelection);
  /**
    {
       text:'wangeditor', // 當(dāng)前選擇文本
       html: '<p>wangeditor</p>', // 當(dāng)前選中的html
       selection: selection, // 原生selection對象
    }
   */
};
editor.create();

onfocus 和 onblur

編輯區(qū)域 focus（聚焦）和 blur（失焦）時觸發(fā)的回調(diào)函數(shù)。

在失焦的時候可以通過函數(shù)進行自動保存功能

const E = window.wangEditor
const editor = new E('#div1')

editor.config.onblur = function (newHtml) {
    console.log('onblur', newHtml) // 獲取最新的 html 內(nèi)容
}
editor.config.onfocus = function (newHtml) {
    console.log('onfocus', newHtml) // 獲取最新的 html 內(nèi)容
}

editor.create()

插入網(wǎng)絡(luò)圖片的回調(diào)事件

可以將插入的圖片保存到自己的服務(wù)器，方式原地址的圖片丟失

const E = window.wangEditor
const editor = new E('#div1')

// 插入網(wǎng)絡(luò)圖片的回調(diào)
editor.config.linkImgCallback = function (src,alt,href) {
    console.log('圖片 src ', src)
    console.log('圖片文字說明',alt)
    console.log('跳轉(zhuǎn)鏈接',href)
}

editor.create()

應(yīng)該是先檢查圖片然后在執(zhí)行回調(diào)函數(shù)，執(zhí)行順序也是先檢查在執(zhí)行回調(diào)

插入網(wǎng)絡(luò)視頻的回調(diào)事件

與插入網(wǎng)絡(luò)圖片的回調(diào)事件相同

使用 editor.config.onlineVideoCallback 可以自定義檢查插入網(wǎng)絡(luò)視頻后的回調(diào)。

const E = window.wangEditor
const editor = new E('#div1')

// 自定義檢查插入視頻的回調(diào)
editor.config.onlineVideoCallback = function (video) {
  // 自定義回調(diào)內(nèi)容，內(nèi)容成功插入后會執(zhí)行該函數(shù)
  console.log('插入視頻內(nèi)容', video)
}

editor.create()

內(nèi)容檢查

插入鏈接的校驗

使用 editor.config.linkCheck 可以自定義檢查插入的鏈接。

const E = window.wangEditor
const editor = new E('#div1')

// 自定義檢查插入的鏈接
editor.config.linkCheck = function(text, link) {
    // 以下情況，請三選一

    // 1. 返回 true ，說明檢查通過
    return true

    // // 2. 返回一個字符串，說明檢查未通過，編輯器會阻止鏈接插入。會 alert 出錯誤信息（即返回的字符串）
    // return '鏈接有 xxx 錯誤'

    // 3. 返回 undefined（即沒有任何返回），說明檢查未通過，編輯器會阻止鏈接插入。
    // 此處，你可以自定義提示錯誤信息，自由發(fā)揮
}

editor.create()

插入網(wǎng)絡(luò)圖片的校驗

使用 editor.config.linkImgCheck 可以自定義檢查插入圖片的鏈接。

const E = window.wangEditor
const editor = new E('#div1')

// 自定義檢查插入圖片的鏈接
// 參數(shù)中的imgSrc、alt、href分別代表圖片地址、圖片文本說明和跳轉(zhuǎn)鏈接
// 后面兩個參數(shù)是可選參數(shù)
editor.config.linkImgCheck = function(imgSrc,alt,href) {
    // 以下情況，請三選一

    // 1. 返回 true ，說明檢查通過
    return true

    // // 2. 返回一個字符串，說明檢查未通過，編輯器會阻止圖片插入。會 alert 出錯誤信息（即返回的字符串）
    // return '圖片 src 有 xxx 錯誤'

    // 3. 返回 undefined（即沒有任何返回），說明檢查未通過，編輯器會阻止圖片插入。
    // 此處，你可以自定義提示錯誤信息，自由發(fā)揮
}

editor.create()

插入網(wǎng)絡(luò)視頻的校驗

使用 editor.config.onlineVideoCheck 可以自定義檢查插入網(wǎng)絡(luò)視頻的內(nèi)容。

const E = window.wangEditor
const editor = new E('#div1')

// 自定義檢查插入視頻的鏈接
editor.config.onlineVideoCheck = function(video) {
    // 編輯器會根據(jù)返回的內(nèi)容做校驗：比如以下幾種情況

    // 1. 返回 true ，說明檢查通過
    return true

    // 2. 返回一個字符串，說明檢查未通過，編輯器會阻止視頻插入。會 alert 出錯誤信息（即返回的字符串）
    // return '插入的視頻 有 xxx 錯誤'

    // 3. 返回 undefined（即沒有任何返回），說明檢查未通過，編輯器會阻止視頻插入。
    // 此處，你可以自定義提示錯誤信息，自由發(fā)揮
}

editor.create()

粘貼過濾

關(guān)閉粘貼樣式的過濾

【注意】本文不適用于 IE11

從其他地方（如網(wǎng)頁、word 等）復(fù)制文本到編輯器中，編輯器會默認(rèn)過濾掉復(fù)制文本的樣式，這樣可以讓編輯器內(nèi)容更加簡潔。因為復(fù)制過來的文本樣式，可能會比較混亂，且不可控。

true表示采用過濾（格式化），false表示不采用過濾（格式化）

可通過設(shè)置 editor.config.pasteFilterStyle = false 來關(guān)閉樣式過濾。

忽略粘貼內(nèi)容中的圖片

上傳粘貼的圖片后面具體說

【注意】本文不適用于 IE11

從其他頁面（如網(wǎng)頁、word 等）復(fù)制過來的內(nèi)容，除了包含文字還可能包含圖片，這些圖片一般都是外域的（可能會有防盜鏈處理，導(dǎo)致圖片不顯示）。

可以通過配置 editor.config.pasteIgnoreImg = true 來忽略粘貼的圖片。如果復(fù)制的內(nèi)容有圖片又有文字，則只粘貼文字，不粘貼圖片。

自定義處理粘貼的文本內(nèi)容

【注意】本文不適用于 IE11

使用者可通過 editor.config.pasteTextHandle 對粘貼的文本內(nèi)容進行自定義的過濾、處理等操作，然后返回處理之后的文本內(nèi)容。編輯器最終會粘貼用戶處理之后并且返回的的內(nèi)容。

可以通過這個函數(shù)檢測是否具有敏感文字

const E = window.wangEditor
const editor = new E('#div1')

// 配置粘貼文本的內(nèi)容處理
editor.config.pasteTextHandle = function (pasteStr) {
    // 對粘貼的文本進行處理，然后返回處理后的結(jié)果
    return pasteStr + '巴拉巴拉'
}

editor.create()

上傳圖片

默認(rèn)情況下不顯示上傳之有連接圖片，連接圖片就是將圖片地址和alt文本輸入即可。

上傳圖片分為base64保存、上傳到自己的服務(wù)器一級其他OSS存儲，其他看官網(wǎng)

base64保存

 // base64 保存圖片
editor.config.uploadImgShowBase64 = true

這樣就直接將圖片的base64保存到代碼中，但是代碼量可能會很長

上傳到自己的服務(wù)器

如果想完全自己實現(xiàn)圖片上傳的過程，如上傳圖片到某個云服務(wù)器，可以使用如下代碼。

editor.config.customUploadImg = function (resultFiles, insertImgFn) {
    // resultFiles 是 input 中選中的文件列表
    // insertImgFn 是獲取圖片 url 后，插入到編輯器的方法

    // 上傳圖片，返回結(jié)果，將圖片插入到編輯器中
    insertImgFn(imgUrl)
}

以上是官方代碼，在函數(shù)體中可以獲取接口進行傳遞，需要注意的是resultFiles是一個數(shù)組

//上傳到服務(wù)器
editor.config.customUploadImg = function (resultFiles, insertImgFn) {
// resultFiles 是 input 中選中的文件列表
// insertImgFn 是獲取圖片 url 后，插入到編輯器的方法
    
    //這是一個全局方法，將圖片轉(zhuǎn)成base64
_this.GlobalMethod.getBase64(resultFiles[0]).then((res) => {
  let params = {
    img: res,//base64文件
    name: "article",//文件夾名稱
    classify: "article",//分類
  };
    //將base64傳遞給后端
  _this.Post(_this._URL.upBase64Img, params).then((res) => {
    if (res.code == "000000") {
      // 上傳圖片，返回結(jié)果，將圖片插入到編輯器中
      // insertImgFn(imgUrl)
        //后端返回全路徑地址
      insertImgFn(res.data);
    } else {
      _this.$message.error(res.message);
    }
  });
});
};

我的方法是將圖片轉(zhuǎn)成base64，將base64傳遞給后端php進行保存

getBase64方法

// 將圖片轉(zhuǎn)成base64
/**
 * @param {圖片參數(shù)} file 
 * @returns  返回的是base64編碼
 */
export const getBase64 = (file) => {
  return new Promise(function (resolve, reject) {
      let reader = new FileReader();
      let imgResult = "";
      reader.readAsDataURL(file);
      reader.onload = function () {
          imgResult = reader.result;
      };
      reader.onerror = function (error) {
          reject(error);
      };
      reader.onloadend = function () {
          resolve(imgResult);
      };
  })
}

后端php接口

<?php
/*
 * @描述: 圖片上傳接口-base64單張上傳
 * @版本: 
 * @Author: lzb
 * @Date: 2021-12-09 17:38:42
 * @LastEditors: lzb
 * @LastEditTime: 2021-12-13 14:29:25
 * @FilePath: \serve\other\uploadImg\upBase64Img.php
 */

    header("Content-type: text/html; charset=utf-8"); 
    header('Access-Control-Allow-Origin:http:*');

 // 引入base64圖片保存函數(shù)
include_once '../methods/base64Img.php';

// 接受前端傳遞的數(shù)據(jù)
$img = $_POST['img'];//base64圖片
$name = $_POST['name'];//圖片名稱
$classify = $_POST['classify'];//存儲類型

// 圖片保存總目錄
  define("WWWROOT",str_ireplace(str_replace("/","\\",$_SERVER['PHP_SELF']),'',__FILE__)."\\");
   $path = WWWROOT  . "imagess/";//服務(wù)器地址，圖片地址

/**
 $img   base64圖片信息
 $path  圖片目錄
 $name  圖片名稱
 $classify  圖片存儲分類
 $imgAddress   是一個數(shù)組，得到圖片本地地址和url地址
 */
// 注意 如果是多張的話就需要調(diào)用多次函數(shù)，
$imgAddress = base64_image_content($img,$path,$name,$classify);
// echo json_encode($im1);
$imgSize = $imgAddress['0'];//本地地址
$imgUrl = $imgAddress['1'];//url地址
// echo $imgSize;
// 判斷是否有值并進行返回
if(file_exists($imgSize)){
  echo json_encode(array(
    "message" => "上傳成功",
    "code" => '000000',
    "data" => $imgUrl
));
}else{
  echo json_encode(array(
    "message" => "上傳失敗",
    "code" => '000001',
));
}

注意點：

在上傳之前需要在上傳位置創(chuàng)建文件夾

上傳到七牛云

由于我的服務(wù)器比較小，經(jīng)常上傳圖片會造成卡頓，因此將圖片上傳到七牛云進行保存

在wangeditor v3版本可以直接上傳到七牛云，但是在v4版本沒法直接上傳，需要通過自己進行實現(xiàn)

在使用七牛云的時候需要將qiniu-js安裝并引入進入

//npm install qiniu-js
import * as qiNiu from "qiniu-js";

// 上傳到七牛云
editor.config.customUploadImg = function (resultFiles, insertImgFn) {
  console.log("resultFiles", resultFiles);
  // resultFiles 是 input 中選中的文件列表
  // insertImgFn 是獲取圖片 url 后，插入到編輯器的方法
  //有可能會上傳多張圖片,上傳多張圖片就需要進行遍歷
  resultFiles.map((item) => {
    // _this.getUploadImg(item, insertImgFn);
    _this.getUploadFile(item, insertImgFn);
  });
};

在這里使用了getUploadFile函數(shù)，在函數(shù)中需要先獲取七牛云的token，然后配置config等信息，上傳完成之后會收到文件名稱，將文件名稱和七牛云綁定的域名連接即可，參考七牛云js SDK編寫

// 上傳圖片/視頻到七牛云
getUploadFile(file, Rendering) {
  // 獲取七牛云的token
  this.Get(this._URL.createdqiniu).then((res) => {
    this.QiniuData.token = res;

      //配置信息
    var config = {
      useCdnDomain: true, //表示是否使用 cdn 加速域名，為布爾值，true 表示使用，默認(rèn)為 false
      region: qiNiu.region.z1, //選擇上傳域名區(qū)域；當(dāng)為 null 或 undefined 時，自動分析上傳域名區(qū)域
      /**qiniu.region.z0: 代表華東區(qū)域
          qiniu.region.z1: 代表華北區(qū)域
          qiniu.region.z2: 代表華南區(qū)域
          qiniu.region.na0: 代表北美區(qū)域
          qiniu.region.as0: 代表東南亞區(qū)域
      */
    };

      //額外的信息
    var putExtra = {
      fname: "",//文件原文件名
    params: {},//object，用來放置自定義變量
    mimeType: null // null || array，用來限定上傳文件類型，指定null時自動判斷文件類型
    };



let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //獲取后綴
      
    // 設(shè)置唯一的文件名
    const key =
      new Date().getTime() +
      Math.random().toString().substr(2, 5) +
      "." +
      suffix;

/**
     * file: Blob 對象，上傳的文件
     * key: 文件資源名
     * token: 上傳驗證信息，前端通過接口請求后端獲得
     * config: object
     * putExtra
     */
      const observable = qiNiu.upload(
      file,
      key,
      this.QiniuData.token,
      putExtra,
      config
    );
// 文件上傳
    var observer = {
    //  正在上傳 接收上傳進度信息
    next(res) {
        // 上傳進度  parseInt(res.total.percent)
          console.log("next-res",res, parseInt(res.total.percent))
        // if(parseInt(res.total.percent)==100){
        //     console.log("success")
        // }
    },
    // 接收上傳錯誤信息
    error(err) {
      this.$message.error('文件上傳失敗')
      console.log(err)
    },

    // 接收上傳完成后的信息
    complete(res) {
        //  console.log("complete-res", res)
          Rendering("http://updatafiles.ybrecord.cn/" + res.key);
    }
  };
  var subscription = observable.subscribe(observer); // 上傳開始

  });
},

上傳視頻

上傳視頻和上傳圖片基本上一樣

只是所用函數(shù)不同

如果想完全自己實現(xiàn)視頻上傳的過程，如上傳視頻到某個云服務(wù)器，可以使用如下代碼。

editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
    // resultFiles 是 input 中選中的文件列表
    // insertVideoFn 是獲取視頻 url 后，插入到編輯器的方法

    // 上傳視頻，返回結(jié)果，將視頻地址插入到編輯器中
    insertVideoFn(videoUrl)
}

PS：配置自定義插入視頻 editor.config.customInsertVideo 也可以在這里起作用。

我的代碼同樣是上傳到七牛云

// 上傳視頻
      editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
      console.log("resultFiles, insertVideoFn", resultFiles, insertVideoFn)
          // resultFiles 是 input 中選中的文件列表
          // insertVideoFn 是獲取視頻 url 后，插入到編輯器的方法
       _this.getUploadFile(resultFiles[0], insertVideoFn);
          // 上傳視頻，返回結(jié)果，將視頻地址插入到編輯器中
          // insertVideoFn(videoUrl)
      }

以上是我所用的wangeditor方法級屬性，其他請看官網(wǎng)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

wangeditor基本使用及上傳圖片/視頻到七牛云

基本使用

使用方式

下載

使用CDN js 外鏈引入

使用npm安裝

設(shè)置高度、z-index、配置placeholder

一個頁面多個編輯器

自動 focus

自定義 alert

數(shù)據(jù)回顯

配置菜單

自定義菜單

editor.config.menus

editor.config.excludeMenus

所有菜單

配置顏色

配置字體

配置字號

配置行高

配置表情圖標(biāo)

配置全屏功能

配置屬性

設(shè)置菜單欄提示

隱藏菜單欄提示

設(shè)置菜單欄提示為上標(biāo)還是下標(biāo)

回調(diào)函數(shù)

onchange

配置 onchange 回調(diào)函數(shù)

onSelectionChange

配置 onSelectionChange 回調(diào)函數(shù)

onfocus 和 onblur

插入網(wǎng)絡(luò)圖片的回調(diào)事件

插入網(wǎng)絡(luò)視頻的回調(diào)事件

內(nèi)容檢查

插入鏈接的校驗

插入網(wǎng)絡(luò)圖片的校驗

插入網(wǎng)絡(luò)視頻的校驗

粘貼過濾

關(guān)閉粘貼樣式的過濾

忽略粘貼內(nèi)容中的圖片

自定義處理粘貼的文本內(nèi)容

上傳圖片

base64保存

上傳到自己的服務(wù)器

上傳到七牛云

上傳視頻

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

設(shè)置高度、z-index、配置placeholder