summernote 富文本編輯器限制輸入字符長(zhǎng)度

young.li 發(fā)布于2019-08-01 18:31 / 2365人閱讀

摘要：在中查到在初始化的時(shí)候設(shè)置，監(jiān)聽(tīng)事件，獲取當(dāng)前值，然后判斷長(zhǎng)度后重新賦值，嘗試之后發(fā)現(xiàn)替換之后會(huì)在末尾出現(xiàn)一個(gè)英文，然后在開(kāi)頭顯示我輸入的漢字。。。。

項(xiàng)目中需要一個(gè)比較簡(jiǎn)單的富文本編輯器，于是選中了summernote 。
雖然比較輕量，但是在開(kāi)發(fā)中也遇到了幾個(gè)問(wèn)題，在此記錄一下。

1：樣式和bootstrap沖突，初始化之后顯示為：

.note-editor .note-toolbar .btn-group {
    float: none !important;
    margin: 0 5px;
}

加入該樣式覆蓋解決

2：限制輸入長(zhǎng)度，查看了官網(wǎng)發(fā)現(xiàn)并沒(méi)有說(shuō)到這個(gè)，經(jīng)過(guò)baidu，Google，也都沒(méi)有發(fā)現(xiàn)解決方案，于是研究了下源碼

OK，this.options.maxTextLength就是我們需要的。于是設(shè)置了該參數(shù)，運(yùn)行之后發(fā)現(xiàn)一個(gè)問(wèn)題，在輸入中文的情況下并沒(méi)有生效，只是在英文數(shù)字的時(shí)候生效了。在Stack Overflow中查到在初始化的時(shí)候設(shè)置callback，監(jiān)聽(tīng)onkeyup事件，獲取當(dāng)前值，然后判斷長(zhǎng)度后重新賦值，嘗試之后發(fā)現(xiàn)替換之后會(huì)在末尾出現(xiàn)一個(gè)英文，然后在開(kāi)頭顯示我輸入的漢字。。。?？赡苁且?yàn)橹匦陆odiv賦值text的時(shí)候光標(biāo)自動(dòng)到開(kāi)頭。

( ?? .? ?? ) mmp，放棄了。。。

云服務(wù)器 GPU云服務(wù)器富文本編輯器富文本web編輯器 iOS限制輸入長(zhǎng)度 php字符長(zhǎng)度限制

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/51793.html

相關(guān)文章

summernote 富文本編輯器限制輸入字符長(zhǎng)度

摘要：在中查到在初始化的時(shí)候設(shè)置，監(jiān)聽(tīng)事件，獲取當(dāng)前值，然后判斷長(zhǎng)度后重新賦值，嘗試之后發(fā)現(xiàn)替換之后會(huì)在末尾出現(xiàn)一個(gè)英文，然后在開(kāi)頭顯示我輸入的漢字。。。。項(xiàng)目中需要一個(gè)比較簡(jiǎn)單的富文本編輯器，于是選中了summernote 。雖然比較輕量，但是在開(kāi)發(fā)中也遇到了幾個(gè)問(wèn)題，在此記錄一下。 1：樣式和bootstrap沖突，初始化之后顯示為：showImg(https://segmentfau...

BearyChat 2019-08-26 11:34 評(píng)論0 收藏0
summernote(富文本編輯器)將附件與圖片上傳到自己的服務(wù)器（vue項(xiàng)目）

摘要：將創(chuàng)建好的對(duì)象，再插入到編輯器中注意這里不用方法因?yàn)樗麜?huì)額外的標(biāo)簽具體查看，另外當(dāng)選取本地文件的時(shí)候，此時(shí)的富文本編輯器會(huì)失去焦點(diǎn)，插入新的節(jié)點(diǎn)的時(shí)候，總是從起始點(diǎn)開(kāi)始插入，而非從當(dāng)前光標(biāo)的位置進(jìn)行插入。 1.上傳圖片至自己的服務(wù)器（這個(gè)官方都有例子，重點(diǎn)介紹附件上傳）圖片上傳官方網(wǎng)址 // onChange callback $(#summernote).summernote({ ...

wqj97 2019-08-02 12:03 評(píng)論0 收藏0
summernote(富文本編輯器)將附件與圖片上傳到自己的服務(wù)器（vue項(xiàng)目）

摘要：將創(chuàng)建好的對(duì)象，再插入到編輯器中注意這里不用方法因?yàn)樗麜?huì)額外的標(biāo)簽具體查看，另外當(dāng)選取本地文件的時(shí)候，此時(shí)的富文本編輯器會(huì)失去焦點(diǎn)，插入新的節(jié)點(diǎn)的時(shí)候，總是從起始點(diǎn)開(kāi)始插入，而非從當(dāng)前光標(biāo)的位置進(jìn)行插入。 1.上傳圖片至自己的服務(wù)器（這個(gè)官方都有例子，重點(diǎn)介紹附件上傳）圖片上傳官方網(wǎng)址 // onChange callback $(#summernote).summernote({ ...

xiaoxiaozi 2019-08-26 13:22 評(píng)論0 收藏0
基于SpringBoot的仿微信掃描登陸+輕量級(jí)富文本編輯->文章系統(tǒng)

摘要：微信的掃碼的登陸是要企業(yè)號(hào)的，對(duì)于一個(gè)學(xué)生狗哪來(lái)企業(yè)號(hào)，自己有個(gè)測(cè)試號(hào)內(nèi)心已十分滿足。自己決心做一個(gè)仿微信掃碼登陸，對(duì)，你沒(méi)看錯(cuò)，就是仿，堅(jiān)信高仿出奇跡。前言點(diǎn)擊訪問(wèn)項(xiàng)目鏈接看到慕課網(wǎng)和segmentfault的發(fā)表手記和發(fā)表文章是Markdown 編輯器，說(shuō)實(shí)話，對(duì)于第一次用的我真的很不習(xí)慣。不過(guò)對(duì)于我們代碼開(kāi)發(fā)者來(lái)寫挺好的，也就對(duì)我們這些開(kāi)發(fā)者述寫自己的代碼故事好點(diǎn)而已。這邊我...

MyFaith 2019-08-15 12:34 評(píng)論0 收藏0
代碼小記：tinymce使用心得

摘要：簡(jiǎn)單使用直接使用可以使用這種方式，方便快捷。但是滿足不了大部分人，你們需要的是自定義使用手冊(cè)傳送門速查傳送門手腳架提供給看完文檔后無(wú)從下手的伙伴，這配置夠用了。本地化語(yǔ)言包下載傳送門語(yǔ)言包下載后放到目錄下方可使用。序公司后臺(tái)的編輯器從我剛接觸的bootstrap-wysihtml5更新到summernote，后來(lái)發(fā)現(xiàn)summernote也是巨坑無(wú)比（坑：粘貼沒(méi)有過(guò)濾、插件結(jié)構(gòu)最近又...

GT 2019-08-19 17:37 評(píng)論0 收藏0