html 生成 mark down

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)]