博客想用使用Markdown编辑器

最新推荐文章于 2023-08-14 17:35:11 发布

刘小柚子

最新推荐文章于 2023-08-14 17:35:11 发布

阅读量143

点赞数

文章标签： markdown javascript

本文链接：https://blog.csdn.net/weixin_47530931/article/details/109072938

版权

一个简单的博客项目

用到的工具

用到的工具

editormd + Markdown-it 配合 Express + art-template
安装：
npm install editor.md
npm Markdown-it

editormd编辑器的配置

第一步：新建一个 html 页面（这是一句废话）
第二步：引入必要的文件及html内容

	<!-- 导入CSS文件 -->
	<link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/editormd.css" />
   
	 <!-- 在Body中添加如下代码 -->
	<div id="deditor"> <!-- 这里的id很重要的 -->
	    <textarea style="display:none;">这里是editor的内容</textarea>
	</div>

    <!-- 导入JavaScript文件 -->
	<script src="js/jquery.min.js"></script>
	<script src="js/editormd.min.js"></script>
	
	<!-- 导入如下的JavaScript代码 -->
	<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd({
        	id:"deditor",//注意：这里是上面DIV的id
        	width:"90%",
        	height:640,
        	syncScrolling: "single",
        	path:"lib/",
    });});
 </script>

接下来是完整版的：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/editormd.css" />
    <!-- <link rel="stylesheet" href="css/katex.min.css" /> -->
	
</head>
<body>
	<div id="deditor">
	    <textarea style="display:none;">### Hello Editor.md !</textarea>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/editormd.js"></script>
	<!-- <script src="js/katex.min.js"></script> -->
	<script type="text/javascript">
    var testEditor;
    $(function () {
    	//$.get('test.md', function(md){  //如果是放在网站程序中的可以打开注释

        testEditor = editormd({
        	id:"deditor",//注意：这里是上面DIV的id
        	width:"90%",
        	height:640,
        	syncScrolling: "single",
        	path:"lib/",

        	theme : "dark",
            previewTheme : "dark",
            editorTheme : "pastel-on-dark",
            //markdown : md,
            codeFold : true,
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            searchReplace : true,
            //watch : false,                // 关闭实时预览
            htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
            //toolbar  : false,             //关闭工具栏
            //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            emoji : true,
            taskList : true,
            tocm            : true,         // Using [TOCM]
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            

            /**上传图片相关配置如下*/
	        imageUpload : true,
	        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
	        imageUploadURL : "upload/editormdImg/",//注意你后端的上传图片服务地址
	        onload : function() {
                //console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
            }
        //}); 	//如果是放在网站程序中的可以打开注释
    });});
 </script>
</body>
</html>

Markdown-it渲染markdown语法

Markdown-it的实例对象需要绑定到 express 的locals对象上使用，方便再模板引擎中使用Markdown-it中的方法，来渲染Markdown的语法

// 导入 markdown处理模块
const MarkdownIt = require('markdown-it')
const md = new MarkdownIt()
// locals 对象上绑定 markdown-it的实例对象
app.locals.md = md

markdown内容页面部分

<!-- 获取用markdown编辑器发送的内容，通过md.render直接渲染出来 -->
<div>
  <%-md.render(topic.content)%>
</div>

三级目录

刘小柚子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
博客想用使用Markdown编辑器

一个简单的博客项目用到的工具editormd编辑器的配置Markdown-it渲染markdown语法三级目录用到的工具editormd + Markdown-it 配合 Express + art-template安装：npm install editor.mdnpm Markdown-iteditormd编辑器的配置第一步：新建一个 html 页面（这是一句废话）第二步：引入必要的文件及html内容  <link rel="
复制链接

扫一扫