【JS】React中使用Vditor详解(自定义图片上传)

安装

引用

导入依赖包

导入样式

使用示例

export default class Vditor extends Component {

constructor(props) {

super(props);

this.state = {

editValue: ""

};

}

componentDidMount = () => {

//组件挂载完成之后调用 注意一定要在组件挂载完成之后调用 否则会找不到注入的DOM

this.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 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 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}>`;

} 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>

}

}

示例:

【JS】React中使用Vditor详解(自定义图片上传)

功能使用

新建对象

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

新建对象时第一个参数ID,要对应上再render里面注入的ID

option参数

参数说明
height配置编辑器高度
mode编辑器模式
wysiwyg:所见即所得2
ir:及时渲染
sv:分屏模式
placeholder占位符
toolbar工具栏

默认工具栏

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",

],

}]

对应工具栏展示:

【JS】React中使用Vditor详解(自定义图片上传)

自定义按钮

let that = this;

const vditor = new Vditor("vditor", {

toolbar: [

{

hotkey: "⌘-S",

name: "save",

tipPosition: "s",

tip: "保存",

className: "right",

icon: `<img 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 src='https://img.58cdn.com.cn/escstatic/docs/imgUpload/idocs/publish.svg'/>`,

click() {

that.publishDoc();

}

}

]

});

//tip:在调用本类封装的方法时提前把this赋值给其他方法内的变量,在Vditor内部改变了this指向

参数说明
hotkey热键配置
name功能区分(唯一性)
tip悬浮提示
classNameUI展示 right靠右
icon按钮图标
click点击事件

示例:

【JS】React中使用Vditor详解(自定义图片上传)

获取值

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}>`;

} 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字符串),即可将图片地址写入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]);

};

参数说明
accept接收文件类型(我这边只做了图片上传)
multiple是否多选
filename格式化文件名
handler点击数触发方法
url配置此方法时可实现图片粘贴并上传

图片粘贴时读取的文件

【JS】React中使用Vditor详解(自定义图片上传)

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

【JS】React中使用Vditor详解(自定义图片上传)

上传完成后处理

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}>`;

} else {

succFileText += ` \n![${name}](${path})`;

}

//拼接完直接插入到鼠标选中位置

document.execCommand("insertHTML", false, succFileText);

}

that.handleImageUpload(files, callback);

}

【JS】React中使用Vditor详解(自定义图片上传)

总结

以上是本人在接入vditor编辑器是的一些使用总结,如果您还有什么更高级的定制玩法,可留言。

以上是 【JS】React中使用Vditor详解(自定义图片上传) 的全部内容, 来源链接: utcz.com/a/89383.html

回到顶部