在django xadmin中使用 Ueditor

     在django的admin中使用Ueditor,只需要 pip install Django-Ueditor,然后按照说明文档安装即可。
但是如果后台使用了xadmin,Django-Ueditor就不起作用了,这里我就把在xadmin后台使用Ueditor的使用步骤展示出来分享给大家:


1. 基础环境

  • django-----》pip install django
  • django-ueditor ----》 pip install django-ueditor
  • django-xadmin-----》pip install django-xadmin
在此默认  django-ueditor在 django 的admin中已经可以使用                   xadmin 也可以正常登陆展示等  http://127.0.0.1:8000/xadmin 可以看到如下:



2. 集成步骤

    下载Ueditor 官方压缩包php版本  http://ueditor.baidu.com/build/build_down.php?t=1_2_6_1-utf8-php  
     解压后如下几个文件:

      

     将文件夹放入 项目的static 目录下面,我取名ueditor,名字随意,如下:



接下来制作一个widget,在项目下建立了一个rte的文件夹,然后添加了一个__init__.py空文件和一个widgets.py文件,代码如下:


__author__ = 'Administrator'
#coding=utf8
from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe
from django.template.loader import render_to_string
from django.template import RequestContext
from django.utils.translation import ugettext_lazy as _
from django.forms.widgets import RadioFieldRenderer, RadioInput
from django.utils.encoding import force_unicode
from django.utils.safestring import mark_safe
from django.utils.html import conditional_escape
from django.utils.translation import ugettext as _
from itertools import chain


class Ueditor(forms.Textarea):

    def __init__(self,attrs={}):
        super(Ueditor,self).__init__(attrs)
    def render(self,name,value,attrs=None):
       # rendered = super(Ueditor,self).render(name,value,attrs)
        context = {
                'name':name,
                'STATIC_URL':settings.STATIC_URL,
                'value':value,
        }

        return  mark_safe(render_to_string('widgets/ueditor.html',context))


上面的widget 调用了一个模板,在templates目录底下的创建widgets/ueditor.html,代码如下:

{% load staticfiles %}

   <link  type="text/css"  rel="stylesheet" href="{% static  'ueditor/themes/default/ueditor.css'%}" />
   <script type="text/javascript" src="{% static 'ueditor/ueditor.all.js' %}" ></script>
   <script type="text/javascript" src="{% static 'ueditor/ueditor.config.js'%}" ></script>
 
 <script type="text/plain" id="myEditor" name="{{ name }}">
     {% autoescape off %}
{{ value|default_if_none:'' }}
     {% endautoescape %}
 </script> 
 
 <script type="text/javascript"> 
     var editor = new UE.ui.Editor({

              });
    editor.render("myEditor");

    </script> 

基本配置

编辑你的settings.py

STATIC_URL = '/asset/'  #此处你的可能是/static/ 懂django配置的这个地方要注意下

# Additional locations of static files
STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
	#os.path.abspath(os.path.dirname(__file__))+'/static/',
     ('theme',os.path.abspath(os.path.dirname(__file__))+ '/static/theme'),
      ('images',os.path.abspath(os.path.dirname(__file__))+ '/static/images'),
    ('media',os.path.abspath(os.path.dirname(__file__))+'/static/media'),
#下面这一行也是需要添加的,也就是把ueditor目录放在静态文件夹中可以查找得到,这个配置其实就是类似于IIS里面的虚拟目录,逗号后面是绝对路径,为什么要写代码获取,因为,你的环境变了,后面的绝对路径要跟着变,所以用代码获取了,其实这块可以用一个常量简化下,演示为了让大家看的更清楚,就全贴出来
        ('ueditor',os.path.abspath(os.path.dirname(__file__))+'/static/ueditor'),
)



 先编辑 static/ueditor/editor.config.js 

   window.UEDITOR_HOME_URL = "/asset/ueditor/"  

//此处要配置为你的static url,为什么这里是/asset/ueditor ,因为我的settings.py里面STATIC_URL=/asset/  如果你的是STATIC_URL=/static/,那么这里就填/static/editor



还是这个文件 第135 行开始:



  /**
     * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径,这个不能被注释
        UEDITOR_HOME_URL : URL

        //图片上传配置区
        ,imageUrl:"/ueditor/ImageUp/upimg/"             //图片上传提交地址
        ,imagePath:"/asset/media/upimg/"                     //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
        //,imageFieldName:"upfile"                   //图片数据的key,若此处修改,需要在后台对应文件修改对应参数
        //,compressSide:0                            //等比压缩的基准,确定maxImageSideLength参数的参照对象。0为按照最长边,1为按照宽度,2为按照高度
        //,maxImageSideLength:900                    //上传图片最大允许的边长,超过会自动等比缩放,不缩放就设置一个比较大的值,更多设置在image.html中

        //涂鸦图片配置区
        ,scrawlUrl:URL+"php/scrawlUp.php"           //涂鸦上传地址
        ,scrawlPath:URL+"php/"                            //图片修正地址,同imagePath

        //附件上传配置区
        ,fileUrl:URL+"php/fileUp.php"               //附件上传提交地址
        ,filePath:URL + "php/"                   //附件修正地址,同imagePath
        //,fileFieldName:"upfile"                    //附件提交的表单名,若此处修改,需要在后台对应文件修改对应参数

        //远程抓取配置区
        ,catchRemoteImageEnable:true               //是否开启远程图片抓取,默认开启
        ,catcherUrl:"/ueditor/RemoteCatchImage/catchimg/"   //处理远程图片抓取的地址
        ,catcherPath: "/asset/media/catchimg/"                  //图片修正地址,同imagePath
        //,catchFieldName:"upfile"                   //提交到后台远程图片uri合集,若此处修改,需要在后台对应文件修改对应参数
        //,separater:'ue_separate_ue'               //提交至后台的远程图片地址字符串分隔符
        //,localDomain:[]                            //本地顶级域名,当开启远程图片抓取时,除此之外的所有其它域名下的图片都将被抓取到本地,默认不抓取127.0.0.1和localhost

        //图片在线管理配置区
        ,imageManagerUrl: "/ueditor/ImageManager/upimg/"       //图片在线管理的处理地址
        ,imageManagerPath: "/asset/media/upimg/"                                    //图片修正地址,同imagePath

        //屏幕截图配置区
        ,snapscreenHost: location.hostname                                 //屏幕截图的server端文件所在的网站地址或者ip,请不要加http://
        ,snapscreenServerUrl: URL +"php/imageUp.php" //屏幕截图的server端保存程序,UEditor的范例代码为“URL +"server/upload/php/snapImgUp.php"”
        ,snapscreenPath: URL + "php/"
        ,snapscreenServerPort: location.port                                   //屏幕截图的server端端口
        //,snapscreenImgAlign: ''                                //截图的图片默认的排版方式

        //word转存配置区
        ,wordImageUrl:URL + "php/imageUp.php"             //word转存提交地址
        ,wordImagePath:URL + "php/"                       //
        //,wordImageFieldName:"upfile"                     //word转存表单名若此处修改,需要在后台对应文件修改对应参数

        //获取视频数据的地址
        ,getMovieUrl:URL+"php/getMovie.php"                   //视频数据获取地址

项目根目录urls.py中:

  url(r'^ueditor/',include('DjangoUeditor.urls' )),  #唯一用到DjangoUeditor的地方,写好的后台方法,非常感谢作者。


在你的media目录下面 建立一个upload文件夹,下面两个子文件夹

 upimg(上传的图片保存的位置) 

 catchimg(远程图片下载后保存的位置)

这两个目录都要设置权限 linux为 777  windows下为everyone读写





至此,配置基本完成





4. 使用方法


  app里面models.py里面有个Article模型,body 字段为 models.TextField实例代码:


  在你项目里面任何一个目录写个adminx.py ,名称可以随意,目录可以随意

添加如下代码:


from newsite.rte.widgets import Ueditor
class ArticleAdmin(object):
  
    style_fields = {"body": 'ueditor'}
    file_storage = FileSystemStorage(location=os.path.join(settings.MEDIA_ROOT,'upload'))
   #此处代码是指定上传文件的路径,目录权限要设置为777,windows上要设置为everyone 读写
    def get_field_style(self, db_field, style, **kwargs):
         
         if style in ('ueditor',):
            attrs = {'widget': Ueditor}  # 此处是顶部的widget引用
            return attrs
        

进入下你的xadmin,对模型Artcle的编辑就可以使用Ueditor了,95%的功能正常了,没有问题。


5.问题与解决


完成以上步骤,基本上编辑没问题了,但是还遗留以下功能未配置:


  • 上传图片 (已解决)(上面editor.config.js 135行下面配置好了)
  • 图片管理(未解决) editor.config.js 上配置
  • 自动下载远程图片到本地 (已解决)上面也配置好了


OK了,我上面的方法也许不是最好的,这个方法先保障能用上,也希望大家交流优化。




已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页