漂亮的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 Django模板的使用方法(图文)
Nov 04 Python
Python实现保证只能运行一个脚本实例
Jun 24 Python
Python列表切片用法示例
Apr 19 Python
关于Python中空格字符串处理的技巧总结
Aug 10 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
Nov 29 Python
详解K-means算法在Python中的实现
Dec 05 Python
python实现简易版计算器
Jun 22 Python
python调用摄像头显示图像的实例
Aug 03 Python
Python生成rsa密钥对操作示例
Apr 26 Python
python微信撤回监测代码
Apr 29 Python
python函数局部变量、全局变量、递归知识点总结
Nov 15 Python
python实现七段数码管和倒计时效果
Nov 23 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
SONY ICF-F10中波修复记
2021/03/02 无线电
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP基本语法总结
2014/09/06 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
pygame播放音乐的方法
2015/05/19 Python
Apache如何部署django项目
2017/05/21 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
python中round函数保留两位小数的方法
2020/12/04 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
酒店端午节促销方案
2014/02/18 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
售房协议书范本
2015/08/11 职场文书
二年级作文之动物作文
2019/11/13 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server