Vue 富文本wangEditor3 (自動保存 快捷保存 激活工具欄...

當咱們須要傳遞一段特定的帶文字樣式 如粗體 下劃線 斜體 顏色等這一類的內容給到後臺，這個時候爲了可以統一制定規範 機制 增長項目的複用 易用 好用 性。

我使用到了 富文本編輯器 。這裏使用到的是第三版本 較以往多在事件 樣式 兼容上做區別

 技術 ： Vue + wangEditor3 

首先

咱們須要對富文本編輯器作一個大體的瞭解 認識 知道他的一些事件 和 提供的功能 以及對照本身的項目 取本身須要的東西  工具的產生是爲了高效的工做  不是濫用。

簡介

wangEditor 輕量級 web 富文本編輯器，配置方便，使用簡單。支持 IE10+ 瀏覽器。

初次接觸 必看

 https://www.kancloud.cn/wangfupeng/wangeditor3/332599

安裝 · 使用

vue 中 執行 

npm install npm install wangeditor（全小寫）

　　建立編輯器

css + script 

容器

主要分爲三大部分  最外層box      工具欄box  內容區box

 

最外層包裹

 工具欄

內容區域

 

 script 

引入 

var W = require("wangeditor");
var editor = new W("#toolbar", "#editor");

 配置菜單  可定義本身須要的工具欄  

mounted 下  頁面渲染完以後

 editor.customConfig.colors = ["#f9963b", "#ff0000"];
    editor.customConfig.menus = [
        'head',
        'bold',
        'italic',
        'underline',
        'foreColor',
        'undo'
    ]; 

 

 最後建立

 

上面是最基礎的富文本建立 

當咱們須要 記錄 當前輸入的內容字數 限制字數 以及 說在 富文本編輯內容時進行必定秒數的自動保存 ； 快捷鍵 ctrl + s 保存 ， 工具欄 激活顯示樣式 等 這些基本均可以利用富文本提供的事件來進行開發

如下代碼均在mounted 下編寫

ctrl + s 保存 

點擊富文本 進行一次提示 僅第一次點擊時 進行提示 使用到了jquery 

噹噹前頁面被進行了切換 事件會隨組件的銷燬而被銷燬 所以 再次點擊富文本內容區域 （自身指定的區域） 會再次觸發提示  實則仍是一次 

 

鼠標進入---------------->

 

富文本 onfocus 鼠標進入 事件

富文本 onchange 事件 高頻發生 內容發生改變就會觸發該事件 可設置多條件進行事件控制

我這裏主要是用來 控制一個自動保存的某個狀態 以及 根據內容的變化 實時記錄內容的字數 以此判斷是否超出限制 字數

editor.txt.html()獲取內容區域內容 

實際獲取到的內容區域是帶有標籤符號的原始內容

 

未處理----------------->

這塊真實內容可交由後臺

可是前端須要顯示真實的眼睛看到的內容字數 就不可帶入標籤的長度 所以 封裝一個方法 去除標籤 計算內容的實際長度

 處理後-------------->

 

自動保存  （麻煩點在於 什麼狀況下 啓用 根據項目需求 本身斷定）

總的思路以及應用場景是

當鼠標進入富文本內容區域 

沒有輸入內容時

不啓用！！

輸入了內容以後  設定幾秒後啓動自動保存

輸入時 超過了多少秒後 進行自動保存

當啓用了手動保存 自動保存即停用

當輸入時達到設定時間啓動了自動保存以後  擡手並不啓用輸入後的自動保存

遇到的小問題---------------

因爲富文本編輯器的onchange事件是一個高頻率觸發的事件

即例

事先在onchange裏面
進行一個動做 console 啥啥啥 

而後

當你在編輯器內容區依次輸入 1 2 3  後 擡手

控制檯 會輸出 三次 啥啥啥 

而咱們須要記錄的只是用戶最後的一個擡手動做 

即

只需斷定用戶是最後一次輸入 (內容變化爲最新時 最後一次變化時)

而後

設定一個秒數 在這個設定的時間內 用戶沒有進行操做 便啓動一次自動保存！！！

考慮到瀏覽器性能的優化 不讓瀏覽器由於如此高頻的事件 而形成大量性能損失

在這裏咱們須要用到 防抖函數 

定義：事件觸發屢次後，處理函數只執行一次，且在事件觸發完成操做結束時執行。

原理：對處理函數進行延時操做，若設定的延時到來以前，再次觸發事件，則清除上一次的延時操做定時器，從新定時。

 Vue - lodash - npm

 

lodash

是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。

官網地址：https://www.lodashjs.com/

 

安裝

 

$ npm i -S lodash-webpack-plugin babel-plugin-lodash babel-core babel-loader babel-preset-es2015 webpack

 

 

使用

import lodash from "lodash"

method 做爲一個方法 

 

 

調用的話 可經過watch 觀察某個狀態變化 斷定條件 調用 此方法

 

 輸入時即

 

最後效果

 

 

自動保存   獲取 當前 時分秒 

 

 

 

工具欄激活

 

其實當咱們點擊小工具欄時 打開 Element 能夠看到 當前元素已經添加了活躍狀態class 

 

相對應的 點開他的child  設置一個你中意的顏色 並將層級提升到最高 覆蓋原色 便可 

 

基本功能即是這些 後續擴展 繼續更新

最近腦海裏常蹦出兩個詞

戀愛 婚姻 

只得出一個經典的結論 

即

戀愛是兩我的的事情

婚姻是兩個家庭的事情

.....

細想幾番

確是如此

兩人契合已經是難事

家庭契合

更是難上加難

男上加男

溝通

是我認爲在兩個家庭中面臨的首要問題

何解

惟有找各類成分差很少相似的兩個家庭

組成一個家庭

在抖音上聽過這麼一句話 

結婚

就像經營公司

雙方各派一個法人表明

一拍即合 

開一個公司

而後生下的兒子 

即 產品

經營個5/6吧

如果經營不佳

公司破產倒閉

法人離開

剩下產品 

何去何從

。。。。。

 

這其中

愛情

情

充當什麼角色

佔多大股........

呢--------------

 

最後

笑口常開：）

好彩天然來：）

 

祝君好運~~~~