Markdown组件-editor

editor插件使用指南

官方链接

https://github.com/pandao/editor.md

使用指南

这部分官方不是蛮靠谱，故此在这里留下博客，方便后续使用。

编辑部分

1. 导入css、js 【注意：js需要jQuery支持】

<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">
<script type="text/javascript"  src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/editormd.js' %}"></script>

2. 初始化

<!--这里的id是给Markdown初始化使用的-->
<div id="editor">
    {{ markdown内容 }}
</div>

<script type='text/javascript'>
    // Markdown编辑器的初始化
    function initEditorMd(){
        {#editor是对应编辑页的ID，path是指Markdown文件的依赖其他文件#}
        editormd('editor', {
                placeholder: "请输入内容",
                height: 400,
                emoji: true,
                path: "{% static 'plugin/editor-md/lib/' %}",
    
                // 配置Markdown支持文件上传
                {#imageUpload:true,#}
                {#imageFormats:["jpg",'jpeg','png','gif'],#}
                {#imageUploadURL:url#}
        });
    }
</script>

预览部分

1. 导入css、js 【注意：js需要jQuery支持】

<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.preview.min.css' %}">
<script type="text/javascript"  src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/editormd.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>

2. 初始化

<!--这里的id是给Markdown初始化使用的-->
<!--Markdown设置-->
<div id="previewMarkdown">
    <textarea>{{ markdown内容 }}</textarea>
</div>

<script type='text/javascript'>
    // 处理Markdown预览
    function previewMarkdown(){
        editormd.markdownToHTML('previewMarkdown', {
            {#避免一些攻击#}
            htmlDecode: 'style,script,iframe'
        });
    }
</script>

图片上传部分

配置Markdown支持文件上传,以下三个字段需要的，设置完成之后，在后台接受完数据需要返回一个json数据

必须的三个字段：
    imageUpload:true,
    imageFormats:["jpg",'jpeg','png','gif'],
    imageUploadURL:上传地址url
    
返回数据
context = {
    # 上传成功success为1，url为上传成功后的返回链接，用于图片显示，message用于提示
    "success": 0,
    "message": None,
    "url": None
}