1.安装DjangoUeditor

pip install DjangoUeditor

2.在Django中安装DjangoUedito app,在INSTALL_APPS里面增加DjangoUeditor app

INSTALLED_APPS = (
    'DjangoUeditor',
)

3.配置urls

 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(u'内容',width=600, height=300, toolbars="full", imagePath="", filePath="", upload_settings={"imageMaxSize":1204000},
             settings={},command=None,event_handler=myEventHander(),blank=True)

说明:

  UEditorField继承自models.TextField,因此你可以直接将model里面定义的models.TextField直接改成UEditorField即可。 定义UEditorField时除了可以直接传入models.TextFieldUEditorField提供的参数外,还可以传入UEditorField提供的额外的参数 来控制UEditorField的外观、上传路径等。 UEditorField的参数如下:

  • width,height :编辑器的宽度和高度,以像素为单位。
  • toolbars :配置你想显示的工具栏,取值为mini,normal,full,代表小,一般,全部。如果默认的工具栏的按钮数量不符合您的要求,您可以在settings里面配置自己的显示按钮。参见后面介绍。
  • imagePath :图片上传后保存的路径,如"images/",实现上传到"{{MEDIA_ROOT}}/images"文件夹。 注意:如果imagePath值只设置文件夹,则未尾要有"/" imagePath可以按python字符串格式化:如"images/%(basename)s_%(datetime)s.%(extname)s"。这样如果上传test.png,则文件会 被保存为"{{MEDIA_ROOT}}/images/test_20140625122399.png"。 imagePath中可以使用的变量有:

      time :上传时的时间,datetime.datetime.now().strftime("%H%M%S")

      date :上传时的日期,datetime.datetime.now().strftime("%Y%m%d")

      datetime :上传时的时间和日期,datetime.datetime.now().strftime("%Y%m%d%H%M%S")

      year : 年

      month : 月

      day : 日

      rnd : 三位随机数,random.randrange(100,999)

      basename : 上传的文件名称,不包括扩展名

      extname : 上传的文件扩展名

      filename : 上传的文件名全称

  • filePath : 附件上传后保存的路径,设置规则与imagePath一样。
  • upload_settings : 字典值, 例:upload_settings={ imagePathFormat:"images/%(basename)s_%(datetime)s.%(extname)s", imageMaxSize:323232 fileManagerListPath:"files" }

      1.upload_settings的内容就是ueditor/php/config.json或者django中settings.py中UEDITOR_SETTINGS里面的配置内容,因此,你可以去看config.json或者官方文档内容来决定该如何配置upload_settings,基本上就是用来配置上传的路径、允许上传的文件扩展名、最大上传的文件大小之类的。

      2.上面的imagePath和filePath被单独提取出来配置,原因是因为这两个参数是最常使用到的,imagePath就相当于upload_settings里面的 imagePathFormat,filePath就相当于upload_settings里面的filePathFormat。

      3.您upload_settings里面设置了imagePathFormat,也可以在UeditorField里面设置imagePath,效果是一样的。但是如果两者均设置, 则imagePath优先级更高。

      4.涂鸦文件、截图、远程抓图、图片库的xxxxPathFormat如果没有配置,默认等于imagePath.

      5.远程文件库的xxxxPathFormat如果没有配置,默认等于filePath.

### django中upload_settings

UEDITOR_SETTINGS = {
    "toolbars": {  # 定义多个工具栏显示的按钮,允行定义多个
        "name1": [['source', '|', 'bold', 'italic', 'underline']],
        "name2": []
    },
    # "images_upload": {
    #     "allow_type": "png,jpeg,gif,jpg,bmp,tif",  # 定义允许的上传的图片类型
    #     "path": "ueditor_imgs/",  # 定义默认的上传路径
    #     "max_size": "0"  # 定义允许上传的图片大小,0代表不限制
    # },
    # "files_upload": {
    #     "allow_type": "zip,rar",  # 定义允许的上传的文件类型
    #     # "path": "ueditor_files/",  # 定义默认的上传路径
    #     "max_size": "0"  # 定义允许上传的文件大小,0代表不限制
    # },
    "image_manager": {
        "path": "ueditor_imgs"  # 图片管理器的位置,如果没有指定,默认跟图片路径上传一样
    },
    "imageManagerListPath": {
        "path": "ueditor_imgs/"  # 图片管理器的位置,如果没有指定,默认跟图片路径上传一样
    },

    "scrawl_upload": {
        "path": ""  # 涂鸦图片默认的上传路径
    },
    # "upload": {
    #     "imagePathFormat": 'ueditor_imgs/%(basename)s_%(datetime)s.%(extname)s',
    #     'imageManagerListPath': 'ueditor_imgs/',
    #     "filePathFormat": 'ueditor_files/%(basename)s_%(datetime)s.%(extname)s',
    #     "fileManagerListPath": 'ueditor_files/',
    # }
}
  • settings : 字典值,配置项与ueditor/ueditor.config.js里面的配置项一致。
  • command : 可以为Ueditor新增一个按钮、下拉框、对话框,例:
  Description = UEditorField(u'描述', blank=True, toolbars="full", imagePath="cool/", settings={"a": 1},
                         command=[myBtn(uiName="mybtn1", icon="d.png", title=u"1摸我", ajax_url="/ajaxcmd/"),
                                 myCombo(uiName="myCombo3",title=u"ccc",initValue="aaa")
                                  ])

   以上代码可以会Ueditor增加一个按钮和一个下拉框。command是一个UEditorCommand的实例列表。如果你要在Ueditor的工具栏上增加一个 自定义按钮,方法如下:

    from DjangoUeditor.commands import UEditorButtonCommand,UEditorComboCommand
    #定义自己的按钮命令类
    class myBtn(UEditorButtonCommand):
        def onClick(self):
            return u"""
                alert("爽!");       //这里可以写自己的js代码
                editor.execCommand(uiName);
            """
        def onExecuteAjaxCommand(self,state):
        """  默认在command代码里面加入一段ajax代码,如果指定了ajax_url和重载本方法,则在单点按钮后
         会调用ajax_url.本方法重载是可选的。
         """
            if state=="success":
                return u"""
                    alert("后面比较爽!"+xhr.responseText);//这里可以写ajax成功调用的js代码
                """
            if state=="error":
                return u"""
                    alert("讨厌,摸哪里去了!"+xhr.responseText);//这里可以写ajax错误调用的js代码
                """

    UEditorButtonCommand有初始化参数:
            uiName:按钮名称
            title:按钮提示信息
            index:按钮显示的位置索引
            ajax_url:单击时调用的ajax url

    UEditorComboCommand可以在Ueditor上增加一个下拉框
    UEditorDialogCommand可以在Ueditor上增加一个对话框,一般与UEditorButtonCommand配合使用。暂未实现
  • event_handler : 用来为Ueditor实例绑定事件侦听,比较当选择区改变时将按钮状态置为禁止。
  from DjangoUeditor.commands import UEditorEventHandler
  class myEventHander(UEditorEventHandler):
      def on_selectionchange(self):
          return """
              function getButton(btnName){
                  var items=%(editor)s.ui.toolbars[0].items;
                  for(item in items){
                      if(items[item].name==btnName){
                          return items[item];
                      }
                  }
              }
              var btn=getButton("mybtn1");
              var selRanage=id_Description.selection.getRange()
              btn.setDisabled(selRanage.startOffset == selRanage.endOffset);

          """

  我们可以继承UEditorEventHandler创建自己的事件侦听类,例如上面myEventHander,然后在myEventHander中
  增加on_eventname的方法,在里面返回侦听该event的js代码。例如上例on_selectionchange,就会在前端js中
  生成id_Description.addListener('selectionchange', function () {.......});
  如果要侦听contentchange事件,就在myEventHander中增加一个on_contentchange方法,然后在该方法中返回js代码。

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一样。

说明 关于第一种方法,需要在代码中建立相应的类(比如就在views.py中),并且需要在views.py渲染视图的时候返回到模板(template)中,对于上面的代码,具体使用可能如下(在views.py中):

from DjangoUeditor.forms import UEditorField class TestUEditorForm(forms.Form):
    Description=UEditorField("描述",initial="abc",width=600,height=800)

def edit_description_view(request):
    form = TestUEditorForm()
    return render(request,'edit-description.htm',{"form": form})

而在edit-description.htm这个模板(template)里面,只需要在模板相应位置输出form即可:
<div class="edit-area">
    {{ form }}
</div>

6.Settings配置 在Django的Settings可以配置以下参数: UEDITOR_SETTINGS={ "config":{ #这里放ueditor.config.js里面的配置项....... }, "upload":{ #这里放php/config.json里面的配置项....... } }

7.在模板里面,{{ form.media }} #这一句会将所需要的CSS和JS加进来。 注:运行collectstatic命令,将所依赖的css,js之类的文件复制到{{STATIC_ROOT}}文件夹里面。

8.高级运用:动态指定imagePathFormat等文件路径 ,这几个路径文件用于保存上传的图片或附件,您可以直接指定路径,如: UEditorField('内容',imagePath="uploadimg/") 则图片会被上传到"{{MEDIA_ROOT}}/uploadimg"文件夹,也可以指定为一个函数,如:

  def getImagePath(model_instance=None):
      return "abc/"
  UEditorField('内容',imagePath=getImagePath)
  则图片会被上传到"{{MEDIA_ROOT}}/abc"文件夹。
 ****************
 使上传路径(如imagePathFormat)与Model实例字段值相关
 ****************
    在有些情况下,我们可能想让上传的文件路径是由当前Model实例字值组名而成,比如:
    class Blog(Models.Model):
        Name=models.CharField('姓名',max_length=100,blank=True)
        Description=UEditorField('描述',blank=True,imagePath=getUploadPath,toolbars="full")

 id  |   Name    |       Description
 ------------------------------------
 1   |   Tom     |       ...........
 2   |   Jack    |       ...........

  我们想让第一条记录上传的图片或附件上传到"{{MEDIA_ROOT}}/Tom"文件夹,第2条记录则上传到"{{MEDIA_ROOT}}/Jack"文件夹。
  该怎么做呢,很简单。
  def getUploadPath(model_instance=None):
      return "%s/" % model_instance.Name
  在Model里面这样定义:
  Description=UEditorField('描述',blank=True,imagePath=getUploadPath,toolbars="full")
  这上面model_instance就是当前model的实例对象。
  还需要这样定义表单对象:
  from  DjangoUeditor.forms import UEditorModelForm
  class UEditorTestModelForm(UEditorModelForm):
        class Meta:
            model=Blog
  特别注意:
     **表单对象必须是继承自UEditorModelForm,否则您会发现model_instance总会是None。
     **同时在Admin管理界面中,此特性无效,model_instance总会是None。
     **在新建表单中,model_instance由于还没有保存到数据库,所以如果访问model_instance.pk可能是空的。因为您需要在getUploadPath处理这种情况

9.其他事项

**本程序版本号采用a.b.ccc,其中a.b是本程序的号,ccc是ueditor的版本号,如1.2.122,1.2是DjangoUeditor的版本号,122指Ueditor 1.2.2.
**本程序安装包里面已经包括了Ueditor,不需要再额外安装。
**目前暂时不支持ueditor的插件
**别忘记了运行collectstatic命令,该命令可以将ueditor的所有文件复制到{{STATIC_ROOT}}文件夹里面
**Django默认开启了CSRF中间件,因此如果你的表单没有加入{% csrf_token %},那么当您上传文件和图片时会失败

django配置Ueditor的更多相关文章

  1. django配置Ueditor富文本编辑器

    1.https://github.com/twz915/DjangoUeditor3下载包,进入包文件夹,找到DjangoUeditor包拷贝到项目下,和xadmin同级目录 2.找到项目的setti ...

  2. ASP.NET配置Ueditor编辑器上传图片路径

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

  3. Java Web项目 配置 ueditor心得

    近期的JAVA项目,由于客户要求需要引入富文本编辑器. 参考了两款插件,一款是ckeditor,一款是ueditor. ckeditor在上传文件的时候必须配合ckfinder使用,而ckfinder ...

  4. Windows下Apache+mod_python+Django配置

    Windows下Apache+mod_python+Django配置 Apache 首先要安装Apache,我安装的版本是2.2.*: Python python肯定是要安装的,我安装的版本是2.5的 ...

  5. 【uWSGI】实战之Django配置经验

    uWSGI 是应用服务器,实现了uwsgi, wsgi等协议,可以运行wsgi 应用 uwsgi 是协议名 Django配置 下面是自己经常用的一个配置模板,基于1.9以上的版本使用的, 主要基于dj ...

  6. 《玩转Django2.0》读书笔记-Django配置信息

    <玩转Django2.0>读书笔记-Django配置信息 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 项目配置是根据实际开发需求从而对整个Web框架编写相应配置信息. ...

  7. Django配置后台xadmin管理界面

    Django配置后台xadmin管理界面 python版本3.6.5 Django版本1.10.8(刚开始是2.1.5,由于各种错误,改成了低版本) 1.xadmin的安装,下载地址https://g ...

  8. Django 配置

    Django 配置   运行 django-admin.py startproject [project-name] 命令会生成一系列文件,在Django 1.6版本以后的 settings.py 文 ...

  9. django配置静态文件

    django配置静态文件 参考文章链接:http://blog.csdn.net/hireboy/article/details/8806098

随机推荐

  1. 关于变长数组的一点小想法-C语言定义数组但是数组长度不确定怎么办

    很多数据机构,比如栈,链表等,都可以动态分配存储空间 那么数组呢?一般声明时都要指定数组长度,那么数组可以实现动态分配么? 假设数组存的是int型 那么 你先申请10个元素 int* a = (int ...

  2. 不修改代码优化 ASP.NET 网站性能的一些方法

    本文将介绍一些方法用于优化ASP.NET网站性能,这些方法都是不需要修改程序代码的.它们主要分为二个方面:1. 利用ASP.NET自身的扩展性进行优化.2. 优化IIS设置. 配置OutputCach ...

  3. python学习笔记(十二)之函数

    牛刀小试: 定义一个无参函数 >>> def myFirstFunc(): ... print("Hello python") ... print("h ...

  4. notepad++突然崩溃,保存的文件没了怎么办

    在C:\Users\你当前用户的用户名\AppData\Roaming\Notepad++\backup  有备份

  5. jquery对象和javascript对象即DOM对象相互转换

    jquery对象和javascript对象即DOM对象相互转换 1. DOM 对象转成 jQuery 对象对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQue ...

  6. rebbitmq之python_pika监控远程连接及自动恢复(七)

    前言 客户端连接rabbitmq后,如果长时间没有数据的传输,rabbitmq会申请关闭TCP连接,造成该TCP连接下的所有的信道都不可用,很多时候为了传输数据的高效率,我们会先创建一个信道池,这样省 ...

  7. React 16 源码瞎几把解读 【二】 react组件的解析过程

    一.一个真正的react组件编译后长啥样? 我们瞎几把解读了react 虚拟dom对象是怎么生成的,生成了一个什么样的解构.一个react组件不光由若干个这些嵌套的虚拟dom对象组成,还包括各种生命周 ...

  8. eWebEditor复制粘贴图片时过滤域名

    1.找到form.js 路径:plugins/frame/scripts/form.js 这个方法: 2.替换这个方法 /** * 处理参数 */ Form.prototype.processReqP ...

  9. WPF之换肤

    WPF之换肤 设计原理 WPF换肤的设计原理,利用资源字典为每种皮肤资源添加不同的样式,在后台切换皮肤资源文件. 截图 上图中,第一张图采用规则样式,第二张图采用不规则样式,截图的时候略有瑕疵. 资源 ...

  10. 批量删除.svn文件夹和.svn文件

    新建可运行文件 Windows环境 将下面的代码保存为 kill-svn.bat文件,放到要删除.svn文件的目录下,双击运行即可 @echo on @rem 删除SVN版本控制目录 @rem for ...