最后
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。
分享一些前端面试题以及学习路线给大家
=======================================================================================
不是很推荐
vue-quill-editor， 建议直接用quill就完事了，而且quill的 文档 和api也都是很直接清晰的，直接用的话，更灵活
关于 quill 的使用还是有一些需要注意的地方，下面我们来看一下：
- 安装
npm i quill -S
- 使用 参考这里
1、引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import Quill from 'quill'
2、初始化
定义一个 <div id="quill-editor"></div> 的元素
然后，在 mounted 中调用 initQuill 方法，完成初始化
至于编辑的宽高，你可以在 css 中，自己去设置
// 这是 methods 中的 initQuill 方法
// 你可以在 mounted 中调用它
// 这样就完成了 quill 的初始化
initQuill() {
const quill = new Quill('#quill-editor', {
// 编辑器配置选项
theme: 'snow',
placeholder: 'Compose an epic...',
debug: 'error',
modules: {
toolbar: {
// 工具栏的配置项
container: this.$options.toolbarOptions
}
}
})
this.quill = quill
/**
-
监听富文本变化
-
editor-change 包括 text-change、selection-change
-
你也可以分别监听 text-change 和 selection-change
*/
quill.on('editor-change', this.onEditorChange)
}
=======================================================================
quill 默认的图片上传功能是图片转成 bse64 编码字符串，纯前端玩玩还行；
项目中，这样是不太合适的，而且几十兆的那种大图片，转成 base64 字符串是很长很长的一大串。
1、初始化覆盖默认的上传功能
- 给
image自定义一个上传的方法
modules: {
toolbar: {
container: this.$options.toolbarOptions,
handlers: { // 自定义功能
'image': this.$options.imageFunction
}
},
...
}
2、页面中加入了 Element-UI 的上传功能，然后使用 css让上传按钮不显示；所以，点击富文本中的图片上传，就点击这个上传按钮
// 自定义富文本的图片上传
imageFunction(val) {
if(val) {
document.querySelector('#img-upload input').click()
} else {
this.quill.format('image', false)
}
}
3、上传成功后，就把图片插入到富文本框中
- 所以，这里需要定义
Element-UI的上传组件的on-success方法richUploadSuccess。
<el-upload
id="img-upload"
action="httpbin.org/post"
:multiple="false"
:show-file-list="false"
:on-success="richUploadSuccess"
style="height: 10px;">
然后，我们来写这个 richUploadSuccess 方法
// 富文本中的图片上传
richUploadSuccess(response, file, fileList) {
/**
-
如果上传成功
-
ps：不同的上传接口，判断是否成功的标志也不一样，需要看后端的返回
-
通常情况下，应该有返回上传的结果状态（是否上传成功）
-
以及，图片上传成功后的路径
-
将路径赋值给 imgUrl
*/
if (response.files.file){
let imgUrl = response.files.file
// 获取光标所在位置
let length = this.quill.getSelection().index
// 插入图片，res为服务器返回的图片链接地址
this.quill.insertEmbed(length, 'image', imgUrl)
// 调整光标到最后
this.quill.setSelection(length + 1)
} else {
// 提示信息，需引入Message
this.$message.error('图片插入失败')
}
}
对应的 源码在这里。
=====================================================================
根据 quill 提供的 api，getLength 方法可以用来实现实时字数统计
// 初始化时，已经绑定了 quill 的 editor-change 方法
// quill.on('editor-change', this.onEditorChange)，实时监听富文本内容即可。
// 所以，quill 的内容变动，都会调用这个方法
onEditorChange(eventName, ...args) {
if (eventName === 'text-change') {
// args[0] will be delta
// 获取富文本内容
this.content = document.querySelector('#quill-editor').children[0].innerHTML
} else if (eventName === 'selection-change') {
// args[0] will be old range
}
}
拿到 content 以后，使用 Vue 的 watch 来监听这个 content。
watch: {
content() {
// 富文本内容长度
this.richCurrentLength = this.quill.getLength() - 1
let numWrapper = document.querySelector('.quill-count')
if(this.richCurrentLength > this.richMaxLength) {
numWrapper.style.color = 'red'
} else {
numWrapper.style.color = '#666'
}
}
}
对应的 源码在这里。
===================================================================
quill 默认上传后的图片，不能编辑，不能设置排列方向，为了实现这个功能，我们使用了一个工具包：quill-image-resize-module， 安装并且引入它。npm i quill-image-resize-module -S
然后：
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import Quill from 'quill'
import ImageResize from 'quill-image-resize-module'
最后
资料过多，篇幅有限
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
