當咱們須要傳遞一段特定的帶文字樣式 如粗體 下劃線 斜體 顏色等這一類的內容給到後臺，這個時候爲了可以統一制定規範 機制 增長項目的複用 易用 好用 性。javascript
我使用到了 富文本編輯器 。這裏使用到的是第三版本 較以往多在事件 樣式 兼容上做區別css
技術 ： Vue + wangEditor3 html
首先前端
咱們須要對富文本編輯器作一個大體的瞭解 認識 知道他的一些事件 和 提供的功能 以及對照本身的項目 取本身須要的東西 工具的產生是爲了高效的工做 不是濫用。vue
簡介java
wangEditor 輕量級 web 富文本編輯器，配置方便，使用簡單。支持 IE10+ 瀏覽器。jquery
初次接觸 必看webpack
https://www.kancloud.cn/wangfupeng/wangeditor3/332599web
安裝 · 使用npm
vue 中 執行
npm install npm install wangeditor（全小寫）
建立編輯器
css + script
容器
主要分爲三大部分 最外層box 工具欄box 內容區box
最外層包裹
工具欄
內容區域
script
引入
var W = require("wangeditor"); var editor = new W("#toolbar", "#editor");
配置菜單 可定義本身須要的工具欄
editor.customConfig.colors = ["#f9963b", "#ff0000"]; editor.customConfig.menus = [ 'head', 'bold', 'italic', 'underline', 'foreColor', 'undo' ];
最後建立
上面是最基礎的富文本建立
當咱們須要 記錄 當前輸入的內容字數 限制字數 以及 說在 富文本編輯內容時進行必定秒數的自動保存 ； 快捷鍵 ctrl + s 保存 ， 工具欄 激活顯示樣式 等 這些基本均可以利用富文本提供的事件來進行開發
如下代碼均在mounted 下編寫
ctrl + s 保存
點擊富文本 進行一次提示 僅第一次點擊時 進行提示 使用到了jquery
噹噹前頁面被進行了切換 事件會隨組件的銷燬而被銷燬 所以 再次點擊富文本內容區域 （自身指定的區域） 會再次觸發提示 實則仍是一次
鼠標進入---------------->
富文本 onfocus 鼠標進入 事件
富文本 onchange 事件 高頻發生 內容發生改變就會觸發該事件 可設置多條件進行事件控制
我這裏主要是用來 控制一個自動保存的某個狀態 以及 根據內容的變化 實時記錄內容的字數 以此判斷是否超出限制 字數
處理後-------------->
自動保存 （麻煩點在於 什麼狀況下 啓用 根據項目需求 本身斷定）
總的思路以及應用場景是
當鼠標進入富文本內容區域
沒有輸入內容時
不啓用！！
輸入了內容以後 設定幾秒後啓動自動保存
輸入時 超過了多少秒後 進行自動保存
當啓用了手動保存 自動保存即停用
當輸入時達到設定時間啓動了自動保存以後 擡手並不啓用輸入後的自動保存
遇到的小問題---------------
因爲富文本編輯器的onchange事件是一個高頻率觸發的事件
即例
事先在onchange裏面
進行一個動做 console 啥啥啥
而後
當你在編輯器內容區依次輸入 1 2 3 後 擡手
控制檯 會輸出 三次 啥啥啥
而咱們須要記錄的只是用戶最後的一個擡手動做
即
只需斷定用戶是最後一次輸入 (內容變化爲最新時 最後一次變化時)
而後
設定一個秒數 在這個設定的時間內 用戶沒有進行操做 便啓動一次自動保存！！！
考慮到瀏覽器性能的優化 不讓瀏覽器由於如此高頻的事件 而形成大量性能損失
在這裏咱們須要用到 防抖函數
定義：事件觸發屢次後，處理函數只執行一次，且在事件觸發完成操做結束時執行。
原理：對處理函數進行延時操做，若設定的延時到來以前，再次觸發事件，則清除上一次的延時操做定時器，從新定時。
import lodash from "lodash"
method 做爲一個方法
調用的話 可經過watch 觀察某個狀態變化 斷定條件 調用 此方法
輸入時即
最後效果
自動保存 獲取 當前 時分秒
工具欄激活
其實當咱們點擊小工具欄時 打開 Element 能夠看到 當前元素已經添加了活躍狀態class
相對應的 點開他的child 設置一個你中意的顏色 並將層級提升到最高 覆蓋原色 便可
基本功能即是這些 後續擴展 繼續更新
最近腦海裏常蹦出兩個詞
戀愛 婚姻
只得出一個經典的結論
即
戀愛是兩我的的事情
婚姻是兩個家庭的事情
.....
細想幾番
確是如此
兩人契合已經是難事
家庭契合
更是難上加難
男上加男
溝通
是我認爲在兩個家庭中面臨的首要問題
何解
惟有找各類成分差很少相似的兩個家庭
組成一個家庭
在抖音上聽過這麼一句話
結婚
就像經營公司
雙方各派一個法人表明
一拍即合
開一個公司
而後生下的兒子
即 產品
經營個5/6吧
如果經營不佳
公司破產倒閉
法人離開
剩下產品
何去何從
。。。。。
這其中
愛情
情
充當什麼角色
佔多大股........
呢--------------
最後
笑口常開：）
好彩天然來：）
祝君好運~~~~