# 富文本編輯器
* 借助富文本編輯器，管理員能夠編輯出來一個包含HTML的頁面，從而頁面的顯示效果，可以由管理員定義，而不用完全依賴于前期開發人員
* 此處以tinymce為例，其他富文本編輯器的使用可以自行學習
* 使用編輯器的顯示效果為:
## 下載安裝富文本編輯器
```text
pip install django-tinymce
```
## 應用到項目中
* 在settings.py 中為INSTALLED\_APPS添加編輯器應用
```text
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp',
'tinymce',
]
```
* 在settings.py中添加編輯配置項
```text
# 富文本
TINYMCE_DEFAULT_CONFIG = {
'theme':'advanced',
'width':'600',
'height':'400',
}
```
* 在主urls.py中配置
```text
url(r'^tinymce/',include('tinymce.urls'))
```
* 在應用中定義模型的屬性
```text
from django.db import models
from tinymce.models import HTMLField
class Text(models.Model):
str = HTMLField()
```
* 在后臺管理界面中，就會顯示富文本編輯器，而不是多行文本框
## 自定義使用
* 定義視圖edit，用于顯示編輯器并完成提交
```text
def edit(request):
return render(request,'html/editpage.html')
```
* 配置url
```text
urlpatterns = [
url(r'^edit/$',views.edit,name="edit")
]
```
* 創建模板editpage.html
```text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="/static/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
'mode':'textarea',
'theme':'advanced',
'width':400,
'height':100,
})
</script>
</head>
<body>
<form method="post" action="/saveEdit/">
<input name="name" type="text"/><br />
<textarea name="text">angle</textarea>
<input type="submit" value="submit"/>
</form>
</body>
</html>
```
* 定義視圖saveEdit，接收請求，并更新文本
```text
def saveEdit(request):
name = request.POST['name']
text = request.POST['text']
context = {'name':name,'text':text}
return render(request,'html/saveEdit.html',context)
```
* 添加url項
```text
url(r'^saveEdit/$',views.saveEdit,name="saveEdit"),
```
* 定義模板saveEdit.html
```text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>title:{{ name }}</h1>
<div>
內容:{{ text }}
</div>
</body>
</html>
```
* 富文本模板
```text
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,fullscreen,code",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
//content_css : "/css/style.css",
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Style formats
style_formats : [
{title : 'Bold text', inline : 'strong'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Help', inline : 'strong', classes : 'help'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow'}
],
width: '700',
height: '400'
});
```
