项目中使用markdown-editor-django版

最新推荐文章于 2025-07-26 11:00:47 发布

原创

最新推荐文章于 2025-07-26 11:00:47 发布 · 1.1k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#django #python #后端

Markdown编辑器是一种用于编写和格式化文本的工具，支持Markdown语法，能够轻松地将简单的文本转化为格式化的内容。以下是Markdown编辑器的一些关键特点和功能：

简单易用：Markdown使用简单的符号和语法，使得用户可以快速上手。例如，使用#表示标题，*或-表示列表。
实时预览：许多Markdown编辑器提供实时预览功能，允许用户在编写时看到格式化后的效果。
支持多种格式：Markdown支持标题、段落、链接、图片、表格、代码块等多种格式，适合各种文档需求。
跨平台：大多数Markdown编辑器可以在网页、桌面和移动设备上使用，方便用户随时随地编辑内容。
导出功能：许多Markdown编辑器支持将文档导出为HTML、PDF等格式，方便分享和发布。
扩展性：一些Markdown编辑器允许用户自定义或扩展功能，比如添加自定义样式或插件。

常见的Markdown编辑器包括Typora、Obsidian、MarkdownPad、以及许多在线编辑器如StackEdit和Dillinger。

这篇文章我们介绍如何在项目中使用markdown-editor，文章使用的是django-web框架以及腾讯云cos服务。主要是如何在markdown-editor中上传本地图片。

下载插件

Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)
保存到static/plugin/

页面上显示markdown编辑器

定义一个div容器方便查找

<div id='editor'>...</div>

引入css样式和js

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

<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>

初始化markdown编辑器

<script>
// 页面框架加载完成之后自动执行函数
$(function () {
   
   
    initEditorMd();
});
function initEditorMd(){
   
   
	editormd('editor', {
   
     // 第一个参数是div容器的id-->editor 第二个是配置{...}
		//配置
		placeholder:"请输入内容",
		height:500,
		//指定组件地址
		path:"{% static 'plugin/editor-md/lib/' %}"
	})
}
</script>

显示markdown格式的文本

定义div容器方便查找

<div id="previewMarkdown">
	<textarea>文本内容</textarea>
</div>

引入js css

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

<script src="{% static 'plugin/editor-md/editormd.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' %}">