漂亮的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写日志封装类实例
Jun 28 Python
tensorflow 加载部分变量的实例讲解
Jul 27 Python
用Python实现数据的透视表的方法
Nov 16 Python
Django的用户模块与权限系统的示例代码
Jul 24 Python
Python八皇后问题解答过程详解
Jul 29 Python
python批量读取文件名并写入txt文件中
Sep 05 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
Sep 28 Python
简单了解Python变量作用域正确使用方法
Jun 12 Python
使用Python项目生成所有依赖包的清单方式
Jul 13 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
Dec 09 Python
Ubuntu16安装Python3.9的实现步骤
Dec 15 Python
python 网络编程要点总结
Jun 18 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
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php查看当前Session的ID实例
2015/03/16 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
极简的Python入门指引
2015/04/01 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python实现超市商品销售管理系统
2019/10/25 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
python re模块和正则表达式
2021/03/24 Python
《走一步再走一步》教学反思
2014/02/15 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL