常用的富文本編輯器有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>

?

轉載于:https://www.cnblogs.com/Forever77/p/11115532.html

總結

以上是生活随笔為你收集整理的浏览器中插入富文本编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。