Markdown编辑器在点击preview时显示undefined

来源：6-5 引入 easyMDE 编辑器

RainyNotFound

2022-03-18

老师好，

我在学习Markdown编辑器引入的时候也发现了preview显示undefined的问题。
关联了其它同学的相关问题，我做了以下尝试：
1.尝试老师所说的controlled方法，问题并没有解决；
2.尝试换成另一个组件easy-markdown-editor，问题同样；
3.比照了dependencies后发现react-scripts的版本不一样（我是5.0.0，老师的是4.0.0）。

以下是我的代码：https://github.com/RainyWithHikari/CloudNoteBook.git ，麻烦老师帮忙解惑！谢谢！

写回答

3回答

张轩

2022-03-20

已采纳

同学你好

用你的代码确定复现这个问题，debug 一个小时，没有头绪，应该是 easymde 的问题，当我想去 easymde 去提issue 的时候，我发现有个选项是

previewRender， 可以自定义 preview 的渲染方式，我就拿来试试看，添加了一个选项，看看是否能渲染。
在选项中多添加一项，定义一下渲染方式
options={{
    previewRender: (str) => { return str}
    ...
}}

然后奇迹出现了。请看截图

//img.mukewang.com/szimg/62369077097b88ca23120360.jpg

亲测好用

RainyNotFound

张轩

老师好，使用 import * as marked from 'marked' ，然后在previewRender中写入：(plainText, preview) => { // Async method setTimeout(() => { preview.innerHTML = marked.parse(plainText); }, 250); return "Loading..."; }, 已成功运行！谢谢老师！！麻烦您啦！

2022-03-20

共3条回复

RainyNotFound

提问者

2022-03-20

根据老师的思路，已成功解决。

import * as marked from 'marked'
<SimpleMDE
//中间内容省略
options={{
 previewRender:(plainText, preview) => { // Async method
                    setTimeout(() => {
                        preview.innerHTML = marked.parse(plainText);
                    }, 250);
           
                    return "Loading...";
                },
 }}
 ></SimpleMDE>

张轩

2022-03-19

同学你好请问是否有代码没有提交运行之后报错

 ERROR in ./src/App.js 32:0-54
[1] Module not found: Error: Can't resolve './utils/helper' in '/Users/liusha/CloudNoteBook/src'
[1]  @ ./src/index.js 7:0-24 11:33-36

看了源代码没有 helper 这个文件

RainyNotFound

老师你好，十分抱歉，确实是漏了helper.js，现已重新提交：https://github.com/RainyWithHikari/CloudNoteBook.git 麻烦老师了，谢谢！

2022-03-19

共1条回复

2024更新 Electron+React+七牛云实战跨平台桌面应用

开发一款自动云同步的 Markdown 文件管理软件

1252 学习 · 463 问题

查看课程

相似问题

markdown编辑器预览的时候是undefined为啥呢？

回答 3