#### 本文檔記錄自己的學習歷程！

#### 介紹

- Ueditor HTML編輯器是百度開源的在線HTML編輯器,功能非常強大

#### 額外功能

- 解決圖片視頻等無法上傳顯示問題

#### Ueditor下載地址 https://github.com/wsqy/DjangoUeditor.git

- 解壓后將 DjangoUeditor 文件夾復制到django項目目錄下，跟app目錄同級

#### 修改app models

- 導入UEditorField 模塊

- 增加需要富文本框的字段

```

from DjangoUeditor.models import UEditorField

class Post(models.Model):

"""文章"""

STATUS_CHOICES = (

('draft','草稿'),

('published','已發布'),

)

...

body = UEditorField('內容', height=300, width=800,max_length=1024000000000,

default=u'', blank=True, imagePath="images/",

toolbars='besttome', filePath='files/')

...

```

- 說明：

UEditorField繼承自models.TextField,因此你可以直接將model里面定義的models.TextField直接改成UEditorField即可。

UEditorField提供了額外的參數：

toolbars:配置你想顯示的工具欄，取值為mini,normal,full,besttome, 代表小，一般，全部,涂偉忠貢獻的一種樣式。如果默認的工具欄不符合您的要求，您可以在settings里面配置自己的顯示按鈕。參見后面介紹。

imagePath:圖片上傳的路徑,如"images/",實現上傳到"{{MEDIA_ROOT}}/images"文件夾

filePath:附件上傳的路徑,如"files/",實現上傳到"{{MEDIA_ROOT}}/files"文件夾

scrawlPath:涂鴉文件上傳的路徑,如"scrawls/",實現上傳到"{{MEDIA_ROOT}}/scrawls"文件夾,如果不指定則默認=imagepath

imageManagerPath:圖片管理器顯示的路徑，如"imglib/",實現上傳到"{{MEDIA_ROOT}}/imglib",如果不指定則默認=imagepath。

options：其他UEditor參數，字典類型。參見Ueditor的文檔ueditor_config.js里面的說明。

css:編輯器textarea的CSS樣式

width，height:編輯器的寬度和高度，以像素為單位。

- 初始化數據庫

```

makemigrations

migrate

```

#### 修改settings文件

- 增加文件上傳路徑配置

```

MEDIA_URL='/upload/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'upload/')#這個是在瀏覽器上訪問該上傳文件的url的前綴

```

#### 修改xadmin的配置(如果用admin的話可以忽略)

- 在項目下的xadmin\plugins\路徑下新建ueditor.py腳本,內容如下

```

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 = '' % (settings.STATIC_URL + "ueditor/ueditor.config.js") # 自己的靜態目錄

js += '' % (settings.STATIC_URL + "ueditor/ueditor.all.js") # 自己的靜態目錄

nodes.append(js)

xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)

xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)

```

- 在xadmin\plugins\路徑下的__init__.py文件下的PLUGINS項添加ueditor，如下最后一行為新增的

```

E:\items\blog_project\xadmin\plugins\__init__.py

PLUGINS = (

'actions',

'filters',

'bookmark',

'export',

'layout',

'refresh',

'details',

'editable',

'relate',

'chart',

'ajax',

'relfield',

'inline',

'topnav',

'portal',

'quickform',

'wizard',

'images',

'auth',

'multiselect',

'themes',

'aggregation',

'mobile',

'passwords',

'sitemenu',

'language',

'quickfilter',

'sortablelist',

'importexport',

'ueditor',

)

```

#### 更改DjangoUeditor靜態資源路徑(重要)

- 在項目下的static目錄下新建**ueditor**目錄

- 把DjangoUeditor目錄下的ueditor目錄下的js文件移動到項目的static目錄下的ueditor里

#### 修改項目urls文件

- 以下為新增項

```

from django.conf.urls import url,include

...

import xadmin

import DjangoUeditor

urlpatterns = [

url(r'^xadmin/', xadmin.site.urls),

...

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

]

from django.conf import settings

if settings.DEBUG:

from django.conf.urls.static import static

urlpatterns += static(

settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

```

#### 結果

- 重啟項目，在后臺可以看到富文本框就正常了

- 效果圖


總結

以上是生活随笔為你收集整理的django html文本编辑器,django xadmin 集成DjangoUeditor富文本编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。