专栏首页程序员的碎碎念使用 Django Ueditor 富文本编辑器(一)

使用 Django Ueditor 富文本编辑器(一)

阅读本文需要你对Django项目的创建和基本使用有一定的了解

一、快速使用

1、安装

在项目根目录下克隆项目后再安装:

git clone https://github.com/twz915/DjangoUeditor3.git
cd DjangoUeditor3
python setup.py install

不要用pip install DjangoUeditor命令安装,因为现在(2019.12.24)pipy 上的版本是基于python2的,我们的Django2用不了

2、settings.py 中添加APP:DjangoUeditor

INSTALLED_APPS = [
    ...
    'DjangoUeditor',
]

3、根 urls.py 中配置路由

urlpatterns = [
    ...
    path('ueditor/', include('DjangoUeditor.urls')),
]

4、在 Models.py 中应用

很简单的,直接把自己想要使用富文本编辑器的字段应用为UeditorField就可以了:

class Article(models.Model):
    title = models.CharField('标题', max_length=100)
    content = UEditorField('内容', width=1000, height=500, toolbars="full", blank=True)

    def __str__(self):
        return self.title

其实,该富文本编辑器字段是继承自models.TextField

再创建/刷新数据库:

python manage.py makemigrations

然后一运行,哈哈哈报错MD:

File "E:\test_ueditor\test_ueditor\venv\lib\site-packages\DjangoUeditor\forms.py", line 3, in <module>
    from widgets import UEditorWidget
ModuleNotFoundError: No module named 'widgets'

报错的解决办法很简单,点击出错的位置,前往环境中的DjangoUeditorforms.py中将出错那句改为下面这句就行了:

# from widgets import UEditorWidget
from DjangoUeditor.widgets import UEditorWidget

搞定这个报错之后重新创建数据库:

python manage.py makemigrations
python manage.py migrate

这会儿肯定能成功了,不成功就找我,底部有公众号二维码嘿嘿嘿

5、查看效果

打开admin,进入到这个模型表的创建数据页面即可

二、深入配置富文本编辑器

到GitHub看介绍最后那部分的说明即可:https://github.com/twz915/DjangoUeditor3/

本文分享自微信公众号 - 程序员的碎碎念(gh_53e607dd4782),作者:米国队长

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Django集成百度富文本编辑器uEditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。 首先...

    古时的风筝
  • Koa中使用富文本编辑器Koa-ueditor

    UEditor 是由百度 web 前端研发部开发所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,开源基于 MIT 协议,允许自由使用和修改代码,下...

    越陌度阡
  • WEB项目中使用UEditor(富文本编辑器)

    Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器

    SmileNicky
  • Django实战-信息资讯-UEditor富文本编辑器

    Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(...

    小团子
  • ueditor富文本编使用

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <titl...

    joshua317
  • JSP引入 - UEditor 富文本编辑器

     UEditor  JSP 因为是项目第一天就导入了,现在过去一个多星期了,可能会有问题 官网:http://ueditor.baidu.com/website...

    二十三年蝉
  • Django 2.1.7 使用富文本编辑器 tinymce

    Django 2.1.7 Admin - 注册模型、自定义显示列表字段 Django 2.1.7 上传图片 - Admin后台管理 https://djan...

    Devops海洋的渔夫
  • Django实战-信息资讯-路由配置

    Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(...

    小团子
  • UEditor富文本编辑器的简单入门

    Rattenking

扫码关注云+社区

领取腾讯云代金券