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
参数 | 说明 |
---|---|
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: "发布文章",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指向
参数 | 说明 |
---|---|
hotkey | 热键配置 |
name | 功能区分(唯一性) |
tip | 悬浮提示 |
className | UI展示 right靠右 |
icon | 按钮图标 |
click | 点击事件 |
示例:
获取值
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]);
};
参数 | 说明 |
---|---|
accept | 接收文件类型(我这边只做了图片上传) |
multiple | 是否多选 |
filename | 格式化文件名 |
handler | 点击数触发方法 |
url | 配置此方法时可实现图片粘贴并上传 |
图片粘贴时读取的文件
上传完成后接口返回的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详解(自定义图片)相关推荐
- js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由 通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
- React中的Hooks详解
1.概述 React官方网站原文:Hooks 是一项新功能提案,可让您在不编写类的情况下使用 state(状态) 和其他 React 功能. 我总结了下使用Hooks的理由: 1.解决class中的代 ...
- React中setState方法详解
一.为什么要使用 setState 方法,如何用? 在 React 中,组件分为 有状态组件 和 无状态组件,有状态组件就是能够定义 state 的组件,比如类组件,无状态组件反之,比如函数组件.st ...
- react中的setState详解
1.setState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象( ...
- react中的state详解
state 理解:state是组件对象最重要的属性,值是对象(可以包含多个key-value组合) state中的值可以修改,修改的唯一方法是调用this.setState,每次修改以后,自动调用 t ...
- java 自定义正则表达式_java中正则表达式实例详解
Java中正则表达式运用实例(参看java中正则表达式运用详解): 测试代码 package test; /** * 在String的matches()方法,split()方法中使用正则表达式. * ...
- 【转载】CodeWarrior IDE使用tips之prm链接文件详解(自定义存储器分区以及自定义RAM数据初始化与在RAM中运行函数)...
CodeWarrior IDE使用tips之prm链接文件详解(自定义存储器分区以及自定义RAM数据初始化与在RAM中运行函数) 2017-08-19 胡恩伟 汽车电子expert成长之路 内容提要 ...
- 50.深度解密五十:裂变营销(图片营销)中”图片制作”奥秘详解
网络营销推广技术.技巧深度解密(五十)指南: 1.本文档适合零基础以及互联网营销推广工作者,主要讲解图片营销中的图片制作奥秘的问题. 2.原创版权文档,任何抄袭或者全部.部分模仿都是侵权行为. 3.敬 ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
最新文章
- Jmeter之解决烦人的中文乱码问题
- python操作mongo(2)
- MATLAB Floyd算法
- java for android的书_JavaForAndroid07
- cortex_m0架构(顶层AHB_Lite接口)
- 流行的Spring Boot + Vue架构整合开发的网易云,附源码!
- Linux下编译安装redis,详细教程
- PDF Expert|全能宝藏PDF编辑器
- 15.IGame游戏公司的故事
- 前端技术盘点以及 2016 年技术发展方向
- php-fpm安装,启动,重启
- 注入漏洞-sql注入
- 为你解析--音视频会议系统
- 交互设计师的这些能力你都具备了吗
- 手把手教你使用SSM框架实现一个学生管理系统第二章之创建一个web工程及相关配置文件的介绍
- 广东省工业和信息化厅关于组织开展2022年创新型中小企业评价、专精特新中小企业认定和复核工作的通知
- [计算机通信网络]以太网的帧格式详解
- 《人人都是产品经理》第四章读书笔记及读后感作文2400字
- 34岁!一位程序员在北漂路上的内心真实写照
- 追赶ChatGPT,我们的差距在哪里?
热门文章
- Android开发笔记(十八)书籍翻页动画PageAnimation
- windbg sx命令与简单应用
- RabbitMQ consumer的一些坑
- elasticsearch-analysis-ik-1.10.0中文分词插件安装
- Android的电话拨号器
- 数据是怎么在网上安全传输的
- Fedora 11 Beta 跳票了
- 023、JVM实战总结:一步一图:那JVM老年代垃圾回收器CMS工作时,内部又干了些啥?
- linux mysql库文件路径设置_MySQL_linux修改mysql数据库文件的路径,mysql更改数据文件的存放路径 - phpStudy...
- docker nginx部署web应用_实战docker,编写Dockerfile定制tomcat镜像,实现web应用在线部署...