1.DjangoUeditor的安装与配置
pip install DjangoUeditor -i https://pypi.doubanio.com/simple
(python38_imooc) C:\python_practice\wleducation>pip install DjangoUeditor -i https://pypi.doubanio.com/simple
Looking in indexes: https://pypi.doubanio.com/simple
Collecting DjangoUeditor
Using cached DjangoUeditor-1.8.143-py3-none-any.whl
Installing collected packages: DjangoUeditor
Successfully installed DjangoUeditor-1.8.143
运行有问题:
File "C:\python_envs\python38_imooc\lib\site-packages\DjangoUeditor\models.py", line 4, in <module>
from widgets import UEditorWidget,AdminUEditorWidget
ModuleNotFoundError: No module named 'widgets'
采用网上修改好的版本DjangoUeditor3
git clone git@github.com:twz915/DjangoUeditor3.git
1). settings.py
sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps')) # 把extra_apps文件夹添加到搜索目录中
卸载上面安装的 DjangoUeditor
2) pip unstall DjangoUeditor
3) 复制 clode git 上面的 DjangoUeditor 到 extra_apps 目录下面
4) 需要修改 里面的six 等不匹配的python
vires.py
# from django.utils.six.moves.urllib.request import urlopen
# from django.utils.six.moves.urllib.parse import urljoin
from urllib.request import urlopen as urlopen
from six.moves.urllib.parse import urljoin
commands.py
# from django.utils.six.moves.urllib.parse import urljoin
from urllib.parse import urljoin
2. 在INSTALL_APPS里面增加如下配置:
INSTALLED_APPS = (
# 添加 ueditor 富文本编辑器
'DjangoUeditor',
)
3、在setting.py的其他配置
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的前缀
说明:
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
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.配置 models.py
class Question(models.Model):
# 富文本 我试过很多其他的富文本
# content = HTMLField(verbose_name='内容')
# content = MarkdownField(verbose_name='内容')
# content = models.TextField(verbose_name='内容')
#ckeditor.fields.RichTextField 不支持上传文件的富文本字段
#
question_context = UEditorField(verbose_name='内容', height=500, width=1000,
default=u'', imagePath="media/%%Y/%%m/",
toolbars='full', filePath='%%Y/%%m/',
upload_settings={"imageMaxSize": 1204000},
settings={}, command=None, )
5. 配置 admin.py
class QuestionAdminForm(forms.ModelForm):
class Meta:
model = Question
fields = "__all__"
class QuestionAdmin(admin.ModelAdmin):
form = QuestionAdminForm
admin.site.register(Question, QuestionAdmin)
6. 测试运行:
测试没有问题,感觉页面插件更改丰富一些。