ブログのバックグラウンドはmdeditorに適して、フロントエンドの表示を修復します

2720 ワード
Django
ブログの文章を書く過程で、適当なエディタを探していました.wangEditor,layui-Editorをユーザページに適用することを試みた.しかし、文章の清潔さはmarkdownに匹敵するものではない.mdenctorは良い選択で、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 
]

モデルの変更

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処理









editormd.markdownToHTML("article_content", { //article_content html ID
emoji: true,
taskList: true,
});

####htmlの処理
注意しなければならないのは、styleの中のすべての内容が少なくてはいけません.そうしないと、スタイルが歪んでしまいます.textareaラベルが欠けてはいけません.そうしないと、コードが認識されません.
<div id="article_content"
   style="-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;">
     <textarea style="display:none">{{ article.content | safe}}</textarea>
 </div>

後続の注意


これでは不十分で、原作者というmarkdownToHTMLの方法では、既存の純HTMLの文章と互換性を考慮していない.これにより、MD形式ではない文章スタイルに歪みが発生します.これでeditormdを開くことができます.jsこのファイル、editormdを検索します.markdownToHTMLメソッド.var markdownDoc = (settings.markdown === "") ? saveTo.val() : settings.markdown;コードの次の行に追加
if(markdownDoc.startsWith('')){
            $("#" + id).html(markdownDoc)
            return
        }

このように解決するのは完璧ではありません.この文章がXMLドキュメントであるかどうかを判断したほうがいいです.技術が限られていて解決できません.君に任せて解決する
原文住所:http://www.bianbingdang.com/article_detail/144.html
Adapter
フロントエンドスクール-6日目