Ich hoffe, dass Sie bei der Verwendung des Markdown-Editors editormd nicht auf Fallstricke stoßen.

In diesem Artikel wird der detaillierte Prozess der Verwendung des Markdown-Editors editormd erläutert, der Ihnen dabei helfen kann, viele Probleme bei der Verwendung zu vermeiden.

Ich habe kürzlich einen Blog mit Markdown entwickelt, der sich für die Dokumentbearbeitung bewährt hat, und habe zunächst einen Framework-Editor gefunden einfach, aber ich habe nicht erwartet, dass es viele kleine Dinge braucht, um diese Funktion hinzuzufügen. Da es keine relativ vollständige Dokumentation gibt, bin ich auf viele Fallstricke gestoßen und hoffe, dass jeder aus der Vergangenheit lernen kann.

1. Einführungsmethode

Sprachen hängen von Ihren Bedürfnissen ab. Importieren Sie sie nicht. Der Editor hat sie gerade erst zitiert. Nachdem ich js und css gelesen hatte, hatte ich nicht erwartet, dass so viele Moduldateien importiert werden müssten.

2. Pfaddateiverzeichnis
Der Editor verwendet swig zum Rendern von Vorlagen, sodass das statische Dateiverzeichnis unter öffentlich
Aber einige der Skriptimporte in den js unseres Editors werden dynamisch generiert, sodass das Verzeichnis nicht gefunden werden kann. Ich habe auch den Quellcode überprüft und festgestellt, dass er in den Parametern festgelegt werden kann (achten Sie beim nächsten Mal darauf!)

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            path : "../../public/plug/editormd/lib/" //修改文件目录引用的路径  mode, codemirror, marked... dependents libs path
        });

3. Hochladen von Inhalten

Zuerst konnte ich nicht finden, wo ich die von uns bearbeiteten Inhalte finden konnte . Ich habe später online nachgesehen. Es gibt ein

$('.editormd-markdown-textarea').val()

. Suchen Sie dieses Element direkt und rufen Sie val() über jq ab 🎜> Einige Freunde wissen vielleicht, dass ich eine Frage habe, warum der Wert, den ich erhalten habe, fast derselbe ist wie der, den ich geschrieben habe? Als nächstes werden wir darüber sprechen, wie der Inhalt angezeigt wird. Wir können das Dokument mit Stil über das Framework analysieren.

4. Bild hochladen

Editor wird mit dem Tool zum Hochladen von Bildern geliefert.

Hier sind die zurückzugebenden Parameter und die erhaltenen Werte zu beachten, wenn das Backend die Anfrage empfängt.

Front-End-Konfiguration

Ich habe die Back-End-Empfangs-

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            //启动本地图片上传功能
            imageUpload: true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/admin/content/img_up", //文件提交请求路径
            path : "../../public/plug/editormd/lib/" //修改文件目录引用的路径  mode, codemirror, marked... dependents libs path
        });

Middleware verwendet, um die Parameter für den Dateiempfangseditormd-image-file festzulegen

multer

Seien Sie vorsichtig, wenn Sie zum Hintergrund zurückkehrenDies ist eine Reihe fester Formate, andernfalls meldet das Frontend einen Fehler. Die URL-Einstellung ist der endgültige hochgeladene Link, sodass dieser angezeigt wird Normalerweise im Front-End. Das Back-End kann es lokal speichern oder Cloud-Speicher wie Niu oder Alibaba Cloud verwenden.

res.json({
    success : 1, 
    message : "上传成功！",
    url: imageSrc
})

5 🎜>Hier ist es relativ einfach

Ende

<p id="test-editormd-view">
            <textarea style="display:none;" name="test-editormd-markdown-doc">{{content.content}}</textarea>               
        </p>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="../../public/plug/editormd/lib/marked.min.js"></script>
<script src="../../public/plug/editormd/lib/prettify.min.js"></script>
<script src="../../public/plug/editormd/lib/raphael.min.js"></script>
<script src="../../public/plug/editormd/lib/underscore.min.js"></script>
<script src="../../public/plug/editormd/lib/sequence-diagram.min.js"></script>
<script src="../../public/plug/editormd/lib/flowchart.min.js"></script>
<script src="../../public/plug/editormd/lib/jquery.flowchart.min.js"></script>
<script src="../../public/plug/editormd/editormd.js"></script>
<script type="text/javascript">
    testEditormdView2 = editormd.markdownToHTML("test-editormd-view", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
</script>

Ich habe kürzlich eine entwickelt Blog mit Express und Markdown ist für die Dokumentenbearbeitung beliebt. Ich habe auch eine Möglichkeit gefunden, Dokumente einzugeben, und ich dachte zuerst, dass es recht einfach wäre, aber ich hatte nicht erwartet, dass es dauert Viele kleine Dinge, um diese Funktion hinzuzufügen. Da es kein relativ vollständiges Dokument gibt, bin ich auf viele Fallstricke gestoßen und hoffe, dass jeder aus der Vergangenheit lernen kann. 1. Einführungsmethode

Sprachen hängen von Ihren Bedürfnissen ab. Importieren Sie sie nicht. Der Editor hat sie gerade erst zitiert. Nachdem ich js und css gelesen hatte, hatte ich nicht erwartet, dass so viele Moduldateien importiert werden müssten.

2. Pfaddateiverzeichnis
Der Editor verwendet swig zum Rendern von Vorlagen, sodass das statische Dateiverzeichnis unter öffentlich

Aber einige der Skriptimporte in den js unseres Editors werden dynamisch generiert, sodass das Verzeichnis nicht gefunden werden kann. Ich habe auch den Quellcode überprüft und festgestellt, dass er in den Parametern festgelegt werden kann (achten Sie beim nächsten Mal darauf!)

3. Hochladen von Inhalten

Zuerst konnte ich nicht finden, wo ich die von uns bearbeiteten Inhalte finden konnte . Ich habe später online nachgesehen. Es gibt ein

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            path : "../../public/plug/editormd/lib/" //修改文件目录引用的路径  mode, codemirror, marked... dependents libs path
        });

. Suchen Sie dieses Element direkt und rufen Sie val() über jq ab 🎜> Einige Freunde wissen vielleicht, dass ich eine Frage habe, warum der Wert, den ich erhalten habe, fast derselbe ist wie der, den ich geschrieben habe? Als nächstes werden wir darüber sprechen, wie der Inhalt angezeigt wird. Wir können das Dokument mit Stil über das Framework analysieren.

$('.editormd-markdown-textarea').val()

4. Bild-Upload

editor自带图片上传工具post提交，
这里要注意的是后端接收请求要返回的参数和获取的值。
前端配置

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            //启动本地图片上传功能
            imageUpload: true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/admin/content/img_up", //文件提交请求路径
            path : "../../public/plug/editormd/lib/" //修改文件目录引用的路径  mode, codemirror, marked... dependents libs path
        });

后端接收我用了multer中间件要设置文件接收的参数editormd-image-file

后台返回也要注意
这是一组固定格式要不然前端会报错url设置的是最终上传完的链接，这样才会在前端正常的显示后端可以保存本地也可以用七牛 或者阿里云这种云存储

res.json({
    success : 1, 
    message : "上传成功！",
    url: imageSrc
})

5、markdown内容展示

到这里就比较简单了

<p id="test-editormd-view">
            <textarea style="display:none;" name="test-editormd-markdown-doc">{{content.content}}</textarea>               
        </p>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="../../public/plug/editormd/lib/marked.min.js"></script>
<script src="../../public/plug/editormd/lib/prettify.min.js"></script>
<script src="../../public/plug/editormd/lib/raphael.min.js"></script>
<script src="../../public/plug/editormd/lib/underscore.min.js"></script>
<script src="../../public/plug/editormd/lib/sequence-diagram.min.js"></script>
<script src="../../public/plug/editormd/lib/flowchart.min.js"></script>
<script src="../../public/plug/editormd/lib/jquery.flowchart.min.js"></script>
<script src="../../public/plug/editormd/editormd.js"></script>
<script type="text/javascript">
    testEditormdView2 = editormd.markdownToHTML("test-editormd-view", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
</script>

相关推荐：

用HTML+CSS做一个实时预览的markdown编辑器

简单实现JavaScript 富文本编辑器的方法

JavaScript实现输入框编辑器语法高亮思路及代码详解

Das obige ist der detaillierte Inhalt vonIch hoffe, dass Sie bei der Verwendung des Markdown-Editors editormd nicht auf Fallstricke stoßen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!