轉：Django使用Djangoueditor富文字編輯器
Django使用Djangoueditor富文字編輯器
——————————————————————————————————————
第一步：
- 下載Djangoueditor壓縮包，將包解壓放到專案目錄資料夾下
- 下載地址：https://github.com/zhangfisher/DjangoUeditor
第二步：
- Python安裝DjangoUeditor： pip install DjangoUeditor
第三步：
配置檔案settings.py中註冊DjangoUeditor
程式碼：
INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'app01', 'tinymce', 'DjangoUeditor', )
第四步：
配置DjangoUeditor相對應的url，在專案的主url檔案中新增
程式碼：
urlpatterns = [ url(r'^admin/', include(admin.site.urls)), url(r'^ueditor/', include('DjangoUeditor.urls')), ]
第五步（後臺使用）：django自帶後臺admin使用
程式碼：
from DjangoUeditor.models import UEditorField
class News(models.Model):
newscontent_djueditor = UEditorField( u'內容', height=100, width=500, default='test', toolbars='full'
)
注意：DjangoUeditor需要使用到media路徑的配置******（這個很重要）******
MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media') MEDIA_DIRS = ( os.path.join(BASE_DIR, 'media')
)
第六步：
以上步驟實現完成後進入到django後臺頁面找到對應的表新增內容就能看到相應的djangoueditor編輯器的頁面直接進行操作；
第七步（自建後臺頁面）：我這裡使用的是django的表單不是html的表單
程式碼：
from DjangoUeditor.forms import UEditorField class DjangoueditorForm(forms.Form): content = UEditorField( "", initial="", width=800, height=200, toolbars='mini', imagePath='ueimages/', # 上傳圖片儲存的路徑，不設定的話預設是配置檔案中MEDIA_ROOT路徑 filePath='files_ue/'
)
第八步(檢視函式中新增業務邏輯)：
程式碼：
@csrf_exempt def addnews(request, nid): forms = DjangoueditorForm() return render(request, 'app01/addnews.html', {'forms': forms})
第九步（前端頁面業務邏輯）：
程式碼：
{% block forms_style %}
{{ forms.media }} {# 這裡是載入djangoueditor相關的js、css檔案，否則頁面不顯示富文字編輯器 #} {% endblock %}
<form action="" method="post">
<div class="formRow"> <label>內容:</label> <div class="formRight"> {{ forms }} </div> <div class="clear"></div>
</div>
</form>
第十步:上傳圖片和檔案後富文字編輯器Djangoueditor中圖片和檔案不顯示的原因
程式碼：
# 新增配置檔案這裡如果不新增圖片和檔案不顯示
MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media') MEDIA_DIRS = ( os.path.join(BASE_DIR, 'media')
)