關於JQuery取textarea內容的問題

原生

使用jq直接取id 然後:
- 調用html()/text() 只能拿到初始值 更改後的值拿不到
- 調用val() 就能拿到實時的值

使用NicEdit富文本編輯器

使用 jqury 2.2.2 +nicEdit

<form id="contents" action="../teacher/topic/add" method="post">
        <input type="text" name="name" placeholder="課題名稱" class="title"/>
        <textarea style="width: 100%; height: 400px;" name="attention"></textarea>
        <button class="submit" type="button">保存</button>
    </form>

使用了nicEdit作爲輕量的富文本編輯器
然後想ajax提交
然後悲劇就來了….
取id各種方法取不到值 val() html() text()

然後在瀏覽器查看元素定位了下,textarea被display了並且插入了一個新的div.
雖然不知道這是什麼騷操作,但是看到了那個div的class是 nicEdit-main

然後就 $(".nicEdit-main").html() 拿到了值
但是….還是有問題 拿到的值是 html代碼 進行拼接發送後 後臺SpringMVC拿不到完整的值(空格影響的) 繼續解決…

最終還是被我搞定了:
$("#contents").serialize()+encodeURIComponent($(".nicEdit-main").html().toString())
只要編碼成URI就可以了後臺也能正常取值

參考博客: js中進行字符串轉碼

後續

• 搜了一波富文本編輯器 發現大多都是通過禁用textarea然後插入div來做的
• 然後發現了這個 wangEditor 富文本編輯器, 好用多了
• 然後結合LayUI又出來一個問題:
  
  • layui.css文件默認將所有li標籤樣式清除, 這個富文本編輯器又要用到ol 和 ul 所以問題又來了.
  • 最後是自己寫CSS 將div下的所有li標籤自己手動設置默認樣式

.main ul li{
    list-style-type: square;
}
.main ol li{
    list-style: decimal;
}

弄到肝疼..一個主攻後臺的,死在了前端.希望不要再出亂七八糟的bug了