我的博客開發之xadmin與ueditor集成

項目源碼下載：http://download.vhosts.cn

 

    1. xadmin 添加ueditor 插件

        vim extra_apps\xadmin\plugins\ueditor.py #沒有改文件，就新建文件

#!/usr/bin/env python  
# -*- coding:utf-8 -*-
__author__ = 'cpy'
import xadmin
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_field_style(self, attrs, db_field, style, **kwargs):
        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 = '<script type="text/javascript" src="%s"></script>' % (
            settings.STATIC_URL + "ueditor/ueditor.config.js")  #DjangoUeditor靜態文件
        js += '<script type="text/javascript" src="%s"></script>' % (
            settings.STATIC_URL + "ueditor/ueditor.all.js")  #DjangoUeditor靜態文件
        nodes.append(js)
xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)

　　

# 此處特別說明下settings.STATIC_URL  和 STATICFILES_DIRS 對應的項目文件位置：

 

        STATIC_URL 指向的是全部註冊過的app 中的指定目錄，針對對象爲app 

 

        例如 settings.STATIC_URL配置爲：

            STATIC_URL = '/static/' # 則表示：http://xxxxxx/static 連接指向全部app下 static 目錄，DjangoUeditor app也是項目中的註冊app ，因此此處extra_apps\DjangoUeditor\static 目錄能夠直接被STATIC_URL 識別。

 

 

        STATICFILES_DIRS 指向的是項目通用靜態資源，通常不在app中，而是在項目根目錄下。

 

        例如 setting.STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'),] 則指向項目根目錄下static文件夾，頁面模板中{% load staticfiles %} 就是表示引用項目根目錄下static文件夾，因此能夠直接輸入去除static 目錄以上部分的路徑，模板仍然能夠識別。

 

　　

  2. 添加註冊 ueditor 模塊

 

        vim extra_apps\xadmin\plugins\__init__.py # 添加剛剛新增的ueditor

 

        

 

    3.  添加視頻播放樣式、代碼高亮樣式 和相應js 文件

        在模板文件中引入

<!-- 引入視頻html標籤識別，支持視頻播放 -->
<script src="{% static 'ueditor/third-party/video-js/video.js' %}"></script>
<script src="{% static 'ueditor/ueditor.parse.js' %}"></script>
<!-- 引用ueditor js ,保障前臺頁面代碼高亮 -->
<script src="{% static 'ueditor/third-party/SyntaxHighlighter/shCore.js' %}"></script>
<!-- 引入視頻html標籤識別，支持視頻播放 -->
<link type="text/css" rel="stylesheet" href="{% static 'ueditor/third-party/video-js/video-js.css' %}"/>
<!-- ueditor css 樣式,用於前臺代碼高亮 -->
<link type="text/css" rel="stylesheet" href="{% static 'ueditor/third-party/SyntaxHighlighter/shCoreDefault.css' %}">

　　

　　4. 修改ueditor 上傳視頻文件的位置：

 

        djangoueditor 默認保存文件只提供了imagePath 和filePath的保存位置。因此此處將ueditor保存文件的views 作以下修改

        

    　4.1 修改UploadFile(request) 函數，在檢測完成後寫入文件時，在保存文件的函數中傳入action

   

    

      4.2  修改保存文件函數，判斷傳來的action參數是否爲視頻內容,若是是，將默認路徑改成media\video

 

    

    

    4.3 修改UploadFile(request) 函數， 將action == 'uploadvideo' 的視頻保存完成後返回路徑加入video 目錄：