一个简单的Django应用程序来编辑降价文本。
fs-django-mdeditor的Python项目详细描述
django mdeditor公司
Django mdeditor是基于Editor.md的django的降价编辑器插件应用程序。在
Django mdeditor的灵感来自伟大的django-ckeditor。在
注意：
- 对于降价页面呈现问题，建议使用后端呈现。由于
Editor.md已经很长时间没有更新，因此需要调试一些bug和兼容性问题。当然，前端学生可以选择。在 - 关于
Jquery冲突，无法删除它，因为它是管理后端所必需的。建议在单个页面或全屏上直接分离编辑页面，使用其自身的静态文件将其与其他页面区分开来。在
特点
- 差不多了编辑.md特征
- 支持标准降价/CommonMark和GFM（GitHub风味降价）
- 全功能：实时预览、图像（跨域）上传、预格式化文本/代码块/表格插入、搜索替换、主题、多语言
- 降价附加功能：支持目录、表情符号
- 支持TeX（LaTeX表达式，基于KaTeX）、流程图和降价扩展语法序列图
- 康斯坦姆编辑.md工具栏
- MDTextField字段是为模型提供的，可以直接在django管理中显示。在
- 为窗体和模型窗体提供了MDTextFormField。在
- MDEditorWidget是为管理自定义小部件提供的。在
快速入门
- 安装。在
pipenv install django-mdeditor
# or
pip install django-mdeditor
- 将
mdeditor添加到已安装的应用程序设置中，如下所示：
- 为django3.0+添加帧设置，如下所示：
X_FRAME_OPTIONS='SAMEORIGIN'
- 将“媒体”url添加到您的设置中，如下所示：
MEDIA_ROOT=os.path.join(BASE_DIR,'uploads')MEDIA_URL='/media/'
在项目中为媒体文件创建文件夹uploads/editor。在
- 将url添加到url中，如下所示：
fromdjango.conf.urlsimporturl,includefromdjango.conf.urls.staticimportstaticfromdjango.confimportsettings...urlpatterns=[...url(r'mdeditor/',include('mdeditor.urls'))]ifsettings.DEBUG:# static files (images, css, javascript, etc.)urlpatterns+=static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
- 这样写你的模型：
fromdjango.dbimportmodelsfrommdeditor.fieldsimportMDTextFieldclassExampleModel(models.Model):name=models.CharField(max_length=10)content=MDTextField()
- 在
{cd5>在模型中注册}
在 - 在
运行
在python manage.py makemigrations和python manage.py migrate创建模型。在 - 在
登录管理员，您可以看到这样的降价编辑器文本字段：
在
使用
使用Markdown
编辑模型中的字段使用Markdown编辑模型中的字段，我们只需将模型的TextField替换为 MDTextField。在
fromdjango.dbimportmodelsfrommdeditor.fieldsimportMDTextFieldclassExampleModel(models.Model):name=models.CharField(max_length=10)content=MDTextField()
管理员在后台，会自动显示降价编辑富文本。在
在前端模板中使用，可以这样使用：
{%loadstaticfiles%}<!DOCTYPEhtml><htmllang="en"><head><metahttp-equiv="Content-Type"content="text / html; charset = utf-8"/></head><body><formmethod="post"action="./">{%csrf_token%}{{form.media}}{{form.as_p}}<p><inputtype="submit"value="post"></p></form></body></html>
使用markdown编辑表单中的字段
使用markdown编辑表单中的字段，使用MDTextFormField而不是{
frommdeditor.fieldsimportMDTextFormFieldclassMDEditorForm(forms.Form):name=forms.CharField()content=MDTextFormField()
ModelForm可以自动将对应的模型字段转换为表单字段，表单字段可以正常使用：
classMDEditorModleForm(forms.ModelForm):classMeta:model=ExampleModelfields='__all__'
使用“管理”中的“降价”小部件
在“管理”中使用“降价”小部件，如下所示：
fromdjango.contribimportadminfromdjango.dbimportmodels# Register your models here.from.importmodelsasdemo_modelsfrommdeditor.widgetsimportMDEditorWidgetclassExampleModelAdmin(admin.ModelAdmin):formfield_overrides={models.TextField:{'widget':MDEditorWidget}}admin.site.register(demo_models.ExampleModel,ExampleModelAdmin)
自定义工具栏
将以下配置添加到settings：
MDEDITOR_CONFIGS={'default':{'width':'90% ',# Custom edit box width'heigth':500,# Custom edit box height'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"],# custom edit box toolbar 'upload_image_formats':["jpg","jpeg","gif","png","bmp","webp"],# image upload format type'image_folder':'editor',# image save the folder name'theme':'default',# edit box theme, dark / default'preview_theme':'default',# Preview area theme, dark / default'editor_theme':'default',# edit area theme, pastel-on-dark / default'toolbar_autofixed':True,# Whether the toolbar capitals'search_replace':True,# Whether to open the search for replacement'emoji':True,# whether to open the expression function'tex':True,# whether to open the tex chart function'flow_chart':True,# whether to open the flow chart function'sequence':True,# Whether to open the sequence diagram function'watch':True,# Live preview'lineWrapping':False,# lineWrapping'lineNumbers':False# lineNumbers}}
反馈
欢迎使用和反馈！在
你可以创建一个issue或加入QQ群。在
参考文献
- 项目
标签：
欢迎加入QQ群-->： 979659372
