React中使用Vditor自定義圖片詳解

更新時間：2020年12月25日 10:13:10 作者：淺夏晴空

這篇文章主要介紹了React中使用Vditor自定義圖片詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

安裝

npm install vditor -s

引用

導入依賴包

import Vditor from "vditor";

導入樣式

import "vditor/src/assets/scss/index.scss";

使用示例

export default class Vditor extends Component {
 constructor(props) {
   super(props);
   this.state = {
    editValue: ""
   };
 }
 componentDidMount = () => {
  //組件掛載完成之后調用 注意一定要在組件掛載完成之后調用 否則會找不到注入的DOM
  this.createVidtor({ value: this.state.editValue });
 }
 //創(chuàng)建編輯器 下面會詳解
 createVidtor = params => {
   let { value } = params;
   value = value ? value : " ";
   let that = this;
   const vditor = new Vditor("vditor", {
     height: 800,
     mode: "ir", //及時渲染模式
     placeholder: "React Vditor",
     toolbar: [
       "emoji",
       "headings",
       "bold",
       "italic",
       "strike",
       "link",
       "|",
       "list",
       "ordered-list",
       "check",
       "outdent",
       "indent",
       "|",
       "quote",
       "line",
       "code",
       "inline-code",
       "insert-before",
       "insert-after",
       "|",
       "upload",
       "table",
       "|",
       "undo",
       "redo",
       "|",
       "fullscreen",
       "edit-mode",
       {
         name: "more",
         toolbar: [
           "both",
           "code-theme",
           "content-theme",
           "export",
           "outline",
           "preview",
           "devtools",
           "info",
           "help"
         ]
       },
       "|",
       {
         hotkey: "⌘-S",
         name: "save",
         tipPosition: "s",
         tip: "保存",
         className: "right",
         icon: `<img style="height: 16px" src='https://img.58cdn.com.cn/escstatic/docs/imgUpload/idocs/save.svg'/>`,
         click() {
           that.saveDoc();
         }
       },
       {
         hotkey: "",
         name: "publish",
         tipPosition: "s",
         tip: "發(fā)布文章",
         className: "right",
         icon: `<img style="height: 16px" src='https://img.58cdn.com.cn/escstatic/docs/imgUpload/idocs/publish.svg'/>`,
         click() {
           that.publishDoc();
         }
       }
     ],
     after() {
       vditor.setValue(value);
     },
     blur() {
       that.saveDoc();
     },
     upload: {
       accept: "image/*",
       multiple: false,
       filename(name) {
         return name
           .replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, "")
           .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, "")
           .replace("/\\s/g", "");
       },
       handler(files) {
         function callback(path) {
           let name = files[0] && files[0].name;
           let succFileText = "";
           if (vditor && vditor.vditor.currentMode === "wysiwyg") {
             succFileText += `\n <img alt=${name} src="${path}">`;
           } else {
             succFileText += ` \n![${name}](${path})`;
           }
           document.execCommand("insertHTML", false, succFileText);
         }
         that.handleImageUpload(files, callback);
       },
       url(files) {
         that.handleImageUpload(files);
       }
     }
   });
   this.vditor = vditor;
   return vditor;
 };
 //首先需要在render里面注入DOM，可自定義注入DOM的ID，初始化編輯器的時候使用自定義的ID即可
 render() {
  <div className="editorWrap">
    <div id="vditor" />
  </div>
 }
}

示例：

功能使用

新建對象

const vditor = new Vditor("vditor", ...option);

新建對象時第一個參數(shù)ID，要對應上再render里面注入的ID

option參數(shù)

tip：只列舉一下常用參數(shù)，其他的參數(shù)請參照官方API

參數(shù)	說明
height	配置編輯器高度
mode	編輯器模式 wysiwyg：所見即所得2 ir:及時渲染 sv：分屏模式
placeholder	占位符
toolbar	工具欄

Tip：如果要自定義工具欄的話，一定要加上默認的工具欄，不然只展示自定義的了

默認工具欄

tip：此為源碼里面copy 不用更改可直接使用，官方已定義好了快捷鍵和功能

toolbar: [
      "emoji",
      "headings",
      "bold",
      "italic",
      "strike",
      "link",
      "|",
      "list",
      "ordered-list",
      "check",
      "outdent",
      "indent",
      "|",
      "quote",
      "line",
      "code",
      "inline-code",
      "insert-before",
      "insert-after",
      "|",
      "upload",
      "record",
      "table",
      "|",
      "undo",
      "redo",
      "|",
      "fullscreen",
      "edit-mode",
      {
        name: "more",
        toolbar: [
          "both",
          "code-theme",
          "content-theme",
          "export",
          "outline",
          "preview",
          "devtools",
          "info",
          "help",
        ],
      }]

對應工具欄展示：

自定義按鈕

let that = this;
const vditor = new Vditor("vditor", {
  toolbar: [
    {
      hotkey: "⌘-S",
      name: "save",
      tipPosition: "s",
      tip: "保存",
      className: "right",
      icon: `<img style="height: 16px" src='https://img.58cdn.com.cn/escstatic/docs/imgUpload/idocs/save.svg'/>`,
      click() {
        that.saveDoc();
      }
    },
    {
      hotkey: "",
      name: "publish",
      tipPosition: "s",
      tip: "發(fā)布文章",
      className: "right",
      icon: `<img style="height: 16px" src='https://img.58cdn.com.cn/escstatic/docs/imgUpload/idocs/publish.svg'/>`,
      click() {
        that.publishDoc();
      }
    }
  ]
});
//tip：在調用本類封裝的方法時提前把this賦值給其他方法內的變量，在Vditor內部改變了this指向

參數(shù)	說明
hotkey	熱鍵配置
name	功能區(qū)分（唯一性）
tip	懸浮提示
className	UI展示 right靠右
icon	按鈕圖標
click	點擊事件

示例：

獲取值

saveDoc = () => {
 //在初始化時已經把vditor賦值到this對象上 可直接通過getValue方法獲取當前編輯器的值
  let mdValue = this.vditor && this.vditor.getValue();
 //獲取完值業(yè)務保存就行 這里不再詳細寫本人的保存方法了
 ...
}

賦值

let { value } = params;
value = value ? value : " ";
//如果是空值的話 最好給一個空格 以免編輯器初始化時報錯
const vditor = new Vditor("vditor", {
 // value: value,
 after() {
   vditor.setValue(value);
 }
});
//tip：雖說官方也提供value直接賦值 但是在React里面不生效，就需要在after里面去調用setValue來完成賦值

自定義圖片上傳

const vditor = new Vditor("vditor", {
 upload: {
   accept: "image/*",
   multiple: false,
   filename(name) {
     return name
       .replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, "")
       .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, "")
       .replace("/\\s/g", "");
   },
   handler(files) {
     function callback(path) {
       let name = files[0] && files[0].name;
       let succFileText = "";
       if (vditor && vditor.vditor.currentMode === "wysiwyg") {
         succFileText += `\n <img alt=${name} src="${path}">`;
       } else {
         succFileText += ` \n![${name}](${path})`;
       }
       document.execCommand("insertHTML", false, succFileText);
     }
     that.handleImageUpload(files, callback);
   },
   url(files, callback) {
     that.handleImageUpload(files, callback);
   }
 }
});
//此接口里面調用的是自己的圖片上傳 業(yè)務方自行實現(xiàn)
handleImageUpload = (file, callback) => {
  const reader = new FileReader();
  let formdata = new FormData();
  formdata.append("files", file[0]);
  reader.onload = () => {
    // setTimeout 模擬異步上傳圖片
    // 當異步上傳獲取圖片地址后，執(zhí)行callback回調（參數(shù)為imageUrl字符串），即可將圖片地址寫入markdown
    new Promise(resolve => {
      this.props.dispatch({
        type: "docManager/imageUpload",
        payload: { resolve, username: myInfo.userId, formdata }
      });
    }).then(res => {
      let imgurl = res.result.path;
      callback(imgurl);
    });
  };
  reader.readAsDataURL(file[0]);
};

參數(shù)	說明
accept	接收文件類型（我這邊只做了圖片上傳）
multiple	是否多選
filename	格式化文件名
handler	點擊數(shù)觸發(fā)方法
url	配置此方法時可實現(xiàn)圖片粘貼并上傳

上傳完成后接口返回的CDN地址

上傳完成后處理

handler(files) {
  function callback(path) {
    let name = files[0] && files[0].name;
    let succFileText = "";
    //上傳完成獲取當前編輯器模式 根據不同模式拼接不同的展示標簽
    if (vditor && vditor.vditor.currentMode === "wysiwyg") {
      succFileText += `\n <img alt=${name} src="${path}">`;
    } else {
      succFileText += ` \n![${name}](${path})`;
    }
    //拼接完直接插入到鼠標選中位置
    document.execCommand("insertHTML", false, succFileText);
  }
  that.handleImageUpload(files, callback);
}

總結

以上是本人在接入vditor編輯器是的一些使用總結，更多相關React Vditor內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

React
Vditor

VSCode 配置React Native開發(fā)環(huán)境的方法
本篇文章主要介紹了VSCode 配置React Native開發(fā)環(huán)境的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
react antd表格中渲染一張或多張圖片的實例
這篇文章主要介紹了react antd表格中渲染一張或多張圖片的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
ReactJs快速入門教程(精華版)
React 起源于 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站.這篇文章主要介紹了ReactJs快速入門教程(精華版)的相關資料,需要的朋友可以參考下
2016-11-11
React腳手架搭建的學習
本文主要介紹了React腳手架搭建的學習，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-12-12
React調度系統(tǒng)Scheduler工作原理詳解
這篇文章主要為大家介紹了React調度系統(tǒng)Scheduler工作原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
詳解React中的組件通信問題
本篇文章中主要介紹了詳解React中的組件通信問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
React如何使用create-react-app創(chuàng)建react項目
這篇文章主要介紹了React如何使用create-react-app創(chuàng)建react項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
React+Redux實現(xiàn)簡單的待辦事項列表ToDoList
這篇文章主要為大家詳細介紹了React+Redux實現(xiàn)簡單的待辦事項列表ToDoList，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
React新文檔切記不要濫用Ref
這篇文章主要為大家介紹了React新文檔濫用Ref出現(xiàn)的問題詳解，以及如何正確的使用Ref，有需要的朋友可以借鑒參考下，希望能夠有所幫助
2022-07-07
React 實現(xiàn)拖拽功能的示例代碼
這篇文章主要介紹了React 實現(xiàn)拖拽功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01