本文檔記錄自己的學(xué)習(xí)歷程！
介紹
- Ueditor HTML編輯器是百度開源的在線HTML編輯器,功能非常強大
額外功能
- 解決圖片視頻等無法上傳顯示問題
Ueditor下載地址 https://github.com/wsqy/DjangoUeditor.git
- 解壓后將 DjangoUeditor 文件夾復(fù)制到django項目目錄下，跟app目錄同級
修改app models
- 導(dǎo)入UEditorField 模塊
- 增加需要富文本框的字段
from DjangoUeditor.models import UEditorField
class Post(models.Model):
"""文章"""
STATUS_CHOICES = (
('draft','草稿'),
('published','已發(fā)布'),
)
...
body = UEditorField('內(nèi)容', 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提供了額外的參數(shù)：
toolbars:配置你想顯示的工具欄，取值為mini,normal,full,besttome, 代表小，一般，全部,涂偉忠貢獻的一種樣式。如果默認(rèn)的工具欄不符合您的要求，您可以在settings里面配置自己的顯示按鈕。參見后面介紹。
imagePath:圖片上傳的路徑,如"images/",實現(xiàn)上傳到"{{MEDIA_ROOT}}/images"文件夾
filePath:附件上傳的路徑,如"files/",實現(xiàn)上傳到"{{MEDIA_ROOT}}/files"文件夾
scrawlPath:涂鴉文件上傳的路徑,如"scrawls/",實現(xiàn)上傳到"{{MEDIA_ROOT}}/scrawls"文件夾,如果不指定則默認(rèn)=imagepath
imageManagerPath:圖片管理器顯示的路徑，如"imglib/",實現(xiàn)上傳到"{{MEDIA_ROOT}}/imglib",如果不指定則默認(rèn)=imagepath。
options：其他UEditor參數(shù)，字典類型。參見Ueditor的文檔ueditor_config.js里面的說明。
css:編輯器textarea的CSS樣式
width，height:編輯器的寬度和高度，以像素為單位。
- 初始化數(shù)據(jù)庫
makemigrations
migrate
修改settings文件
- 增加文件上傳路徑配置
MEDIA_URL='/upload/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'upload/')#這個是在瀏覽器上訪問該上傳文件的url的前綴
修改xadmin的配置（如果用admin的話可以忽略）
- 在項目下的xadmin\plugins\路徑下新建ueditor.py腳本,內(nèi)容如下
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") # 自己的靜態(tài)目錄
js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.js") # 自己的靜態(tài)目錄
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靜態(tài)資源路徑（重要）
- 在項目下的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)
結(jié)果
- 重啟項目，在后臺可以看到富文本框就正常了
-
效果圖
image
