在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.mzph.cn/news/670870.shtml

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

相关文章

Oracle数据表ID自增操作

一、Oracle ID自增长功能介绍 Oracle数据库默认不支持像 SQLServer、MySQL中的自增长&#xff08;auto increment&#xff09;功能&#xff0c;即自动为每一行记录的自增长字段生成下一个值。 二、Oracle ID自增长方法 第一种&#xff0c;通过序列&#xff08;sequence&#…

蓝桥杯Web应用开发-CSS 基础语法4(字体属性、链接中的伪类、列表样式)

专栏持续更新中 字体属性 字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示&#xff1a; 属 性可 取 值描 述fontfont-style、font-variant、font-weight、font-size&#xff08;或 line-height&#xff09;、font-family在一个声明中…

《计算机网络简易速速上手小册》第5章:无线网络和移动通信(2024 最新版)

5.1 WLAN的工作原理 - 揭秘无线局域网络的魔法 5.1.1 基础知识 无线局域网络&#xff08;WLAN&#xff09;允许设备通过无线方式连接到一个局部区域网络&#xff0c;主要基于IEEE 802.11标准&#xff0c;俗称Wi-Fi。WLAN的核心是无线路由器&#xff0c;它不仅充当着网络中各设…

【多模态】27、Vary | 通过扩充图像词汇来提升多模态模型在细粒度感知任务(OCR等)上的效果

论文&#xff1a;Vary: Scaling up the Vision Vocabulary for Large Vision-Language Models 代码&#xff1a;https://github.com/Ucas-HaoranWei/Vary 出处&#xff1a;旷视 时间&#xff1a;2023.12 一、背景 当前流行的大型视觉-语言模型 Large Vision-Language Mode…

挑战杯 python+opencv+深度学习实现二维码识别

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; pythonopencv深度学习实现二维码识别 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;3分 该项目较为新颖&…

探索Gin框架:Golang Gin框架请求参数的获取

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站https://www.captainbed.cn/kitie。 前言 我们在专栏的前面几篇文章内讲解了Gin框架的路由配置&#xff0c;服务启动等内容。 专栏地址&…

后台弱口令问题

网站的运营管理不能缺少后台管理系统的支持&#xff0c;若能成功进入后台管理系 统&#xff0c;就意味着在Web渗透测试中成功了一大半。进行非授权登录有很多种方法&#xff0c; 这里主要介绍的是弱口令问题&#xff0c;破解弱口令是进入系统的最常见也是最有效的方 法&#xf…

如何在 Java 中通过 Map.Entry 访问 Map 的元素

我们使用 Map.Entry 来遍历 ConcurrentHashMap 的代码片段如下&#xff1a; for (Map.Entry<String, String> entry : map.entrySet()) { System.out.println("Key: " entry.getKey() ", Value: " entry.getValue()); } 在 Map.java 中&…

RabbitMQ_00000

MQ的相关概念 RabbitMQ官网地址&#xff1a;https://www.rabbitmq.com RabbitMQ API地址&#xff1a;https://rabbitmq.github.io/rabbitmq-java-client/api/current/ 什么是MQ&#xff1f; MQ(message queue)本质是个队列&#xff0c;FIFO先入先出&#xff0c;只不过队列中…

架构篇31:如何应对接口级的故障?

文章目录 降级熔断限流排队小结异地多活方案主要应对系统级的故障,例如,机器宕机、机房故障、网络故障等问题,这些系统级的故障虽然影响很大,但发生概率较小。在实际业务运行过程中,还有另外一种故障影响可能没有系统级那么大,但发生的概率较高,这就是今天我们要讨论的如…

web前后端小坑记录

游戏服务器过年这段时间忙完了&#xff0c;好久没看web了&#xff0c;重温一下。发现竟然没有文章记录这些修BUG的过程&#xff0c;记录一下。 目录 如何处理F5刷新&#xff1f; 如何处理F5刷新&#xff1f; 后端应该发现路由不存在&#xff0c;直接返回打包好的index.html就…

学习使用shell脚本获取进程号并杀死进程

学习使用shell脚本获取进程号并杀死进程 #!/bin/bash process_name"qipa250_process_name" pid$(ps -ef | grep "$process_name" | grep -v grep | awk {print $2}) if [[ -n $pid ]]; thenecho "Killing process $pid"kill -9 $pid elseecho &q…

白话编程--数据结构概述

前言 1>计算机编程最重要的内容之一. 用框架调用几个API,传了几个数据,看到一些效果,以为自己行了.但稍微改变一下需求又得手忙脚乱一阵子.说明对关键概念的理解和运用还不是很深刻.看数据结构,学底层原理,才是提高水平的要义. 2>计算机编程最让人头疼的内容之一 到处是指…

2024美赛数学建模C题完整论文教学(含十几个处理后数据表格及python代码)

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了数学建模美赛本次C题目Momentum in Tennis完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 C论文共49页&…

第6节、T型加减速转动【51单片机+L298N步进电机系列教程】

↑↑↑点击上方【目录】&#xff0c;查看本系列全部文章 摘要&#xff1a;本章介绍步进电机T型加减速的控制方法&#xff0c;分三个小节&#xff0c;本小节主要内容为该控制方法的推导与计算。目前各平台对该控制方法介绍的文章目前较多&#xff0c;但部分关键参数并未给出推导…

Linux【docker 设置阿里源】

文章目录 一、查看本地docker的镜像配置二、配置阿里镜像三、检查配置 一、查看本地docker的镜像配置 docker info一般没有配置过是不会出现Registry字段的 二、配置阿里镜像 直接执行下面代码即可&#xff0c;安装1.10.0以上版本的Docker客户端都会有/etc/docker 1.建立配置…

Android编程权威指南(第四版)-第 3 章 activity的生命周期

文章目录 代码:MainActivityQuestionactivity_main.xmlactivity_main.xml(land)string.xml代码: 大体是一样的,修改了一些 MainActivity package com.example.geoquizimport androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.util.Log…

在openSUSE-Leap-15.5-DVD-x86_64中使用deepin-wine-8.16再使用微信3.9.7.29

在openSUSE-Leap-15.5-DVD-x86_64中使用deepin-wine-8.16再使用微信3.9.7.29 《在openSUSE-Leap-15.5-DVD-x86_64中使用deepin-wine-6.0.0.62再使用微信3.9.5》 https://blog.csdn.net/weixin_42145772/article/details/135074804?spm1001.2014.3001.5501 按照上面文章的方法…

前端框架和组件库的区别与联系

前端框架和组件库是前端开发中常用的两个概念&#xff0c;它们有一些区别和联系。 前端框架是一种开发工具&#xff0c;它提供了一整套解决方案和规范&#xff0c;用于帮助开发者构建复杂的前端应用。框架通常包括了一系列的工具、库和规范&#xff0c;用于处理路由、状态管理…

计算机设计大赛 深度学习 python opencv 实现人脸年龄性别识别

文章目录 0 前言1 项目课题介绍2 关键技术2.1 卷积神经网络2.2 卷积层2.3 池化层2.4 激活函数&#xff1a;2.5 全连接层 3 使用tensorflow中keras模块实现卷积神经网络4 Keras介绍4.1 Keras深度学习模型4.2 Keras中重要的预定义对象4.3 Keras的网络层构造 5 数据集处理训练5.1 …