I hope you won't encounter any pitfalls when using the Markdown editor editormd.
- 不言Original
- 2018-05-05 15:10:523445browse
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 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
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
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
});
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()
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
});
I used back-end receptionmulterThe middleware needs to set the parameters for file reception editormd-image-file
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
})
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>
End
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
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
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
});
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()
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自带图片上传工具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
});
后端接收我用了multer中间件要设置文件接收的参数editormd-image-file
后台返回也要注意
这是一组固定格式要不然前端会报错url设置的是最终上传完的链接，这样才会在前端正常的显示后端可以保存本地也可以用七牛 或者阿里云这种云存储
res.json({
success : 1,
message : "上传成功！",
url: imageSrc
})
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>
相关推荐：
The above is the detailed content of I hope you won't encounter any pitfalls when using the Markdown editor editormd.. For more information, please follow other related articles on the PHP Chinese website!