常用的富文本編輯器有CKEditor、UEEditor、TinyEditor、KindEditor等、以下以kindeditor編輯器的使用為例。

?

1.官網(wǎng)下載KindEditor編輯器http://kindeditor.net/down.php，

當(dāng)前最新版本為4.1.11，解壓縮后放入項(xiàng)目的static目錄，作為js插件引用。解壓后的目錄結(jié)構(gòu)如下。

?

2.editor模板文件，在模板中引入kindeditor插件，并創(chuàng)建一個(gè)textarea標(biāo)簽，然后通過(guò)KindEditor.create創(chuàng)建一個(gè)對(duì)象指向textarea標(biāo)簽。

<p>生成富文本編輯器</p> <textarea name="content" id="content"></textarea> <!--創(chuàng)建textarea標(biāo)簽--> <script src="/static/plugins/kindeditor/kindeditor-all-min.js"></script> <!--引入kindeditor插件--> <script>editor = KindEditor.create('#content', { //通過(guò)KindEditor創(chuàng)建對(duì)象，#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>

創(chuàng)建文本編輯器對(duì)象的方法editor = KindEditor.create('textarea標(biāo)簽',{ '初始化參數(shù)' , items:['編輯器上顯示的控件'] } )

textarea標(biāo)簽：表示創(chuàng)建的編輯器對(duì)象指向改textarea標(biāo)簽，即textarea標(biāo)簽會(huì)顯示為一個(gè)編輯器

create的第二個(gè)參數(shù)為一個(gè)字典，items表示設(shè)置哪些控件會(huì)顯示在編輯器上，其余參數(shù)表示對(duì)編輯器的初始化操作。參見(jiàn)http://kindeditor.net/docs/option.html

初始化參數(shù)：

width、height：編輯器寬度、長(zhǎng)度

themeType：主題風(fēng)格，在解壓后的文件夾themes中，包含default和simple兩種風(fēng)格的css文件，可通過(guò)link引入css文件并在themeType指定

resizeType: 編輯器調(diào)整大小，值為0表示無(wú)法調(diào)整，1可以改變高度，2可以同時(shí)改變高度和寬度

allowPreviewEmoticons: 是否允許預(yù)覽表情，true表示可以預(yù)覽，需要在items中添加emoticons，true表示鼠標(biāo)放在某個(gè)表情上會(huì)顯示預(yù)覽

allowImageUpload:是否允許上傳本地圖片，true表示允許，需要在items中添加image，false只能上傳網(wǎng)絡(luò)圖片

filePostName: 上傳文件的類型，默認(rèn)為圖片imageFile

uploadJson:文件上傳后的處理函數(shù)

?

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表示將輸入內(nèi)容顯示為html格式

code表示插入程序代碼

map表示插入google地圖，baidumap表示插入百度地圖

??

對(duì)模板的處理

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函數(shù)表示對(duì)圖片上傳的處理，如果dic的error為0表示上傳成功，會(huì)將url指定的圖片顯示到編輯器中預(yù)覽，如果值為1表示失敗，會(huì)將message返回，并彈出錯(cuò)誤提示框，提示框內(nèi)容為message。

?

在kindeditor編輯器中，可通過(guò)edirot.html()獲取編輯器中已輸入的所有內(nèi)容。

kindeditor提供了一種方法，在頁(yè)面加載完成后生成編輯器，并且不依賴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>

?

轉(zhuǎn)載于:https://www.cnblogs.com/Forever77/p/11115532.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。