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

站长资源 2024/11/5 佚名

80 1538 80

相思资源网 Design By www.200059.com

安装

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 " ";
   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: "",
         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(/[\"")
           .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="/UploadFiles/2021-04-02/${path}">

示例：

功能使用
新建对象


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: "",
      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 " ";
//如果是空值的话 最好给一个空格 以免编辑器初始化时报错
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(/[\"")
       .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="/UploadFiles/2021-04-02/${path}">



  
    
      参数
      说明
    
  
  
    
      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="/UploadFiles/2021-04-02/${path}">


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

                                
                                
                                    React,Vditor使用,React,Vditor自定义图片 
                                
                                    标签：
                                        React,Vditor使用,React,Vditor自定义图片
                                     

                                相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“React中使用Vditor自定义图片详解”

暂无React中使用Vditor自定义图片详解的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

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

安装

引用

功能使用

option参数

默认工具栏

自定义按钮

获取值

赋值

自定义图片上传

总结

React,Vditor使用,React,Vditor自定义图片

vue 使用class创建和清除水印的示例代码

基于vue+echarts数据可视化大屏展示的实现

评论“React中使用Vditor自定义图片详解”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

友情链接