2024年Web前端最新Vue使用富文本编辑器_ie vue富文本(1)，软件开发项目经理面试题

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

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

本人用vue使用富文本编辑器踩了很多坑，特记下供大家借鉴。

一.选取编辑器

刚开始使用的是kindeditor，在npm社区中找到了适用于vue的版本vue-kindeditor。存在如下缺陷：文档不全、网上资料不全、npm社区实例过于简单、上传图片不能控制图片尺寸。

最终换用了wangEditor，优点：文档齐全（有具体vue用法实例）、网上资料多、上传图片可以控制尺寸。

个人推荐wangEditor，官网wangEditor - 轻量级web富文本编辑器

二：实例代码

前端vue

html:
<div class="ArticleDetail">
  <div ref="editor" style="text-align:left"></div>
</div>

js:

<script>
  import axios from 'axios';
  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()
    }
  }
</script>

后端node.js

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



###  最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

![](https://img-blog.csdnimg.cn/img_convert/793958e2fb85784f9279e6e42c5c057f.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/fd04c47e7e708829eaccc18c1ca09321.webp?x-oss-process=image/format,png)


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

14919032552)]


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