Django中使用富文字編輯器Uedit

官方github（有詳細的安裝使用教程）：

...

'djangoueditor',

...]

from django.conf.urls import url, include

urlpatterns =[

#富文字相關url
url(r'
^ueditor/
', include('
djangoueditor.urls
')),
]

from djangoueditor.models import

ueditorfield
class
articles(models.model):
...content = ueditorfield(width=1200, height=600, imagepath="
article/ueditor/",
filepath="
article/ueditor/
",verbose_name=u"
文章內容")
...

#

這樣就指定了course的detail欄位使用ueditor富文字編輯器
class
articlesadmin(object):
...style_fields = 

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':
ifisinstance(db_field, ueditorfield):
widget =db_field.formfield().widget
param ={}
param.update(widget.ueditor_settings)
param.update(widget.attrs)
return 
return
attrs
defblock_extrahead(self, context, nodes):
js = '
' % (settings.static_url + "
ueditor/ueditor.config.js")
js += '
' % (settings.static_url + "
ueditor/ueditor.all.min.js")
xadmin.site.register_plugin(ueditorplugin, updateadminview)
xadmin.site.register_plugin(ueditorplugin, createadminview)

plugins =(

...'ueditor',
)

在html頁面中，django處於安全考慮，將文字內容預設轉義，我們需要關閉

來正常輸出我們的文章

}

1.  &160#;不斷行的空白（1個字元寬度）

2.  &8194#;半個空白（1個字元寬度）

3.  &8195#;乙個空白（2個字元寬度）

4.  &8201#;窄空白（小於1個字元寬度）

平時一般用的是 但是在中文中也許有時候更適合用 

記錄一下，空格的轉義字元分為如下幾種：

1.  &160#;不斷行的空白（1個字元寬度）

2.  &8194#;半個空白（1個字元寬度）

3.  &8195#;乙個空白（2個字元寬度）

4.  &8201#;窄空白（小於1個字元寬度）

平時一般用的是 但是在中文中也許有時候更適合用 

django 富文字編輯器

1.安裝 pip install django tinymce 安裝完成後可以使用在admin管理中，也可以自定義表中 2.配置 tinymce 並在setting.py中新增編輯器配置 tinymce default config 在專案中urls.py中配置編輯器url urlpatterns ...

vue中使用富文字編輯器

前端使用富文字編輯器的外掛程式有很多，今天獻上wangeditor的使用教程，教你如何在vue中使用富文字編輯器 先敬上官網 wangeditor是乙個萌新富文字編輯器，基於js和css，重點在於它輕量，如果你需要的功能不是很複雜，那麼選它沒錯了，剛好能滿足你！cdn使用 npm i wangedi...

專案中使用富文字編輯器

例 編輯器有很多可自定義的引數項，在例項化的時候可以傳入給編輯器，詳詢 api文件 this.editor window.ue.geteditor container this.editor.addlistener contentchange 效果展示 this.editor.txt.html sa...