当前位置: 首页 > 工具软件 > mdEditor > 使用案例 >

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

时宾实
2023-12-01

在博客文章写作过程中,一直再寻找一个合适的编辑器。先后尝试了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\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/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文档比较稳妥,技术有限不能解决。留给你解决

原文地址:http://www.bianbingdang.com/article_detail/144.html

 类似资料: