2024年Web前端最全Vue使用富文本编辑器_ie vue富文本(2)，快手面试java

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

import {Loading} from ‘element-ui’
import E from ‘wangeditor’
var editor;

export default {
name: “WriteArticle”,
data: function () {
return {
Title:‘’,
Content:‘’
}
},
mounted:function(){
var That = this;
editor = new E(this.$refs.editor);
editor.customConfig = {
onchange:function(html){
That.Content = html
},
uploadImgServer: ‘/api/UploadImg’, // 上传图片到服务器
uploadFileName : ‘Content’, //后端使用这个字段获取图片信息
uploadImgMaxLength : 1 , // 限制一次最多上传 1 张图片
}
editor.create()
}
}

后端node.js

Express.post(‘/UploadImg’,function (Request,Response) {
var From = new Formidable.IncomingForm();
//设置保存 文件路径
var TargetFile = Path.join(__dirname, ‘./Public/’);
From.uploadDir = TargetFile;

From.parse(Request, function (err, fields, files) {
if (err) throw err;
var FilePath = files.Content.path; //此content由前端uploadFileName设置
var NewPath = Path.join(Path.dirname(FilePath), files.Content.name);
FS.rename(FilePath, NewPath, function (err) {
if (err) throw err;
var MyJson = {
errno: 0,
data:[‘http://localhost:8888/’ + files.Content.name]
};
Response.json(MyJson);
});
});
});

### 三：代码高亮


用了wangEditor才发现，3.0版的不支持代码高亮。可是我的应用场景是我的博客，必须要有代码高亮功能，无奈换掉编辑器。


经过一番对比又选了一个叫mavon-editor的基于vue实现的MakeDown编辑器。好处是使用真滴方便，而且可以与别的MarkDown编辑器实现直接复制文本。Github地址如下hinesboy/mavonEditor，按文档操作即可


需要注意的地方是一般使用富文本的都是管理端，客户端拿到MarkDown格式的数据需要使用maked组件转成html格式的数据来展示。客户端还需要引用一个样式如下

还需要在展示数据的容器上加上一个class，如：



#### 结束  

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)



5ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)