博客后台适配mdeditor，修复前端显示

Djangomdeditor

2023-09-20 16:22:15

在博客文章写作过程中，一直再寻找一个合适的编辑器。先后尝试了wangEditor、layui-Editor在用户页面得到应用。但文章的整洁程度难以和markdown媲美。mdendtor是个不错的选择，在安装完Django-enditor之后，最大的难题就是前端显示了。最初引入python库markdown，转化效果不是很理想。紧接着找到前端js对应的showdown.js库，显示效果依旧不好。于是，想到后台的预览窗口是怎么显示，直接把mdeditor的js抄到前端就行了。

后端适配

安装django-mdeditor

pip install django-mdeditor

添加app到sittings

复制代码

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    ......
    'django.contrib.sitemaps',
    'mdeditor', # mdeditor编辑器
]

修改model

复制代码

from mdeditor import fields as md_models

class Article(models.Model):
    id = models.AutoField(primary_key=True, max_length=32)
    ......
    content = md_models.MDTextField(verbose_name='正文', blank=False)
    ......

此时，刷新后端就显示正常了

前端适配

找到需要的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/editor.md-master/css/editormd.preview.css"/>

<!--引入js文件,注意顺序不能乱-->
<script src="/static/editor.md-master/lib/prettify.min.js"></script>
<script src="/static/editor.md-master/lib/marked.min.js"></script>
<script src="/static/editor.md-master/editormd.js"></script>

<!--处理逻辑-->
<script>
editormd.markdownToHTML("article_content", { //article_content是html文档的ID
emoji: true,
taskList: true,
});
</script>

####html的处理

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

复制代码

&lt;div id=&quot;article_content&quot;
   style=&quot;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;&quot;&gt;
     &lt;textarea style=&quot;display:none&quot;&gt;{{ article.content | safe}}&lt;/textarea&gt;
 &lt;/div&gt;

后续注意

这样还不够，原作者这个markdownToHTML的方法并未考虑兼容原有纯HTML的文章。这样会造成我们非MD格式的文章样式上出现扭曲。此时可以打开editormd.js这个文件，搜索editormd.markdownToHTML方法。

在 var markdownDoc = (settings.markdown === "") ? saveTo.val() : settings.markdown;代码的下一行添加

复制代码

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

这样解决下来并不是很完美，最好判断下这个文章是不是一个XML文档比较稳妥，技术有限不能解决。留给你解决