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

淩亂°似流年 2022-12-30 08:27 238阅读 0赞

## 安装 ##

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

示例：

![image-20201224175738268][]

## 功能使用 ##

### 新建对象 ###

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

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

### option参数 ###

> tip：只列举一下常用参数，其他的参数请参照[官方API][API]

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>height</td> 
   <td>配置编辑器高度</td> 
  </tr> 
  <tr> 
   <td>mode</td> 
   <td>编辑器模式<br>wysiwyg：所见即所得2<br>ir:及时渲染<br>sv：分屏模式</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>占位符</td> 
  </tr> 
  <tr> 
   <td>toolbar</td> 
   <td>工具栏</td> 
  </tr> 
 </tbody> 
</table>

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

对应工具栏展示：

![image-20201224173651841][]

### 自定义按钮 ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hotkey</td> 
   <td>热键配置</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>功能区分（唯一性）</td> 
  </tr> 
  <tr> 
   <td>tip</td> 
   <td>悬浮提示</td> 
  </tr> 
  <tr> 
   <td>className</td> 
   <td>UI展示 right靠右</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>按钮图标</td> 
  </tr> 
  <tr> 
   <td>click</td> 
   <td>点击事件</td> 
  </tr> 
 </tbody> 
</table>

示例：

![image-20201224175653047][]

### 获取值 ###

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来完成赋值

### 自定义图片上传 ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>accept</td> 
   <td>接收文件类型（我这边只做了图片上传）</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>是否多选</td> 
  </tr> 
  <tr> 
   <td>filename</td> 
   <td>格式化文件名</td> 
  </tr> 
  <tr> 
   <td>handler</td> 
   <td>点击数触发方法</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>配置此方法时可实现图片粘贴并上传</td> 
  </tr> 
 </tbody> 
</table>

#### 图片粘贴时读取的文件 ####

![image-20201224185044916][]

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

![image-20201224190546200][]

#### 上传完成后处理 ####

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

![image-20201224190854846][]

## 总结 ##

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

[image-20201224175738268]: /images/20221120/0b98f0ffc0874fcc95e2a0e2372b53f1.png
[API]: https://ld246.com/article/1549638745630
[image-20201224173651841]: https://img-blog.csdnimg.cn/img_convert/bef321129b4f90e3792d28bcfe963a7c.png
[image-20201224175653047]: https://img-blog.csdnimg.cn/img_convert/0be5e8106b1913e3e46b03ce257eb32b.png
[image-20201224185044916]: https://img-blog.csdnimg.cn/img_convert/5f2d883208f46db478f33757d9c7d940.png
[image-20201224190546200]: https://img-blog.csdnimg.cn/img_convert/50be5c5968765c2b307d78e6cd48fc63.png
[image-20201224190854846]: https://img-blog.csdnimg.cn/img_convert/7843494a92606ed2f094b99f436c9743.png