漂亮的Django Markdown富文本app插件的实现


Posted in Python onJanuary 02, 2019

django-mdeditor

Github地址:https://github.com/pylixm/django-mdeditor 欢迎试用,star收藏!

Django-mdeditor 是基于Editor.md 的一个 django Markdown 文本编辑插件应用。

Django-mdeditor 的灵感参考自伟大的项目django-ckeditor.

功能

  • 支持 Editor.md 大部分功能
    • 支持标准的Markdown 文本、 CommonMark 和 GFM (GitHub Flavored Markdown) 文本;
    • 支持实时预览、图片上传、格式化代码、搜索替换、皮肤、多语言等。
    • 支持TOC 目录和表情;
    • 支持 TeX, 流程图、时序图等图表扩展。
  • 可自定义 Editor.md 工具栏。
  • 提供了 MDTextField 字段用来支持模型字段使用。
  • 提供了 MDTextFormField 字段用来支持 Form 和 ModelForm.
  • 提供了 MDEditorWidget 字段用来支持 admin 自定义样式使用。

快速入门

安装

pip install django-mdeditor

在 settings 配置文件 INSTALLED_APPS 中添加 mdeditor:

INSTALLED_APPS = [
    ...
    'mdeditor',
  ]

在 settings 中添加媒体文件的路径配置:

MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'

在你项目根目录下创建 uploads/editor 目录,用于存放上传的图片。

在你项目的根 urls.py 中添加扩展url和媒体文件url:

from django.conf.urls import url, include
from django.conf.urls.static import static
from django.conf import settings
...

urlpatterns = [
  ...
  url(r'mdeditor/', include('mdeditor.urls'))
]

if settings.DEBUG:
  # static files (images, css, javascript, etc.)
  urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

编写一个测试 model :

from django.db import models
from mdeditor.fields import MDTextField

class ExampleModel(models.Model):
  name = models.CharField(max_length=10)
  content = MDTextField()

向 admin.py 中注册model:

from django.contrib import admin
from . import models

admin.site.register(models.ExampleModel)

运行 python manage.py makemigrations 和 python manage.py migrate 来创建你的model 数据库表.

登录 django admin后台,点击 '添加'操作,你会看到如下界面。

漂亮的Django Markdown富文本app插件的实现

到此,你已经初步体验了 djang-mdeditor ,接下来详细看下他的其他使用吧。

用法说明

在model 中使用 Markdown 编辑字段

在model 中使用 Markdown 编辑字段,我们只需要将 model 的TextField 替换成MDTextField 即可。

from django.db import models
from mdeditor.fields import MDTextField

class ExampleModel(models.Model):
  name = models.CharField(max_length=10)
  content = MDTextField()

在后台admin中,会自动显示 markdown 的编辑富文本。

在前端 template 中使用时,可以这样用:

{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>
  <body>
    <form method="post" action="./">
      {% csrf_token %}
      {{ form.media }}
      {{ form.as_p }}
      <p><input type="submit" value="post"></p>
    </form>
  </body>
</html>

在 Form 中使用 markdown 编辑字段

在 Form 中使用 markdown 编辑字段,使用 MDTextFormField 代替 forms.CharField, 如下:

from mdeditor.fields import MDTextFormField

class MDEditorForm(forms.Form):
  name = forms.CharField()
  content = MDTextFormField()

ModelForm 可自动将model 对应的字段转为 form字段, 可正常使用:

class MDEditorModleForm(forms.ModelForm):

  class Meta:
    model = ExampleModel
    fields = '__all__'

在 admin 中使用 markdown 小组件

在 admin 中使用 markdown 小组件,如下:

from django.contrib import admin
from django.db import models

# Register your models here.
from . import models as demo_models
from mdeditor.widgets import MDEditorWidget


class ExampleModelAdmin(admin.ModelAdmin):
  formfield_overrides = {
    models.TextField: {'widget': MDEditorWidget}
  }


admin.site.register(demo_models.ExampleModel, ExampleModelAdmin)

自定义工具栏

在 settings 中增加如下配置 :

MDEDITOR_CONFIGS = {
  'width': '90%', # 自定义编辑框宽度
  'heigth': 500,  # 自定义编辑框高度
  'toolbar': ["undo", "redo", "|",
        "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
        "h1", "h2", "h3", "h5", "h6", "|",
        "list-ul", "list-ol", "hr", "|",
        "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime",
        "emoji", "html-entities", "pagebreak", "goto-line", "|",
        "help", "info",
        "||", "preview", "watch", "fullscreen"], # 自定义编辑框工具栏
  'upload_image_formats': ["jpg", "jpeg", "gif", "png", "bmp", "webp"], # 图片上传格式类型
  'image_floder': 'editor', # 图片保存文件夹名称
  'theme': 'default', # 编辑框主题 ,dark / default
  'preview_theme': 'default', # 预览区域主题, dark / default
  'editor_theme': 'default', # edit区域主题,pastel-on-dark / default
  'toolbar_autofixed': True, # 工具栏是否吸顶
  'search_replace': True, # 是否开启查找替换
  'emoji': True, # 是否开启表情功能
  'tex': True, # 是否开启 tex 图表功能
  'flow_chart': True, # 是否开启流程图功能
  'sequence': True # 是否开启序列图功能
}

参考

django-ckeditor

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
跟老齐学Python之眼花缭乱的运算符
Sep 14 Python
python图像处理之反色实现方法
May 30 Python
Python中datetime常用时间处理方法
Jun 15 Python
不可错过的十本Python好书
Jul 06 Python
python Pexpect 实现输密码 scp 拷贝的方法
Jan 03 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
Jun 13 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
Aug 29 Python
Flask框架 CSRF 保护实现方法详解
Oct 30 Python
python单例设计模式实现解析
Jan 07 Python
Ubuntu16.04安装python3.6.5步骤详解
Jan 10 Python
python如何停止递归
Sep 09 Python
python判断元素是否存在的实例方法
Sep 24 Python
对Python发送带header的http请求方法详解
Jan 02 #Python
Django渲染Markdown文章目录的方法示例
Jan 02 #Python
使用python 打开文件并做匹配处理的实例
Jan 02 #Python
对Xpath 获取子标签下所有文本的方法详解
Jan 02 #Python
python之验证码生成(gvcode与captcha)
Jan 02 #Python
Python lxml解析HTML并用xpath获取元素的方法
Jan 02 #Python
用xpath获取指定标签下的所有text的实例
Jan 02 #Python
You might like
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
PHP类的封装与继承详解
2015/09/29 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python将时分秒转换成秒的实例
2019/12/07 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
用 Python 制作地球仪的方法
2020/04/24 Python
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
生态学毕业生自荐信
2013/10/27 职场文书
综治工作汇报材料
2014/10/27 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
大学生受助感言
2015/08/01 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL