【MAC-Django-UEditor】python3之富文本编
2018-05-14 本文已影响272人
LeoDavid
踩了很多坑，最后还是踩过了，很无奈！！先上最后的效果图
图片上传
图片显示，文本编辑
1.DjangoUeditor-安装
我使用的是python3，首先用pip安装DjangoUeditor，
pip3 install DjangoUeditor //然后，坑开始了，欢迎补充坑
- 下载DjangoUeditor3
首先安装后的DjangoUeditor版本，代码没有更新，只是适配了python2，你用python3当然要出现问题了！！！！！！
请点击，然后下载 https://github.com/twz915/DjangoUeditor3/
- 替换部分不适配python3的DjangoUeditor
找到DjangoUeditor的位置，替换(DjangoUeditor3里面的DjangoUeditor文件夹替换到本地的DjangoUeditor）【替换后还需要修改一个类的头文件引入，看具体报错找位置，修改起来很简单】
Import sys
sys.path //找到python3 的本地下载库
我本地的位置
2.django使用DjangoUeditor-代码
- Setting.py
INSTALLED_APPS = (
#........
'DjangoUeditor',
)
//上传路径（很重要）
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
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":"" #图片管理器的位置,如果没有指定，默认跟图片路径上传一样
},
}
- urls.py
url(r'^ueditor/',include('DjangoUeditor.urls' )),
# 如果不设置，上传后将看不到图片
# use Django server /media/ files
from django.conf import settings
if settings.DEBUG:
from django.conf.urls.static import static
urlpatterns += static(
settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
- models
from DjangoUeditor.models import UEditorField
class Blog(models.Model):
Name=models.CharField(max_length=100,blank=True)
Content=UEditorField('内容 ',height=100,width=500,default='test',imagePath="uploadimg/",imageManagerPath="imglib",toolbars='mini',options={"elementPathEnabled":True},filePath='upload',blank=True)
- forms
from DjangoUeditor.forms import UEditorField
class TestUEditorForm(forms.Form):
Description=UEditorField("描述",initial="abc",width=600,height=800)
- views
from blog.forms.TestUeditorModelForm import TestUEditorForm
form = TestUEditorForm()
return render_to_response('topic/topicHome.html',{"form": form})
- html
先运行 python3 manage.py collectstatic
<head>
......
{{ form.media }} #这一句会将所需要的CSS和JS加进来。
......
</head>
<div class="edit-area">
{{ form }}
</div>
感概一下，python学习真的资料太少了，坑太多了，很多地方的代码和逻辑都是我东平西凑补全的。另外我严重怀疑，很多写博客的绝对自己项目都没跑起来，然后就把我带到了深坑里，难受！！！！！。
