readme.txt 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. Ueditor HTML编辑器是百度开源的HTML编辑器,
  2. 本模块帮助在Django应用中集成百度Ueditor HTML编辑器。
  3. 安装包中已经集成Ueditor v1.2.2
  4. 使用Django-Ueditor非常简单,方法如下:
  5. 1、安装方法
  6. **方法一:下载安装包,在命令行运行:
  7. python setup.py install
  8. **方法二:使用pip工具在命令行运行(推荐):
  9. pip install DjangoUeditor
  10. 2、在INSTALL_APPS里面增加DjangoUeditor app,如下:
  11. INSTALLED_APPS = (
  12. #........
  13. 'DjangoUeditor',
  14. )
  15. 3、在urls.py中增加:
  16. url(r'^ueditor/',include('DjangoUeditor.urls' )),
  17. 4、在models中这样定义:
  18. from DjangoUeditor.models import UEditorField
  19. class Blog(models.Model):
  20. Name=models.CharField(,max_length=100,blank=True)
  21. Content=UEditorField('内容 ',height=100,width=500,default='test',imagePath="uploadimg/",imageManagerPath="imglib",toolbars='mini',options={"elementPathEnabled":True},filePath='upload',blank=True)
  22. 说明:
  23. UEditorField继承自models.TextField,因此你可以直接将model里面定义的models.TextField直接改成UEditorField即可。
  24. UEditorField提供了额外的参数:
  25. toolbars:配置你想显示的工具栏,取值为mini,normal,full,代表小,一般,全部。如果默认的工具栏不符合您的要求,您可以在settings里面配置自己的显示按钮。参见后面介绍。
  26. imagePath:图片上传的路径,如"images/",实现上传到"{{MEDIA_ROOT}}/images"文件夹
  27. filePath:附件上传的路径,如"files/",实现上传到"{{MEDIA_ROOT}}/files"文件夹
  28. imageManagerPath:图片管理器显示的路径,如"imglib/",实现上传到"{{MEDIA_ROOT}}/imglib",如果不指定则默认=imagepath。
  29. options:其他UEditor参数,字典类型。参见Ueditor的文档ueditor_config.js里面的说明。
  30. css:编辑器textarea的CSS样式
  31. width,height:编辑器的宽度和高度,以像素为单位。
  32. 5、在表单中使用非常简单,与常规的form字段没什么差别,如下:
  33. class TestUeditorModelForm(forms.ModelForm):
  34. class Meta:
  35. model=Blog
  36. ***********************************
  37. 如果不是用ModelForm,可以有两种方法使用:
  38. 1: 使用forms.UEditorField
  39. from DjangoUeditor.forms import UEditorField
  40. class TestUEditorForm(forms.Form):
  41. Description=UEditorField("描述",initial="abc",width=600,height=800)
  42. 2: widgets.UEditorWidget
  43. from DjangoUeditor.widgets import UEditorWidget
  44. class TestUEditorForm(forms.Form):
  45. Content=forms.CharField(label="内容",widget=UEditorWidget(width=800,height=500, imagePath='aa', filePath='bb',toolbars={}))
  46. widgets.UEditorWidget和forms.UEditorField的输入参数与上述models.UEditorField一样。
  47. 6、Settings配置
  48. 在Django的Settings可以配置以下参数:
  49. UEDITOR_SETTINGS={
  50. "toolbars":{ #定义多个工具栏显示的按钮,允行定义多个
  51. "name1":[[ 'source', '|','bold', 'italic', 'underline']],
  52. "name2",[]
  53. },
  54. "images_upload":{
  55. "allow_type":"jpg,png", #定义允许的上传的图片类型
  56. "max_size":"2222kb" #定义允许上传的图片大小,0代表不限制
  57. },
  58. "files_upload":{
  59. "allow_type":"zip,rar", #定义允许的上传的文件类型
  60. "max_size":"2222kb" #定义允许上传的文件大小,0代表不限制
  61. },,
  62. "image_manager":{
  63. "location":"" #图片管理器的位置,如果没有指定,默认跟图片路径上传一样
  64. },
  65. }
  66. 7、在模板里面:
  67. <head>
  68. ......
  69. {{ form.media }} #这一句会将所需要的CSS和JS加进来。
  70. ......
  71. </head>
  72. 注:运行collectstatic命令,将所依赖的css,js之类的文件复制到{{STATIC_ROOT}}文件夹里面。
  73. 8、其他事项:
  74. **本程序基于百度ueditor 1.2.2,安装包里面已经包括了,不需要再额外安装。
  75. **目前暂时不支持ueditor的插件
  76. **别忘记了运行collectstatic命令,该命令可以将ueditor的所有文件复制到{{STATIC_ROOT}}文件夹里面
  77. **Django默认开启了CSRF中间件,因此如果你的表单没有加入{% csrf_token %},那么当您上传文件和图片时会失败