J'espère que vous ne rencontrerez aucun piège lors de l'utilisation de l'éditeur Markdown editormd.

Cet article partage avec vous le processus détaillé d'utilisation de l'éditeur Markdown editormd, qui peut vous aider à éviter de nombreux problèmes lors de l'utilisation. Les amis dans le besoin peuvent s'y référer

J'ai récemment développé un blog utilisant Express. Markdown a été populaire pour l'édition de documents. J'ai également utilisé cette méthode pour la saisie de documents et j'ai trouvé un éditeur de framework pour commencer. C'est simple, mais je ne m'attendais pas à ce qu'il faille beaucoup de petites choses pour ajouter cette fonction. Comme il n'y a pas de documentation relativement complète, j'ai rencontré beaucoup de pièges. J'écris ceci et j'espère que tout le monde pourra apprendre du passé.

1. Méthode d'introduction

les langues dépendent de vos besoins. ne les importez pas. L'éditeur vient de les citer avant. Après avoir lu js et css, je ne m'attendais pas à ce qu'il y ait autant de fichiers de module à importer.

2. Chemin du répertoire de fichiers
L'éditeur utilise swig pour le rendu des modèles, donc le répertoire de fichiers statiques est défini sous public

Mais certaines importations de scripts dans les js de notre éditeur sont générées dynamiquement, donc le répertoire est introuvable. Je suis également allé vérifier le code source et j'ai découvert qu'il pouvait être défini dans les paramètres (faites attention la prochaine fois !)

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

3. Téléchargement de contenu

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

dans ce groupe de doms dynamiques, puis récupérez val() via jq <.> Certains amis savent peut-être que j'ai une question : pourquoi la valeur que j'ai obtenue est presque la même que celle que j'ai écrite ? Nous parlerons ensuite de la façon dont son contenu est affiché. La base de données que nous soumettons n'est pas avec DOM Nous pouvons analyser le document avec style via le framework

L'éditeur dispose de son propre outil de téléchargement d'images pour la soumission des publications Ce qu'il convient de noter ici, ce sont les paramètres à renvoyer et les valeurs obtenues lorsque le backend reçoit la demande.

J'ai utilisé la réception back-end

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

Soyez prudent lorsque vous revenez à l'arrière-planIl s'agit d'un ensemble de formats fixes, sinon le front-end signalera une erreur. Le paramètre url est le lien final téléchargé, afin qu'il soit affiché. normalement sur le front-end. Le back-end peut l'enregistrer localement ou l'utiliser dans le stockage Cloud comme Niu ou Alibaba Cloud

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

Fin

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

1. Méthode d'introduction

les langues dépendent de vos besoins. ne les importez pas. L'éditeur vient de les citer avant. Après avoir lu js et css, je ne m'attendais pas à ce qu'il y ait autant de fichiers de module à importer.

2. Chemin du répertoire de fichiers L'éditeur utilise swig pour le rendu des modèles, donc le répertoire de fichiers statiques est défini sous public

Mais certaines importations de scripts dans les js de notre éditeur sont générées dynamiquement, donc le répertoire est introuvable. Je suis également allé vérifier le code source et j'ai découvert qu'il pouvait être défini dans les paramètres (faites attention la prochaine fois !)

3. Téléchargement de contenu
Au début, je ne trouvais pas où trouver le contenu que nous avions édité. J'ai longtemps cherché mais je ne l'ai pas trouvé. . J'ai vérifié en ligne plus tard. Il y a un

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

dans ce groupe de doms dynamiques, puis récupérez val() via jq <.> Certains amis savent peut-être que j'ai une question : pourquoi la valeur que j'ai obtenue est presque la même que celle que j'ai écrite ? Nous parlerons ensuite de la façon dont son contenu est affiché. La base de données que nous soumettons n'est pas avec DOM Nous pouvons analyser le document avec style via le framework

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

4. Téléchargement d'image

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实现输入框编辑器语法高亮思路及代码详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!