I hope you won't encounter any pitfalls when using the Markdown editor editormd.-javaTutorial-php.cn

This article will share with you the detailed process of using the Markdown editor editormd, which can help you avoid many problems during use. Friends in need can refer to it

I hope you won't encounter any pitfalls when using the Markdown editor editormd.

I recently developed a blog using express. Markdown has been popular for document editing. I also used this method for document entry and found a framework editor to start with. I thought it was quite simple, but I didn't expect that it took a lot of small things to add this function. Because there is no relatively complete documentation, I stepped on a lot of pitfalls. I write this and hope that everyone can learn from the past.

1. Introduction method

I hope you won't encounter any pitfalls when using the Markdown editor editormd.
languages depends on your needs. If you don’t have them, don’t import them. I just quoted them before. After reading js and css, I didn’t expect that there would be so many module files to import.

2. Path file directory
The editor uses swig for template rendering, so I set the static file directory under public
I hope you won't encounter any pitfalls when using the Markdown editor editormd.
But some of the script imports in our editormd's js are dynamically generated, so the directory cannot be found. I also went to check the source code and found that it can be set in the parameters (pay attention next time!)

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            path : "../../public/plug/editormd/lib/" //修改文件目录引用的路径  mode, codemirror, marked... dependents libs path
        });

Copy after login

3. Content upload

At first, I couldn’t find where to get the content we edited. I searched for a long time and couldn’t find it. I checked online later and found it. There is a

$('.editormd-markdown-textarea').val()

Copy after login

I hope you won't encounter any pitfalls when using the Markdown editor editormd.
in the dynamic dom of the heap. Directly find this element and then get val() through jq
Some friends may have questions about why Is the value I get similar to what I wrote? Next we will talk about how its content is displayed. The database we submit is not with DOM. We can parse the document with style through the framework. The explanation is below

4. Image upload

Editor comes with the image upload tool post submission.
What should be noted here is the parameters to be returned and the values obtained when the backend receives the request.
Front-end configuration

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            //启动本地图片上传功能
            imageUpload: true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/admin/content/img_up", //文件提交请求路径
            path : "../../public/plug/editormd/lib/" //修改文件目录引用的路径  mode, codemirror, marked... dependents libs path
        });

Copy after login

I used back-end receptionmulterThe middleware needs to set the parameters for file reception editormd-image-file

I hope you won't encounter any pitfalls when using the Markdown editor editormd.
Also pay attention to the background return
This is a set of fixed formats, otherwise the front-end will report an error. The url setting is the final uploaded link, so that it will be displayed normally on the front-end and the back-end can save it locally or locally. Use cloud storage like Qiniu or Alibaba Cloud

res.json({
    success : 1, 
    message : "上传成功！",
    url: imageSrc
})

Copy after login

5. Markdown content display

It’s relatively simple from here

<p id="test-editormd-view">
            <textarea style="display:none;" name="test-editormd-markdown-doc">{{content.content}}</textarea>               
        </p>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="../../public/plug/editormd/lib/marked.min.js"></script>
<script src="../../public/plug/editormd/lib/prettify.min.js"></script>
<script src="../../public/plug/editormd/lib/raphael.min.js"></script>
<script src="../../public/plug/editormd/lib/underscore.min.js"></script>
<script src="../../public/plug/editormd/lib/sequence-diagram.min.js"></script>
<script src="../../public/plug/editormd/lib/flowchart.min.js"></script>
<script src="../../public/plug/editormd/lib/jquery.flowchart.min.js"></script>
<script src="../../public/plug/editormd/editormd.js"></script>
<script type="text/javascript">
    testEditormdView2 = editormd.markdownToHTML("test-editormd-view", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
</script>

Copy after login

End

I hope you won't encounter any pitfalls when using the Markdown editor editormd.

I recently developed a blog using express. Markdown has been popular for document editing. I also use this method. I entered the document and found a framework editor. I thought it was quite simple at first, but I didn’t expect that it took a lot of small things to add this function. Because there is no relatively complete document, I stepped on a lot of pitfalls. I hope everyone can learn from the past when writing this.

1. Introduction method

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            path : "../../public/plug/editormd/lib/" //修改文件目录引用的路径  mode, codemirror, marked... dependents libs path
        });

Copy after login

3. Content upload

At first, I couldn’t find where to get the content we edited. I searched for a long time and couldn’t find it. I checked online later and found it. There is a

$('.editormd-markdown-textarea').val()

Copy after login

4. Image upload

editor自带图片上传工具post提交，
这里要注意的是后端接收请求要返回的参数和获取的值。
前端配置

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            //启动本地图片上传功能
            imageUpload: true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/admin/content/img_up", //文件提交请求路径
            path : "../../public/plug/editormd/lib/" //修改文件目录引用的路径  mode, codemirror, marked... dependents libs path
        });

Copy after login

后端接收我用了multer中间件要设置文件接收的参数editormd-image-file

I hope you won't encounter any pitfalls when using the Markdown editor editormd.
后台返回也要注意
这是一组固定格式要不然前端会报错url设置的是最终上传完的链接，这样才会在前端正常的显示后端可以保存本地也可以用七牛或者阿里云这种云存储

res.json({
    success : 1, 
    message : "上传成功！",
    url: imageSrc
})

Copy after login

5、markdown内容展示

到这里就比较简单了

<p id="test-editormd-view">
            <textarea style="display:none;" name="test-editormd-markdown-doc">{{content.content}}</textarea>               
        </p>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="../../public/plug/editormd/lib/marked.min.js"></script>
<script src="../../public/plug/editormd/lib/prettify.min.js"></script>
<script src="../../public/plug/editormd/lib/raphael.min.js"></script>
<script src="../../public/plug/editormd/lib/underscore.min.js"></script>
<script src="../../public/plug/editormd/lib/sequence-diagram.min.js"></script>
<script src="../../public/plug/editormd/lib/flowchart.min.js"></script>
<script src="../../public/plug/editormd/lib/jquery.flowchart.min.js"></script>
<script src="../../public/plug/editormd/editormd.js"></script>
<script type="text/javascript">
    testEditormdView2 = editormd.markdownToHTML("test-editormd-view", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
</script>

Copy after login