django中使用markdown编辑器（后端显示[xadmin中]以及前端显示）

使用步骤

• 安装

pip install django-mdeditor

• 配置
  在settings.py配置文件中INSTALLED_APPS中添加mdeditor:

NSTALLED_APPS = [
......
'mdeditor'
]

• 在setting中添加媒体文件的路径配置：

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

在你的项目根目录下新建一个media文件夹

• 在你的项目根的urls.py文件中添加路由：

from django.conf.urls import url, include
from django.conf.urls.static import static
from django.conf import settings
...

urlpatterns = [
    ...
    url(r'mdeditor/', include('mdeditor.urls'))
]

if settings.DEBUG:
    # static files (images, css, javascript, etc.)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

后端显示

• 修改你所要显示（富文本）的字段，例如：

# 文章模型
from mdeditor.fields import MDTextField
...
class Article(models.Model):
	...
    content = MDTextField(verbose_name="内容")    # MDTextField   markdown 字段(将之前的models.TextField() 改成 MDTextField)
	...

• 在adminx.py中注册

import xadmin
from article.models import Article, Tag

xadmin.site.register(Article, ArticleAdmin)

• 运行python manage.py makemigrations 和python manage.py migrate来生成迁移脚本文件和迁移数据库
• 进入xadmin后台，添加文章就可以看到
  [外链图片转存失败(img-ADCbxfgY-1564366757524)(/media/editor/markdownImage_20190622163940239118.jpg)]
• 现在已经完成后端显示了，是不是挺简单的，接下来解决前端显示的问题了

前端显示

• 找到需要的js和css
  在site-packages目录下找到如下js和css

mdeditor/static/mdeditor/js/lib/prettify.min.js
mdeditor/static/mdeditor/js/lib/marked.min.js
mdeditor/static/mdeditor/js/editormd.js
mdeditor/static/mdeditor/css/editormd.preview.css

找到之后放到static目录下并在相应页面引入

• css和js处理

 <link rel="stylesheet" href="{% static 'css/markdownCss/editormd.preview.css' %}">
 <!-- 引入js文件，注意顺序不能乱 -->
 <script src="{% static 'js/markdownJs/prettify.min.js' %}"></script>
 <script src="{% static 'js/markdownJs/marked.min.js' %}"></script>
 <script src="{% static 'js/markdownJs/editormd.js' %}"></script>

• html的处理
  需要注意的是：style里面所有的内容不能少，否则造成样式会扭曲。textarea标签不能少，不然会造成代码的不识别。

<div id="article_content" style="-webkit-box-sizing: border-box;-moz-box-sizing: border-box;">
<textarea style="display: none">
	{{ article_info.content | safe }}
</textarea>

• 后续注意
  这样还不够，原作者这个markdownToHTML的方法并未考虑兼容原有纯HTML的文章。这样会造成我们非MD格式的文章样式上出现扭曲。此时可以打开editormd.js这个文件，搜索editormd.markdownToHTML方法。在var markdownDoc = (settings.markdown === "") ? saveTo.val() : settings.markdown;
  这一行代码后面添加如下代码：

 if(markdownDoc.startsWith('<')||markdownDoc.endsWith('>')) {
 	$("#" + id).html(markdownDoc)
	return
}

前端显示就差不多完成了！

整个markdown的配置借鉴了两个大佬的笔记连接如下
后端适配mdeditor,修复前端显示
漂亮的 Django Markdown 富文本 app 插件