在django中集成markdown文本框

首先需要下载开源组件:http://editor.md.ipandao.com/,可能需要挂梯子。

百度网盘:

链接:https://pan.baidu.com/s/1D9o3P8EQDqSqfhAw10kYkw
提取码:eric

在这里插入图片描述

1.在html代码中生成一个div,id=editor
<div class="form-group"><label for="{{ field.id_for_label }}">{{ field.label }}</label><div id="editor">{{ field }}</div><span class="error_msg">{{ field.errors.0 }}</span>
</div>

这里用的是 modelform, 其中该字段 field 组件是 textarea 格式。

2.引入 css 和 js
<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">
<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
3.写个函数
function initEditorMd() {editormd('editor', {placeholder: '请输入内容',height: 500,path: '{% static 'plugin/editor-md/lib/' %}', 这一行是给出lib目录,不然会显示不出来})
}

这个 editor 就是第一步定义的 id

4.修复全屏展示效果

这个直接在当前页面的css目录里面写上就好。

.editormd-fullscreen {z-index: 1001;
}

ss
.editormd-fullscreen {
z-index: 1001;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/457773.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis -- zset有序集合

聪明在于勤奋&#xff0c;天才在于积累。 目录 zset 有序集合 zset相关命令 zadd zcard zcount zrange zrevrange zrangebyscore zpopmax bzpopmax zpopmin bzpopmin zrank zscore zrem zRemRangeByRank zRemRangeByScore zincrby 集合间操作 zinte…

JAVA适配器模式详解

适配器模式 1 适配器模式介绍 适配器模式(adapter pattern )的原始定义是&#xff1a;将类的接口转换为客户期望的另一个接口&#xff0c;适配器可以让不兼容的两个类一起协同工作。 如果去欧洲国家去旅游的话&#xff0c;他们的插座如下图最左边&#xff0c;是欧洲标准。而我…

ChatGPT 4.0 升级指南, ChatGPT Plus(GPT 4.0) 有何优势?

1.ChatGPT 是什么&#xff1f; ChatGPT 是由 OpenAI 开发的一种基于人工智能的聊天机器人&#xff0c;它基于强大的语言处理模型 GPT&#xff08;Generative Pre-trained Transformer&#xff09;构建。它能够理解人类语言&#xff0c;可以为我们解决实际的问题。 ChatGPT 4.…

Blender教程(基础)-顶点的移动、滑移-16

一、顶点的移动与缩放 ShiftA新建柱体、切换到编辑模式 点模式下&#xff0c;选择一个顶点、选择移动&#xff08;GZ&#xff09;&#xff0c;发现顶点严Z轴移动&#xff0c;如下图所示 GY 按数字键盘7切换视图&#xff0c;选择这个面的所有顶点 按S把面缩放大 Ctrl…

Facebook的数字安全使命:社交平台的责任

在数字化的时代&#xff0c;社交媒体已经成为人们生活不可或缺的一部分&#xff0c;而数字安全问题也随之成为社交平台亟待解决的挑战。作为全球最大的社交媒体平台之一&#xff0c;Facebook不仅肩负着连接世界的使命&#xff0c;更担负着保障用户数字安全的责任。本文将深入研…

三月济南举办2024第八届生物饲料高质量发展论坛

饲料工业发展空间大&#xff0c;产量持续增长&#xff0c;品质与质量也在不断提高&#xff0c;饲料工业是支撑现代畜牧水产养殖业发展的基础产业&#xff0c;是关系到城乡居民动物性食品供应的民生产业。“十四五”时期是我国由全面建设小康社会向基本实现社会主义现代化迈进的…

DevExpress WinForms中文教程 - 如何创建可访问的WinForms应用?(二)

为用户创建易访问的Windows Forms应用程序不仅是最佳实践的体现&#xff0c;还是对包容性和以用户为中心的设计承诺。在应用程序开发生命周期的早期考虑与可访问性相关的需求可以节省长期运行的时间(因为它将决定设计决策和代码实现)。 一个可访问的WinForms应用程序提供了各种…

第4章——深度学习入门(鱼书)

第4章 神经网络的学习 本章的主题是神经网络的学习。这里所说的“学习”是指从训练数据中自动获取最优权重参数的过程。本章中&#xff0c;为了使神经网络能进行学习&#xff0c;将导入损失函数这一指标。而学习的目的就是以该损失函数为基准&#xff0c;找出能使它的值达到最…

SQL--约束

概述 概念&#xff1a;约束是作用于表中字段上的规则&#xff0c;用于限制存储在表中的数据。 目的&#xff1a;保证数据库中数据的正确、有效性和完整性。 分类: 约束演示 上面我们介绍了数据库中常见的约束&#xff0c;以及约束涉及到的关键字&#xff0c;那这些约束我们…

重学Java 13.面向对象.1

在熟悉的事物中循环 ——24.2.7 一、static关键字 1.static关键字的介绍以及基本使用 1.概述&#xff1a;static是一个静态关键字 2.使用&#xff1a; a.修饰一个成员变量&#xff1a; static 数据类型 变量名 b.修饰一个方法&#xff1a; 修饰符 static 返回值类型 方法名&am…

分析网站架构:浏览器插件

一、Wappalyzer 1.1 介绍 Wappalyzer 是一款用于识别网站所使用技术栈的浏览器插件。它能够分析正在浏览的网页&#xff0c;检测出网站所使用的各种技术和框架&#xff0c;如内容管理系统&#xff08;CMS&#xff09;、JavaScript库、Web服务器等。用户只需安装 Wappalyzer 插…

数据结构第九天(堆排序)

目录 前言 概述 源码&#xff1a; 主函数&#xff1a; 运行结果&#xff1a; 其他 前言 哈哈&#xff0c;这个堆排序算法很久之前就已经敲过一遍了&#xff0c;时间一久&#xff0c;思路有点淡忘。今天重新看过一遍之后&#xff0c;又亲自撸代码&#xff0c;幸运的是&am…