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

BearyChat 發(fā)布于2019-08-26 11:34 / 3683人閱讀

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

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

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

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

加入該樣式覆蓋解決

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

OK，this.options.maxTextLength就是我們需要的。于是設置了該參數(shù)，運行之后發(fā)現(xiàn)一個問題，在輸入中文的情況下并沒有生效，只是在英文數(shù)字的時候生效了。在Stack Overflow中查到在初始化的時候設置callback，監(jiān)聽onkeyup事件，獲取當前值，然后判斷長度后重新賦值，嘗試之后發(fā)現(xiàn)替換之后會在末尾出現(xiàn)一個英文，然后在開頭顯示我輸入的漢字。。。。可能是因為重新給div賦值text的時候光標自動到開頭。

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

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

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

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

相關(guān)文章

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

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

young.li 2019-08-01 18:31 評論0 收藏0
summernote(富文本編輯器)將附件與圖片上傳到自己的服務器（vue項目）

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

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

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

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

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

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