美文网首页
【MAC-Django-UEditor】python3之富文本编

【MAC-Django-UEditor】python3之富文本编

作者: LeoDavid | 来源:发表于2018-05-14 17:58 被阅读272次

    踩了很多坑,最后还是踩过了,很无奈!!先上最后的效果图

    图片上传
    图片显示,文本编辑

    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学习真的资料太少了,坑太多了,很多地方的代码和逻辑都是我东平西凑补全的。另外我严重怀疑,很多写博客的绝对自己项目都没跑起来,然后就把我带到了深坑里,难受!!!!!。

    相关文章

      网友评论

          本文标题:【MAC-Django-UEditor】python3之富文本编

          本文链接:https://www.haomeiwen.com/subject/bodjdftx.html