markdown编辑器的应用

最新推荐文章于 2025-04-29 10:49:27 发布

中年半吊子程序猿

最新推荐文章于 2025-04-29 10:49:27 发布

阅读量211

点赞数

分类专栏： django 第三方插件文本编辑器文章标签： js markdown

本文链接：https://blog.youkuaiyun.com/weixin_43700349/article/details/116431690

版权

django 同时被 3 个专栏收录

16 篇文章

订阅专栏

第三方插件

2 篇文章

订阅专栏

文本编辑器

1 篇文章

订阅专栏

该博客介绍了如何将textarea转换为Markdown编辑器，包括如何处理全屏显示问题和预览页面的Markdown格式显示。主要涉及JavaScript和CSS的应用，以及编辑器的初始化和配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

textarea 输⼊框转换为markdown编辑器

textarea框通过div包裹设置id，后续在md配置中，需要只用此id

<div id='editor'>.... </div>

应⽤用js和css

<link rel="stylesheet" href="css路径">
<script src="js路径"></script>

初始化

function initMDeditor() {
    editormd('editor', {
        placeholder: '请输入内容',
        height: 600,
        path: '{% static 'plugins/editor-md/lib/' %}', // 配置md编辑器依赖的文件路径
        imageUpload: true,  // 让markdown支持本地上传文件,默认不支持
        imageFormats: ['jpg', 'jpeg', 'png', 'gif'],  // 支持上传的图片格式
        imageUploadURL: ..., // 配置文件上传的地址
        toolbarIcons: function () { //自定义配置md自带按钮
        	return ["bold", "hr", "del", "italic", "quote", "|", "image", "preview", "watch", "fullscreen", "||", "save"]
        }, // || 表示靠右侧显示
        toolbarCustomIcons: { // 自定义添加按钮
        	save: "<input type='button' value='保 存' class='btn btn-success btn-sm' οnclick='saveDesc();' />"
        },
        onload: function () { //加载时显示预览窗口
        	this.previewing();
    })
}

如果全屏遇到显示问题，通过z-index设置高层级

editormd-fullscreen{
            z-index: 1001;
        }

预览⻚页⾯面按照markdown格式显示

内容区域使用div，并设置id

<div id="previewMarkdown">
        <textarea>...</textarea>
</div>

引⼊入css 、 js

<link rel="stylesheet" href="{% static 'plugin/editor-
md/css/editormd.preview.min.css' %}">

<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/marked.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/prettify.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/raphael.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/underscore.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/sequence-diagram.min.js'
%}"></script>
<script src="{% static 'plugin/editor-md/lib/flowchart.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/jquery.flowchart.min.js'
%}"></script>

初始化

$(function () {
            initPreivewMarkdown();
        });
function initPreivewMarkdown() {
    editormd.markdownToHTML("previewMarkdown", {
        htmlDecode: "style,script,iframe"
    });
}