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

Question

老师好，

我在学习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 ，麻烦老师帮忙解惑！谢谢！

Answer 1

张轩 2022-03-20 10:25:02

同学你好

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

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

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

亲测好用

• 提问者 RainyNotFound #1

  老师好，我尝试了您所提到的解决方案，虽然不再是undefined，但是所有的markdown格式都失效，只是单纯的输出了一串无格式的string。其实之前我有尝试过previewRender，是不是要我们自定义一个渲染函数呢？

• 张轩 回复 提问者 RainyNotFound #2

  可以使用 marked 将 markdown 转换成 html 即可，它是 easymde 的依赖之一，不用安装，直接拿来用应该就可以 https://github.com/markedjs/marked

• 提问者 RainyNotFound 回复 张轩 #3

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

Answer 2

提问者 RainyNotFound 2022-03-20 11:54:19

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

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

Answer 3

张轩 2022-03-19 10:30:39

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

 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 #1

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