Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Django使用xadmin集成富文本编辑器Ueditor

Django使用xadmin集成富文本编辑器Ueditor

作者头像
菲宇
发布于 2022-12-21 11:36:53
发布于 2022-12-21 11:36:53
62400
代码可运行
举报
文章被收录于专栏:菲宇菲宇
运行总次数:0
代码可运行
使用xadmin发现没有富文本编辑器,就在网上找关于xadmin集成富文本编辑器的文章,看很多人都在使用ueditor集成,也试了好几篇文章的,都有些问题,遇到很多坑,就自己摸索尝试,最后终于配置成功。

一、xadmin的安装与配置

1、安装xadmin,其中第一种在python3中安装不成功,推荐第二种或者第三种

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
方式一:pip install xadmin
方式二:pip install git+git://github.com/sshwsfc/xadmin.git
方式三:
下载https://codeload.github.com/sshwsfc/xadmin/zip/master Zip文件,解压并进入目录下
直接python setup.py install

2、在settings.py里面注册上

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
INSTALLED_APPS = (
	#........
	'xadmin',
	'crispy_forms',
)

3、修改urls.py

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import xadmin
urlpatterns = [
    #url(r'^admin/', admin.site.urls),
    url(r'^xadmin/', xadmin.site.urls),
]

4、在应用下新建adminx.py

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import xadmin
	xadmin.site.register(Level)#你的应用名

5、启动django

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
python manage.py makemigrations
python manage.py migrate
python manage.py runserver 8000
如果成功即可访问

6、访问

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
http://你的ip:8000/xadmin/

二、DjangoUeditor的安装与配置

1、安装DjangoUeditor,python2和python3要分清楚。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
方式一:
下载https://github.com/twz915/DjangoUeditor3/下的源码包,在命令行运行:python setup.py install
方法二:使用pip工具在命令行运行(推荐):pip install DjangoUeditor

2、在INSTALL_APPS里面增加如下配置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    INSTALLED_APPS = (
        #........
        'DjangoUeditor',
    )

3、在setting.py的其他配置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
UEDITOR_SETTINGS = {
                       "toolbars": {  # 定义多个工具栏显示的按钮,允行定义多个
                           "name1": [['source', '|', 'bold', 'italic', 'underline']],
                           "name2": []
                   },
                   "images_upload":{
                                       "allow_type": "jpg,png",  # 定义允许的上传的图片类型
                                       "max_size": "2222kb"  # 定义允许上传的图片大小,0代表不限制
                                   },
                                   "files_upload": {
    "allow_type": "zip,rar",  # 定义允许的上传的文件类型
    "max_size": "2222kb"  # 定义允许上传的文件大小,0代表不限制
},
"image_manager": {
    "location": ""  # 图片管理器的位置,如果没有指定,默认跟图片路径上传一样
},
}
MEDIA_URL='/upload/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'upload/')#这个是在浏览器上访问该上传文件的url的前缀
说明:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
UEditorField继承自models.TextField,因此你可以直接将model里面定义的models.TextField直接改成UEditorField即可。
UEditorField提供了额外的参数:
    toolbars:配置你想显示的工具栏,取值为mini,normal,full,besttome, 代表小,一般,全部,涂伟忠贡献的一种样式。如果默认的工具栏不符合您的要求,您可以在settings里面配置自己的显示按钮。参见后面介绍。
    imagePath:图片上传的路径,"images/",实现上传到"{{MEDIA_ROOT}}/images"文件夹
    filePath:附件上传的路径,"files/",实现上传到"{{MEDIA_ROOT}}/files"文件夹
    scrawlPath:涂鸦文件上传的路径,"scrawls/",实现上传到"{{MEDIA_ROOT}}/scrawls"文件夹,如果不指定则默认=imagepath
    imageManagerPath:图片管理器显示的路径,如"imglib/",实现上传到"{{MEDIA_ROOT}}/imglib",如果不指定则默认=imagepath。
    options:其他UEditor参数,字典类型。参见Ueditor的文档ueditor_config.js里面的说明。
    css:编辑器textarea的CSS样式
    width,height:编辑器的宽度和高度,以像素为单位。

3、配置url

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
from django.conf.urls.static import static
from django.conf import settings
    url(r'^ueditor/', include('DjangoUeditor.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

4、配置adminx.py

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
from webedit.models import *
class LevelAdmin(object):
    style_fields = {"content": "ueditor"}
xadmin.site.register(Level,LevelAdmin)

5、配置xadmin

在xadmin/plugins下新建ueditor.py
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import xadmin
from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView
from DjangoUeditor.models import UEditorField
from DjangoUeditor.widgets import UEditorWidget
from django.conf import settings

class XadminUEditorWidget(UEditorWidget):
    def __init__(self,**kwargs):
        self.ueditor_options=kwargs
        self.Media.js = None
        super(XadminUEditorWidget,self).__init__(kwargs)

class UeditorPlugin(BaseAdminPlugin):

    def get_field_style(self, attrs, db_field, style, **kwargs):
        if style == 'ueditor':
            if isinstance(db_field, UEditorField):
                widget = db_field.formfield().widget
                param = {}
                param.update(widget.ueditor_settings)
                param.update(widget.attrs)
                return {'widget': XadminUEditorWidget(**param)}
        return attrs

    def block_extrahead(self, context, nodes):
        js = '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.config.js")  # 自己的静态目录
        js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.js")  # 自己的静态目录
        nodes.append(js)

xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)
在xadmin/plugins/__init__.py添加ueditor
 'ueditor'

6、在models下添加ueditor项

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
from DjangoUeditor.models import UEditorField
    content = UEditorField(verbose_name = '内容', height=500, width=1000,
                           default=u'', imagePath="Article_img/%%Y/%%m/",
                           toolbars='full', filePath='%%Y/%%m/',
                           upload_settings={"imageMaxSize": 1204000},
                           settings={}, command=None,)					   
将djangoueditor下的static文件复制到应用下的static,启动即可使用

7、页面中显示富文本(关闭Django的自动转义才能正常显示)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{% autoescape off %}
{{ item.content }}
{% endautoescape %}

Django xadmin后台添加ckEditor富文本编辑器的使用

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-07-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
django xadmin 集成DjangoUeditor富文本编辑器
本文档记录自己的学习历程! 介绍 Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大 额外功能 解决图片视频等无法上传显示问题 Ueditor下载地址 https://github.com/wsqy/DjangoUeditor.git 解压后将 DjangoUeditor 文件夹复制到django项目目录下,跟app目录同级 修改app models 导入UEditorField 模块 增加需要富文本框的字段 from DjangoUeditor.models import UEd
程序员同行者
2018/07/02
1.5K0
Django(Python3) xadmin和富文本编辑器的配置
1.将下载好的DjangoUeditor3-master.zip解压,复制里面的DjangoUeditor文件夹到我们的项目根目录当
用户2337871
2019/07/19
8950
Django(Python3) xadmin和富文本编辑器的配置
Django项目如何用富文本编辑器DjangoUeditor
Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大,像表格可以直接拖动调整单元格大小等, DjangoUeditor是把此编辑器集成为可以在django项目中直接使用的app,让django项目可以方便的使用这个编辑器。
极简小课
2022/06/21
2.4K0
Django项目如何用富文本编辑器DjangoUeditor
Python3 + Django + xamdin + DjangoUediter,UEditorField 在 xadmin 下加载不出来的解决办法
# pip install git+git://github.com/sshwsfc/xadmin.git
卓越笔记
2023/02/18
3970
Python3 + Django  + xamdin + DjangoUediter,UEditorField 在 xadmin 下加载不出来的解决办法
Django REST framework+Vue 打造生鲜超市(三)
四、xadmin后台管理 4.1.xadmin添加富文本插件 (1)xadmin/plugins文件夹下新建文件ueditor.py 代码如下: # xadmin/plugins/ueditor.py import xadmin from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView from DjangoUeditor.models import UEditorField
zhang_derek
2018/04/11
1.7K0
Django REST framework+Vue 打造生鲜超市(三)
零基础使用Django2.0.1打造在线教育网站(二十六):xadmin的进阶开发
努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!
啃饼思录
2018/09/13
1.3K0
Django项目于之在线教育平台网站的实战开发(完结)
接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/90141577
全栈程序员站长
2022/09/15
1.4K0
Django项目于之在线教育平台网站的实战开发(完结)
使用 Django Ueditor 富文本编辑器(一)
很简单的,直接把自己想要使用富文本编辑器的字段应用为UeditorField就可以了:
benny
2020/04/23
1.3K0
在非admin页面使用 Django Ueditor(二)
Django Ueditor的安装和在admin页面的使用请看,接下来的内容是基于这篇文章的环境进行的:使用 Django Ueditor 富文本编辑器(一),如果你按照下面的流程来做还有关于Ueditor的报错,很有可能是没有装好环境。。 总体流程 以文章模型为例 1、创建文章模型 2、创建该文章模型的Form 3、写个html界面 4、写个视图函数article(),并提供这个Form给前端渲染 5、写个路由,并配置好settings.py文件 具体实现过程 在app中: 1、创建文章模型 from D
benny
2020/04/23
7500
在非admin页面使用 Django Ueditor(二)
Django+xadmin打造在线教育平台(十)
代码 github下载 十四、xadmin的进阶开发 14.1.权限管理 (1)用户权限 超级用户拥有所有权限,其它添加的用户默认没有任何权限 进后台添加一个用户“Editor1”,勾上“职员状态”后
zhang_derek
2018/04/11
2.3K0
Django+xadmin打造在线教育平台(十)
Django实战-信息资讯-UEditor富文本编辑器
Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(表单)的使用。
小团子
2019/07/18
7400
Django实战-信息资讯-UEditor富文本编辑器
2.Models设计
1.Models设计: 1.重构用户表: 1.在users/models.py中: from django.db import models from django.contrib.auth.models import AbstractUser from datetime import datetime # Create your models here. class UserProfile(AbstractUser): """ 用户表 """ token = model
玩蛇的胖纸
2020/05/18
4130
Django添加ckeditor富文本编辑器
源码 https://github.com/django-ckeditor/django-ckeditor
菲宇
2022/12/21
2.3K0
Django实战-番外篇-tinymce富文本编辑器
富文本编辑器在 web应用中使用广泛,比如 markdown、ueditor 等,像这些编辑器都有集成在 python 和 django 的第三方包。
小团子
2019/07/18
9480
Django实战-番外篇-tinymce富文本编辑器
Django后台和前台使用summernote富文本编辑器
简单介绍一下怎么在django的管理后台和用户使用网页中使用django-summernote富文本编辑器,其他富文本编辑器类似。
小末快跑
2019/07/03
2.6K0
Django中富文本编辑器KindEditor的使用和图片上传
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用
菲宇
2022/12/21
1.2K0
Django中富文本编辑器KindEditor的使用和图片上传
django admin 使用 ckeditor 富文本编辑器
pip install pillow (上传图片到伺服器裁剪用,生成浏览伺服器的缩略图)
卓越笔记
2023/02/17
1.2K0
django admin 使用 ckeditor 富文本编辑器
Django 2.1.7 使用富文本编辑器 tinymce
Django 2.1.7 Admin - 注册模型、自定义显示列表字段 Django 2.1.7 上传图片 - Admin后台管理 https://django-tinymce.readthedocs.io/en/latest/
Devops海洋的渔夫
2019/07/15
1.8K0
Django 2.1.7 使用富文本编辑器 tinymce
用django2.1开发公司官网(上)
2.新建static目录,在static目录下新建css目录、js目录、img目录
玩蛇的胖纸
2018/12/25
1.4K0
Django使用markdown文本编辑器
前端界面的显示: 导入css,js文件,这些文件的路径在\python\Lib\site-packages\mdeditor\static中,将它拷贝至项目的静态文件目录使用即可(注意导入顺序):
TomatoCool
2023/07/30
3630
推荐阅读
相关推荐
django xadmin 集成DjangoUeditor富文本编辑器
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验