django引入富文本编辑器Markdown

最新推荐文章于 2024-05-26 20:06:51 发布

huoyuanshen

最新推荐文章于 2024-05-26 20:06:51 发布

阅读量2k

点赞数

分类专栏： django

本文链接：https://blog.csdn.net/huoyuanshen/article/details/83585003

版权

django 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一、引入编辑器：

1，编辑器样式效果截图：

2，引入文件：

https://github.com/qiwsir/DjangoPracticeProject/tree/master/mysite2/static

放入本地static目录下。

3，html代码:

3.1引入样式

{% load staticfiles %}

<head>
    <link rel="stylesheet" href="{% static 'editor/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'editor/css/editormd.css' %}">
</head>

3.2编写内容
<div class="col-md-2 text-right"><span>内容：</span></div>
<div id="editormd" class="col-md-10 text-left">
    <textarea style="display:none;" id="id_body"></textarea>
</div>

3.3加载启动
<script type="text/javascript" src="{% static "editor/editormd.min.js" %}"></script>

<script type="text/javascript">
{#        markdown#}
    $(function(){
        var editor = editormd("editormd",{
            width : "100%",
            height : 640,
            syncScrolling : 'single',
            path : "{% static 'editor/lib/' %}"
        });
    });

</script>

二、引入编辑器仅作为样式展示

<link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}" />
    <div id='editormd-view'>
        <textarea id="append-test" style="display:none;">
{{ article.body }}
            </textarea> 
    </div>

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

<script type="text/javascript">
$(function(){
        editormd.markdownToHTML("editormd-view", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
});
</script>

huoyuanshen

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
django引入富文本编辑器Markdown

一、引入编辑器：1，编辑器样式效果截图：2，引入文件：https://github.com/qiwsir/DjangoPracticeProject/tree/master/mysite2/static放入本地static目录下。3，html代码:3.1引入样式{% load staticfiles %}&lt;head&gt; &lt;link...
复制链接

扫一扫