markdown编辑器@uiw/react-md-editor深入使用

近期需求在react项目中制作一个markdown编辑器，最终使用了@uiw/react-md-editor，可以去npm官网查看关于该插件具体使用方法再次就不多做介绍。

本文主要想讲述一下深入使用该插件。

在我进行自定义插件时：

const title3: ICommand = {name: 'title3',keyCommand: 'title3',buttonProps: { 'aria-label': 'Insert title3' },icon: (<svg width="12" height="12" viewBox="0 0 520 520"><path fill="currentColor" d="M15.7083333,468 C7.03242448,468 0,462.030833 0,454.666667 L0,421.333333 C0,413.969167 7.03242448,408 15.7083333,408 L361.291667,408 C369.967576,408 377,413.969167 377,421.333333 L377,454.666667 C377,462.030833 369.967576,468 361.291667,468 L15.7083333,468 Z M21.6666667,366 C9.69989583,366 0,359.831861 0,352.222222 L0,317.777778 C0,310.168139 9.69989583,304 21.6666667,304 L498.333333,304 C510.300104,304 520,310.168139 520,317.777778 L520,352.222222 C520,359.831861 510.300104,366 498.333333,366 L21.6666667,366 Z M136.835938,64 L136.835937,126 L107.25,126 L107.25,251 L40.75,251 L40.75,126 L-5.68434189e-14,126 L-5.68434189e-14,64 L136.835938,64 Z M212,64 L212,251 L161.648438,251 L161.648438,64 L212,64 Z M378,64 L378,126 L343.25,126 L343.25,251 L281.75,251 L281.75,126 L238,126 L238,64 L378,64 Z M449.047619,189.550781 L520,189.550781 L520,251 L405,251 L405,64 L449.047619,64 L449.047619,189.550781 Z" /></svg>),execute: (state: TextState, api: TextAreaTextApi) => {let modifyText = `### ${state.selectedText}\n`;if (!state.selectedText) {modifyText = `### `;}api.replaceSelection(modifyText);},
};

这种最基本的自定义插件在execute方法中取数据等都是正常的，但是当我想自定义一个静态文件选择框时使用:

commands.group([], {name: 'update',groupName: 'update',icon: (<svg viewBox="0 0 1024 1024" width="12" height="12"><path fill="currentColor" d="M716.8 921.6a51.2 51.2 0 1 1 0 102.4H307.2a51.2 51.2 0 1 1 0-102.4h409.6zM475.8016 382.1568a51.2 51.2 0 0 1 72.3968 0l144.8448 144.8448a51.2 51.2 0 0 1-72.448 72.3968L563.2 541.952V768a51.2 51.2 0 0 1-45.2096 50.8416L512 819.2a51.2 51.2 0 0 1-51.2-51.2v-226.048l-57.3952 57.4464a51.2 51.2 0 0 1-67.584 4.2496l-4.864-4.2496a51.2 51.2 0 0 1 0-72.3968zM512 0c138.6496 0 253.4912 102.144 277.1456 236.288l10.752 0.3072C924.928 242.688 1024 348.0576 1024 476.5696 1024 608.9728 918.8352 716.8 788.48 716.8a51.2 51.2 0 1 1 0-102.4l8.3968-0.256C866.2016 609.6384 921.6 550.0416 921.6 476.5696c0-76.4416-59.904-137.8816-133.12-137.8816h-97.28v-51.2C691.2 184.9856 610.6624 102.4 512 102.4S332.8 184.9856 332.8 287.488v51.2H235.52c-73.216 0-133.12 61.44-133.12 137.8816C102.4 552.96 162.304 614.4 235.52 614.4l5.9904 0.3584A51.2 51.2 0 0 1 235.52 716.8C105.1648 716.8 0 608.9728 0 476.5696c0-132.1984 104.8064-239.872 234.8544-240.2816C258.5088 102.144 373.3504 0 512 0z" /></svg>),children: ({ close, execute, getState, textApi }) => {return (<uploadImg /> // 该组件为自己封装的静态文件选择框);},execute: (state: TextState, api: TextAreaTextApi)  => {// 此方法内监测不到外部使用useState定义得值得改变 redux等管理工具也不行// 无法获取到最新的值},buttonProps: { 'aria-label': 'Insert title'}}),

这样的方式来定义一个markdown编辑器内部的弹窗组件时发现在execute方法中取不到定义的state值，因为我需要在点击弹窗确定时保存我在该静态文件弹框选中的文件保存下来并写入markdown内，但是当我选择完存到state中这时值改变了在其他地方显示正常，但execute还是原来的值没有发生改变，我也试过通过redux等方式存的值在该方法中去取也只能取到初始定义的值，当发生改变时该方法内取到的值无法改变。

解决方法：使用useRef定义的值，在execute方法中可以正常访问的到。

不建议的方式：使用本地存储。

const dataObj= useRef<any>(null);dataObj.current = val;// val为你要存的数据

markdown编辑器@uiw/react-md-editor深入使用相关推荐

editor.md中markdown编辑器的实现
markdown编辑器我觉得用起来非常的方便,故我就想实现一个简单的markdown编辑器 1.下载editor.md插件 git地址:https://github.com/pandao/edit ...
Markdown编辑器editor.md的使用
目录(?)[-] 一Markdown和editormd简介二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页面中 ...
SpringBoot整合Editor.md实现Markdown编辑器
Editor.md 是一款开源的.可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror.jQuery 和 Marked 构建. 文章目录一.技术选型及分支部署二.集成手册 2 ...
基于JavaWeb的MarkDown编辑器editor.md的使用
1.简介 editor.md是国内开发的开源项目,单纯基于前端JavaScript,可以实现markdown编辑器的所有功能. 主要特性支持通用 Markdown / CommonMark 和 GF ...
Markdown编辑器Editor.md插件的使用
官网: Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)https://pandao.github.io/editor.md/index.html配置项 ...
VUE3集成Markdown编辑器（http://editor.md.ipandao.com/）
目录背景信息 Editor.md是2015年开源的项目,那时还没有VUE3版本,所以网上也较少VUE3集成Editor.md的示例.不过还是有些大牛分享了集成的方法. 集成方法 1.下载和安装edi ...
开源在线的MarkDown编辑器 --【Editor.md】
开源在线的MarkDown编辑器 --[Editor.md] 下载官网地址: https://pandao.github.io/editor.md/index.html Gitee 地址:https ...
在HTML页面中引用Markdown编辑器（Editor.md）
目录 1.下载Ediotor.md 2.引入Ediotor.md 3.确定Ediotor.md在哪里显示最近写博客项目,用到了Markdown编辑器,这里介绍一款国内好用的Markdown编辑器:E ...
python在线编辑器最新_Editor.md 二次开发-markdown在线编辑器
需求分析经常需要在网络论坛发布文章进行宣传良心工作室最新免费服务,但每个论坛的编写格式存在差异,给发布带来了很大的障碍. 最近markdown格式的兴起,给广大发布者带来了福音,一种文档格式大部分网 ...

markdown编辑器@uiw/react-md-editor深入使用

markdown编辑器@uiw/react-md-editor深入使用相关推荐

最新文章

热门文章