markdown的组件库-vditor,@uiw/react-md-editor

 

个人认为vditor是一个很强大的markdown组件，他的编辑器和渲染器基本上都不需要自己写，特别是渲染器，基本上什么都支持。如果对输入能力要求不是很高的话可以推荐使用（vditor有个缺点，工具栏不支持jsx，如果要加工具配置有下拉框什么的不太方便）。由于我目前写的项目对输入功能要求很高，用户使用过程中发现了一些问题，因为vditor的编辑器有自己的语法规则。导致有一些换行删除不了，比如说标题下面会强制有一行换行，或者表格里面不能用<br />标签进行换行。后面我就结合其他的库@uiw/react-md-editor来做编辑器，vditor来做渲染器。结合写了一个markdown组件。以下是部分简单的代码分析。

vditor

具有强大的编辑器和渲染器，可以自己配置cdn。使用起来十分方便

vditor官方：Vditor - 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式 (b3log.org)

import Vditor from 'vditor'
const MarkDown=({initValue})=>{
    const vditor=useRef(null)
    useEffect(()=>{
       
             vditor.current =new Vditor('vditor',{
                 after:()=>{
                     vditor.current?.setValue(initValue)
                 },
                 placeholder:'暂无数据',
                 mode:'sv', // ir即使渲染 sv分屏 wysiwyg 所见即所得
                 preview:{
                     hljs:{
                         enable:true, // 代码高亮
                       
                     },
                     delay:200,//预览 毫秒间隔
                     transfrom:(html:string){ // 预览渲染之前
                     return html
                     
                 },
                     
                     
                 },
                blue:()=>{}, 
                focus:()=>{},
                input:(value)=>{
                    // value  为输入后最新值
                },
                keydown:()=>{},
                toolbarConfig:true, //工具栏
                toolbar:[
                    'headings',
                    'bold',
                    'italic',
                    'strike',
                    'line',
                    '|',
                    'quote',
                    'list',
                    // .....,
                    {
                        // 自定义工具栏
                        hotkey:'',//
                        name:'sponser',
                        tipPosition:'s',
                        className:'color',
                        icon:'<div>icon</div>',// string
                        click:()=>{},
                    }
                    
                ],
             //   cdn:'dhasasdsa', //cdn，不需要的话去掉
                  
                 
             })
        
        return ()=>{
            vditor.current = null
        }
    },[initValue])
    return <div id='vditor'>
        
        </div>
}

  cdn 是直接在git上把项目下载下来，打包到自己的cdn上面的。如果有网络问题，导致加载不出来的可以试试这个方法。

@uiw/react-md-editor

npm官网：@uiw/react-md-editor - npm (npmjs.com)

当时选择这个markdown编辑器，主要是因为上手快，他的输入没有限制，但是渲染要自己搞，这样废时间，可以和Vditor结合一下，自己做个组装。具体我Vditor是用的sv模式，但是把左边的编辑器隐藏了，直接展示右侧的预览模式。因为没有找到配置，自己手动做的渲染，因为预览模式可以显示文字颜色和背景颜色。

import MDEditor ,{commands} from '@uiw/react-md-editor'
const MarkdownEditor=({initValue,onchange})=>{
    const=[
        {
            name:'color',
            keyCommand:'color',
            buttonProps:{'aria-label':'Inser color'},
            icon:<div>icon</div>,
            execute:(state,api)=>{
        let modifyText='### ';
        api.replaceelection(modifyText)
        }
            
        },
      //  .....
    ]
    return <>
        <MDEditor
         value={initValue}
         onchange={(value)=>{
             onchange(value)
         }}
        commands={[
                  ...commands.getCommands(),
                  ...list // 其他自定义的组件 
                  ]}
        />
        </>
}

       (以上代码只是大概提供个思路，为不完整代码。仅提供参考)