当前位置: 首页 > article >正文

在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.kler.cn/news/232736.html

相关文章:

  • Unity类银河恶魔城学习记录5-1.5-2 P62-63 Creating Player Manager and Skill Manager源代码
  • golang 通过 cgo 调用 C++ 库
  • 2024.1.30力扣每日一题——使循环数组所有元素相等的最少秒数
  • 【MySQL进阶之路】SpringBoot 底层如何去和 MySQL 交互了呢?
  • 浏览器提示ERR_SSL_KEY_USAGE_INCOMPATIBLE解决
  • Node.js JSON Schema Ajv依赖库逐步介绍验证类型和中文错误提示
  • elementui上传文件不允许重名
  • Java中 使用Lambda表达式实现模式匹配和类型检查
  • 云服务器也能挂游戏 安卓模拟器
  • 树莓派-Ubuntu22.04
  • 【Unity游戏设计】跳一跳Day1
  • 深度学习预备知识1——数据操作
  • 设置了.gitignore文件,但某些需要被忽略的文件仍然显示
  • Git介绍和常用命令说明
  • 微软.NET6开发的C#特性——委托和事件
  • SpringMVC-组件解析
  • vscode 括号 python函数括号补全
  • 【Flink】FlinkSQL的DataGen连接器(测试利器)
  • arkTS开发鸿蒙OS应用(登录页面实现,连接数据库)
  • 158基于matlab的用于分析弧齿锥齿轮啮合轨迹的程序
  • flink反压及解决思路和实操
  • (十八)springboot实战——spring securtity注解方式的授权流程源码解析
  • 如何连接ChatGPT?无需科学上网,使用官方GPT教程
  • AT_abl_d 题解
  • Java基础常见面试题总结-并发(二)
  • 淘宝镜像到期如何切换镜像及如何安装淘宝镜像
  • Git版本与分支
  • IPMI命令
  • 元宇宙虚拟数字人实训室:推动高校培养创新技术人才
  • 【每日一题】LeetCode——链表的中间结点