当前位置:首页 > 编程教程 > Python技术文章 > django富文本编辑器的实现示例

django富文本编辑器的实现方法

  • 发布时间:
  • 作者:码农之家
  • 点击:66

这篇文章主要知识点是关于django、富文本编辑器、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

跟老齐学Python:Django实战
  • 类型:Python大小:151 MB格式:PDF作者:齐伟
立即下载

django富文本编辑器的实现示例

最近一段时间都在学django,现在的网站基本都要使用到富文本编辑器,今天就记录下使用django的管理后台的一个富文本编辑器的第三方库 DjangoUeditor

使用方法

1.安装

方法一:将github整个源码包下载回家,在命令行运行:

python setup.py install

方法二:使用pip工具在命令行运行(推荐):

pip install DjangoUeditor

2.在 settings.py的INSTALL_APPS里面增加DjangoUeditor app

INSTALLED_APPS = [
 ...
 'DjangoUeditor'
]

3.配置urls 在urls.py 里添加路由

# 富文本
path('ueditor/', include('DjangoUeditor.urls')),

4.在 modal 使用

# 引入 UEditorField
from DjangoUeditor.models import UEditorField
# 使用
class Demo(model.Model):
 detail = UEditorField(verbose_name=u'详情', width=600, height=300, imagePath="courses/ueditor/", filePath="courses/ueditor/", default='')

5.在template里的HTML 文件里面,把这个字段渲染出来

{% autoescape off %}
 {{ course.detail }}
 {% endautoescape %}

6.在 xadmin 中使用

#在该模块的 xadmin.py 中加上
style_fields = {"detail": "ueditor"}

问题

我是在虚拟环境里起的项目,这样安装好之后,报了一个

TypeError: render() got an unexpected keyword argument 'renderer'

解决

需要修改虚拟环境下的:boundfield.py文件: .virtualenvs/虚拟环境文件/lib/python3.X/site-packages/django/forms/boundfield.py

  return widget.render(
   name=self.html_initial_name if only_initial else self.html_name,
   value=self.value(),
   attrs=attrs,
   # renderer=self.form.renderer,(93行处注 释掉,就能正常运行了)
  )

示例

django富文本编辑器的实现示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

django富文本 相关电子书
学习笔记
网友NO.206956

Django添加KindEditor富文本编辑器的使用

KindEditor简介: KindEditor是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor使用JavaScript编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。 在Django Admin当中加入KindEditor,这比干巴巴的textarea好多了。加入之后的效果如下: 1、设置static文件路径 KindEditor是用JavaScript编写的,这属于static files,因此需要为Django设置static路径。 首先在工程目录下新建static文件夹,这里要注意的是千万不要在my_app/下创建static文件夹作为static文件存放的目录, 这会导致Django无法搜索到自己的static 文件。 创建后好,在settings中配置static文件目录。添加以下代码 STATIC_URL = '/static……

网友NO.630172

Django在admin后台集成TinyMCE富文本编辑器的例子

Django原生的TextField并不友好,集成TinyMCE富文本编辑器 Django版本:1.11.5 TinyMCE版本:4.6.7 第一步:从官网下载TinyMCE https://www.tinymce.com/download/ 注意下载的是下面那个开发包,Dev Package。此包包含TinyMCE社区,开发工具和完整的源代码。 第二步:把压缩包内tinymce目录内的所有文件和文件夹复制到Django项目中static目录内: 第三步:编辑 admin.py 文件: from .models import Category, Tag, Blog, Comment class AdminFormTinyMCE(admin.ModelAdmin): class Media: js=( "//cdn.bootcss.com/jquery/2.2.4/jquery.min.js", "/static/js/tinymce/jquery.tinymce.min.js", "/static/js/tinymce/tinymce.min.js", "/static/js/tinymce/textareas.js", )admin.site.register([Blog,Comment,Category,Tag], AdminFormTinyMCE) 注:Category, Tag, Blog, Comment是在model.py定义的模型,如果想要在admin后台显示并编辑,就导入。 第三步:在 static/js/tinymce 文件夹中新建 textareas.js 文件: 加入……

网友NO.734158

django轻松使用富文本编辑器CKEditor的方法

前言 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便。遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的控件。ckeditor是一款基于javascript,使用非常广泛的开源网页编辑器。它可以和多种编程语言相结合,python当然也不例外。本文就来介绍一下如何在基于django博客系统如何完美地用上ckeditor。 使用方法 1、安装 pip install django-ckeditor 2、将‘ckeditor'settings.py中的INSTALLED_APPS 3、由于djang-ckeditor在ckeditor-init.js文件中使用了JQuery,所以要在settings.py中设置CKEDITOR_JQUERY_URL来指定JQuery库的路径,例如: CKEDITOR_JQUERY_URL ='https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js' 4、设定STATIC_ROOT,执行 python manage.py collectstatic ,将CKEditor需要的媒体资源拷入STATIC_ROOT指定的路径中。 STATIC_ROOT = o……

网友NO.420804

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

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_R……

网友NO.417150

Django框架使用富文本编辑器Uedit的方法分析

本文实例讲述了Django框架使用富文本编辑器Uedit的方法。分享给大家供大家参考,具体如下: Uedit是百度一款非常好用的富文本编辑器 一、安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. settings.py INSTALLED_APPS = [ ... 'DjangoUeditor', ...] 2. 配置urls from django.conf.urls import url, includeurlpatterns = [# 富文本相关url url(r'^ueditor/', include('DjangoUeditor.urls')),] 3. 字段信息 在需要使用富文本的字段所在的models.py中 from DjangoUeditor.models import UEditorFieldclass Articles(models.Model): ... content = UEditorField(width=1200, height=600, imagePath="article/ueditor/", filePath="article/ueditor/",verbose_name=u"文章内容") ... 注意,在要使用ueditor的字段所在adminx.py的类中,添加 # 这样就指定了course的detail字段使用ueditor富文本编辑器class ArticlesAdmin(object): ... style_fields = {"content":"uedit……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com