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中获取未知对象属性的代码
Apr 27 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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保存Base64图片base64_decode的问题整理
2019/11/04 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
python xml解析实例详解
2016/11/14 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
如何在python中执行另一个py文件
2020/04/30 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
文艺演出策划方案
2014/06/07 职场文书
安全横幅标语
2014/06/09 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
护士实习自荐信
2015/03/06 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
使用python创建股票的时间序列可视化分析
2022/03/03 Python