summernote 富文本編輯器限制輸入字符長度

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

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

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

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

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

加入該樣式覆蓋解決

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51793.html

相關(guān)文章

summernote 富文本編輯器限制輸入字符長度

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

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

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

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

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

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

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

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

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

GT 2019-08-19 17:37 評論0 收藏0