Xadmin集成富文本編輯器ueditor

在xadmin中經過自定義插件，實現富文本編輯器，效果以下：

一、首先，pip安裝ueditor的Django版本：

pip install DjangoUeditor

 

二、以後須要添加到項目的settings.py文件的INSTALLED_APPS下面

三、在urls.py文件中加入用於處理富文本的網址：

url(r'^ueditor/',include('DjangoUeditor.urls' ))

 

四、在model中使用UEditorField字段

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.TextField提供的參數外，還能夠傳入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" }

  • upload_settings的內容就是ueditor/php/config.json裏面的配置內容，所以，你能夠去看config.json或者官方文檔內容來決定 該如何配置upload_settings,基本上就是用來配置上傳的路徑、容許上傳的文件擴展名、最大上傳的文件大小之類的。
  • 上面的imagePath和filePath被單獨提取出來配置，緣由是由於這兩個參數是最常使用到的，imagePath就至關於upload_settings裏面的 imagePathFormat，filePath就至關於upload_settings裏面的filePathFormat。
  • 您upload_settings裏面設置了imagePathFormat,也能夠在UeditorField裏面設置imagePath，效果是同樣的。可是若是二者均設置， 則imagePath優先級更高。
  • 塗鴉文件、截圖、遠程抓圖、圖片庫的xxxxPathFormat若是沒有配置，默認等於imagePath.
  • 遠程文件庫的xxxxPathFormat若是沒有配置，默認等於filePath.

• 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插件

在項目中xadmin/Plugins中建立插件ueditor.py，寫入下面代碼：

# -*- coding: utf-8 -*-
import xadmin
from django.db.models import TextField
from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView
from DjangoUeditor.models import UEditorField
from DjangoUeditor.widgets import UEditorWidget
from django.conf import settings


class XadminUEditorWidget(UEditorWidget):
    def __init__(self, **kwargs):
        self.ueditor_options = kwargs
        self.Media.js = None
        super(XadminUEditorWidget, self).__init__(kwargs)


class UeditorPlugin(BaseAdminPlugin):

    def get_fiels_style(self, attrs, db_field, style, **kwargs):
        """
        接收adminx中的style_fields鍵值對，分別賦值給db_field,style
        """
        if style == 'ueditor':
            if isinstance(db_field, UEditorField):
                widget = db_field.formfield().widget
                param = {}
                param.update(widget.ueditor_settings)
                param.update(widget.attrs)
                return {'widget': XadminUEditorWidget(**param)}
        return attrs

    def block_extrahead(self, context, nodes):
        """
        在生成的頁面中加入本身的js文件
        """
        js = '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + 'ueditor/ueditor.config.js')
        js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + 'ueditor/ueditor.all.min.js')
        nodes.append(js)


xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)

 

六、將ueditor寫入xadmin/Plugins/__init__.py文件中，__init__.py文件中有一個元組，存放xadmin的全部插件：

七、在某一個app的adminx.py文件中指明哪一個字段使用ueditor樣式：

八、有一個問題，當咱們在富文本中寫入非文本的內容時，頁面不能正常顯示內容：

加入了一個表情，顯示的確實一段HTML代碼。這是Django的CSRF防範的一種機制，它會對用戶輸入的字符進行轉義

實際的網頁源碼是這樣的。若是要正常顯示這部分的內容，須要用到Django模板一個過濾器：

 

 

DjangoUeditor源碼地址：https://github.com/zhangfisher/DjangoUeditor

參考：http://coding.imooc.com/class/78.html