Django 使用UEditor

Django package 的一些包不支持upload file, 并且 有几个支持的不是收费的就是要开csrf ,这对于苦逼程序员来说始终是件恼火的事,所以经过查阅各种资料,看了各种各样的配置doc, 终于搞定了django + Ueditor (开源,含upload file 功能的组件)下面粗略写了些步骤:

1. your html page

<head>
<!--FOR UEDITOR -->
<script type="text/javascript" charset="utf-8">
 window.UEDITOR_HOME_URL = window.UEDITOR_HOME_URL||"/Ueditor/ueditor/";
</script>


<script type="text/javascript" charset="utf-8" src="/static/Ueditor/ueditor/editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/Ueditor/ueditor/editor_all_min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/Ueditor/ueditor/themes/default/ueditor.css"/>
<!--FOR UEDITOR -->

</head>​

<form>

          <p>
              <label>提案内容</label>
              <textarea class="text-input textarea" id="proposal_content" name="proposal_content" cols="79" rows="15"></textarea>
            </p>
            <p>
​
</form>

after form 


    
   <!-- for ueditor-->
    <script type="text/javascript">
        var ue=new UE.ui.Editor();
        ue.render('proposal_content');
    </script>
    <!--for ueditor-->
​2.in uedior.views:

#coding:utf-8

from proposal_platform import settings         #using your project root settings 
from django.core.context_processors import csrf
from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render_to_response
from django.template.context import RequestContext
from django.views.decorators.csrf import csrf_exempt
from PIL import Image  # help to create  uplaoded bitmap 
import base64
import os
import time
import urllib2
import uuid
from django.utils.encoding import smart_unicode
​

3.urlconfig:
(
    # for UEditor {{
    url(r'^ueditor_imgup$', 'proposal_platform.UeditorApp.Ueditor.views.ueditor_ImgUp'),
    url(r'^ueditor_fileup$', 'proposal_platform.UeditorApp.Ueditor.views.ueditor_FileUp'),
    url(r'^ueditor_getRemoteImage$', 'proposal_platform.UeditorApp.Ueditor.views.ueditor_getRemoteImage'),
    url(r'^ueditor_scrawlUp$', 'proposal_platform.UeditorApp.Ueditor.views.ueditor_ScrawUp'),
    url(r'^ueditor_getMovie$', 'proposal_platform.UeditorApp.Ueditor.views.ueditor_getMovie'),
    url(r'^ueditor_imageManager$', 'proposal_platform.UeditorApp.Ueditor.views.ueditor_imageManager'),
    # }}
​
    # 这里是否使用/admin/aaa.html的请求 ,如果有静态网页的请求要在里面单独设计 {{
    url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT}),
    url(r'^(?!admin)(?P<path>.*)$','django.views.static.serve', {'document_root': settings.STATIC_ROOT}),
    url(r'^(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.ADMIN_HTML_ROOT}),
    # }}
​)
if settings.DEBUG is False:
    urlpatterns += patterns('',
        url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {
            'document_root': settings.STATIC_ROOT
        }),
   )
​


4.the full dir of the project:




Ueditor HTML编辑器是百度开源的HTML编辑器, 本模块帮助在Django应用中集成百度Ueditor HTML编辑器。 安装包中已经集成Ueditor v1.2.2 使用Django-Ueditor非常简单,方法如下: 1、安装方法 **方法一:下载安装包,在命令行运行: python setup.py install **方法二:使用pip工具在命令行运行(推荐): pip install DjangoUeditor 2、在INSTALL_APPS里面增加DjangoUeditor app,如下: INSTALLED_APPS = ( #........ 'DjangoUeditor', ) 3、在urls.py中增加: url(r'^ueditor/',include('DjangoUeditor.urls' )), 4、在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) 说明: UEditorField继承自models.TextField,因此你可以直接将model里面定义的models.TextField直接改成UEditorField即可。 UEditorField提供了额外的参数: toolbars:配置你想显示的工具栏,取值为mini,normal,full,代表小,一般,全部。如果默认的工具栏不符合您的要求,您可以在settings里面配置自己的显示按钮。参见后面介绍。 imagePath:图片上传的路径,如"images/",实现上传到"{{MEDIA_ROOT}}/images"文件夹 filePath:附件上传的路径,如"files/",实现上传到"{{MEDIA_ROOT}}/files"文件夹 imageManagerPath:图片管理器显示的路径,如"imglib/",实现上传到"{{MEDIA_ROOT}}/imglib",如果不指定则默认=imagepath。 options:其他UEditor参数,字典类型。参见Ueditor的文档ueditor_config.js里面的说明。 css:编辑器textarea的CSS样式 width,height:编辑器的宽度和高度,以像素为单位。 5、在表单中使用非常简单,与常规的form字段没什么差别,如下: class TestUeditorModelForm(forms.ModelForm): class Meta: model=Blog *********************************** 如果不是用ModelForm,可以有两种方法使用: 1: 使用forms.UEditorField from DjangoUeditor.forms import UEditorField class TestUEditorForm(forms.Form): Description=UEditorField("描述",initial="abc",width=600,height=800) 2: widgets.UEditorWidget from DjangoUeditor.widgets import UEditorWidget class TestUEditorForm(forms.Form): Content=forms.CharField(label="内容",widget=UEditorWidget(width=800,height=500, imagePath='aa', filePath='bb',toolbars={})) widgets.UEditorWidget和forms.UEditorField的输入参数与上述models.UEditorField一样。 6、Settings配置 在Django的Settings可以配置以下参数: 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":"" #图片管理器的位置,如果没有指定,默认跟图片路径上传一样 }, } 7、其他事项: **本程序基于百度ueditor 1.2.2,安装包里面已经包括了,不需要再额外安装。 **目前暂时不支持ueditor的插件 **Django默认开启了CSRF中间件,因此如果你的表单没有加入{% csrf_token %},那么当您上传文件和图片时会失败
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值