React中使用Vditor自定义图片详解


Posted in Javascript onDecember 25, 2020

安装

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 });
 }
 //创建编辑器 下面会详解
 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>
 }
}

示例:

React中使用Vditor自定义图片详解

功能使用

新建对象

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

对应工具栏展示:

React中使用Vditor自定义图片详解

自定义按钮

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 点击事件

示例:

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} 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字符串),即可将图片地址写入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 配置此方法时可实现图片粘贴并上传

React中使用Vditor自定义图片详解

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

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} src="${path}">`;
    } else {
      succFileText += ` \n![${name}](${path})`;
    }
    //拼接完直接插入到鼠标选中位置
    document.execCommand("insertHTML", false, succFileText);
  }
  that.handleImageUpload(files, callback);
}

React中使用Vditor自定义图片详解

总结

以上是本人在接入vditor编辑器是的一些使用总结,更多相关React Vditor内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript中的var_dump函数实现代码
Sep 07 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 #Vue.js
vue3使用vue-count-to组件的实现
Dec 25 #Vue.js
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 #Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 #Javascript
vant时间控件使用方法详解
Dec 24 #Javascript
基于Vant UI框架实现时间段选择器
Dec 24 #Javascript
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
You might like
PHP内核探索之变量
2015/12/22 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
往来会计岗位职责
2013/12/19 职场文书
本科毕业生自荐信
2014/06/02 职场文书
宣传普通话标语
2014/06/27 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
导游词之安徽九华山
2019/09/18 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
Golang 切片(Slice)实现增删改查
2022/04/22 Golang
Python使用Web框架Flask开发项目
2022/06/01 Python