漂亮的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调用cmd命令行制作刷博器
Jan 13 Python
c++生成dll使用python调用dll的方法
Jan 20 Python
Python兔子毒药问题实例分析
Mar 05 Python
在Python中使用lambda高效操作列表的教程
Apr 24 Python
python中的闭包用法实例详解
May 05 Python
TensorFlow神经网络优化策略学习
Mar 09 Python
python调用OpenCV实现人脸识别功能
May 25 Python
在python中获取div的文本内容并和想定结果进行对比详解
Jan 02 Python
python 对类的成员函数开启线程的方法
Jan 22 Python
Python3之不使用第三方变量,实现交换两个变量的值
Jun 26 Python
selenium如何定位span元素的实现
Jan 13 Python
pycharm 如何取消连按两下shift出现的全局搜索
Jan 15 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
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP的几个常用加密函数
2016/02/03 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
vue 组件简介
2020/07/31 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
scrapy爬虫完整实例
2018/01/25 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
python 实现A*算法的示例代码
2018/08/13 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
公司薪酬管理制度
2014/01/31 职场文书
党员违纪检讨书
2014/02/18 职场文书
岗位安全生产责任书
2014/07/28 职场文书
单位介绍信格式
2015/01/31 职场文书
企业安全生产规章制度
2015/08/06 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android