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吧

若是經營不佳

公司破產倒閉

法人離開

剩下產品 

何去何從

。。。。。

 

這其中

愛情

情

充當什么角色

占多大股........

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

 

最后

笑口常開：）

好彩自然來：）

 

祝君好運~~~~