html 生成markdown
Markdown.zip
链接:https://pan.baidu.com/s/1eYGLPb0IbJuL49YiGjScdA
提取码:zjll
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pPXvTmdQ-1598071243428)(C:\Users\13452\AppData\Roaming\Typora\typora-user-images\image-20200822122226910.png)]
项目创建文件夹放置所需文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ad5BpNnY-1598071243429)(C:\Users\13452\Desktop\QQ截图20200822122536.png)]
引入css
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SSW3G0fj-1598071243431)(C:\Users\13452\AppData\Roaming\Typora\typora-user-images\image-20200822122715960.png)]
引入 js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LIvxenkG-1598071243432)(C:\Users\13452\AppData\Roaming\Typora\typora-user-images\image-20200822122930727.png)]
需要注意的是,markdowm需要jq的支持,所以也需要引入jq文件。
4.markdowm其实就是一种文本编辑器,比如我们做个人博客的时候,发布文章一般都有标题、内容
两个框,markdown就是要放在内容框里面展示的。
因为使用的是 semantic-ui 框架 所以不需要引入jq文件了
semantic-ui: https://semantic-ui.com/introduction/advanced-usage.html
在texyarea中增加一个div id设为 md-content,
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xievLhEF-1598071243433)(C:\Users\13452\AppData\Roaming\Typora\typora-user-images\image-20200822123322159.png)]
参考文件包里的 演示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LSOCODXs-1598071243435)(C:\Users\13452\AppData\Roaming\Typora\typora-user-images\image-20200822123513727.png)]
在底部写 js 代码 初始化 markdown
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pzdJf6PU-1598071243436)(C:\Users\13452\AppData\Roaming\Typora\typora-user-images\image-20200822123656546.png)]
<script>
// 初始化markdown在线编辑器
var contentEditor;
$(function() {
contentEditor = editormd("md-content", {
width : "100%",
height : 640,
syncScrolling : "single",
path : "../static/lib/editormd/lib/"
});
/*
// or
testEditor = editormd({
id : "test-editormd",
width : "90%",
height : 640,
path : "../lib/"
});
*/
});
</script>
页面效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-btYAMxO0-1598071243436)(C:\Users\13452\AppData\Roaming\Typora\typora-user-images\image-20200822123910880.png)]