vue圖片標注插件，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 = () => {//組件掛載完成之后調用 注意一定要在組件掛載完成之后調用 否則會找不到注入的DOMthis.createVidtor({ value: this.state.editValue });}//創建編輯器 下面會詳解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: "發布文章",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);

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

option參數

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

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: "發布文章",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指向

示例：

獲取值

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

賦值

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);}}
});
//此接口里面調用的是自己的圖片上傳 業務方自行實現
handleImageUpload = (file, callback) => {const reader = new FileReader();let formdata = new FormData();formdata.append("files", file[0]);reader.onload = () => {// setTimeout 模擬異步上傳圖片// 當異步上傳獲取圖片地址后，執行callback回調（參數為imageUrl字符串），即可將圖片地址寫入markdownnew 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]);
};

圖片粘貼時讀取的文件

上傳完成后接口返回的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編輯器是的一些使用總結，如果您還有什么更高級的定制玩法，可留言。