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吧

若是经营不佳

公司破产倒闭

法人离开

剩下产品

何去何从

。。。。。

这其中

爱情

情

充当什么角色

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

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

最后

笑口常开：）

好彩自然来：）

祝君好运~~~~