常用的富文本編輯器有CKEditor、UEEditor、TinyEditor、KindEditor等、以下以kindeditor編輯器的使用為例。
?
1.官網下載KindEditor編輯器http://kindeditor.net/down.php，
當前最新版本為4.1.11，解壓縮后放入項目的static目錄，作為js插件引用。解壓后的目錄結構如下。
?
2.editor模板文件，在模板中引入kindeditor插件，并創建一個textarea標簽，然后通過KindEditor.create創建一個對象指向textarea標簽。
<p>生成富文本編輯器</p> <textarea name="content" id="content"></textarea> <!--創建textarea標簽--> <script src="/static/plugins/kindeditor/kindeditor-all-min.js"></script> <!--引入kindeditor插件-->
<script>editor = KindEditor.create('#content', { //通過KindEditor創建對象，#content表示指向textarea，resizeType: 2,allowPreviewEmoticons: true,allowImageUpload: true,filePostName: 'imageFile',uploadJson: '/tupian',items: ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline','strikethrough','removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist','insertunorderedlist', '|', 'emoticons', 'image','link'],}) </script>
創建文本編輯器對象的方法editor = KindEditor.create('textarea標簽',{ '初始化參數' , items:['編輯器上顯示的控件'] } )
textarea標簽：表示創建的編輯器對象指向改textarea標簽，即textarea標簽會顯示為一個編輯器
create的第二個參數為一個字典，items表示設置哪些控件會顯示在編輯器上，其余參數表示對編輯器的初始化操作。參見http://kindeditor.net/docs/option.html
初始化參數：
width、height：編輯器寬度、長度
themeType：主題風格，在解壓后的文件夾themes中，包含default和simple兩種風格的css文件，可通過link引入css文件并在themeType指定
resizeType: 編輯器調整大小，值為0表示無法調整，1可以改變高度，2可以同時改變高度和寬度
allowPreviewEmoticons: 是否允許預覽表情，true表示可以預覽，需要在items中添加emoticons，true表示鼠標放在某個表情上會顯示預覽
allowImageUpload:是否允許上傳本地圖片，true表示允許，需要在items中添加image，false只能上傳網絡圖片
filePostName: 上傳文件的類型，默認為圖片imageFile
uploadJson:文件上傳后的處理函數
?
items：
items: [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright','justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/','formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage','flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak','anchor', 'link', 'unlink', '|', 'about']
顯示效果如下：
其中source表示將輸入內容顯示為html格式
code表示插入程序代碼
map表示插入google地圖，baidumap表示插入百度地圖
??
對模板的處理
def editor(req):return render(req,'editor.html')def tupian(req):print(req.POST)print(req.FILES)dic = {'error':0,'url':'/static/img/1.jpg','message':'something wrong...'}return JsonResponse(dic)
其中tupian函數表示對圖片上傳的處理，如果dic的error為0表示上傳成功，會將url指定的圖片顯示到編輯器中預覽，如果值為1表示失敗，會將message返回，并彈出錯誤提示框，提示框內容為message。
?
在kindeditor編輯器中，可通過edirot.html()獲取編輯器中已輸入的所有內容。
kindeditor提供了一種方法，在頁面加載完成后生成編輯器，并且不依賴jQuery。
<textarea name="content" id="content"></textarea> <input type="button" οnclick="submit()" value="‘提交"></input> <script src="/static/plugins/kindeditor/kindeditor-all-min.js"></script> <script>var editor = nullKindEditor.ready(function () {editor = KindEditor.create('#content', {······})})function submit() {console.log(editor.html())} </script>
?
