markdown预览格式的调整

image.png

由于我们是使用Markdown编写的，但是展示的时候发现，格式不太对，本文就是对这个问题进行解决的

关注我，主页更多干货

解决预览页面使用Markdown显示

image.png

1.找到目标位置，使用div和textare包裹
2.引入css\js：
3.进行初始化即可
代码：

css:
    <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.preview.min.css' %}">

js:
    <script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/marked.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/prettify.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/raphael.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/underscore.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/jquery.flowchart.min.js' %}"></script>

js配置：

    $(function () {
        initCatalog();
        initPreviewMarkDown();
    });
    function initPreviewMarkDown() {
            editormd.markdownToHTML("previewMarkdown",{
                htmlDecode:"style,script,iframe",//过滤这些内容

            });
    }

修改后

image.png

这些只是简单的使用，更多参数请看官网哦！

总结:目前最基本的使用，我们就可以使用了它的编辑和预览了。下一步我们就还要考虑一下他的图片本地上传的问题！

下面会展示本地上传图片的功能。