富文本+图片删除修改直观

package.json

@@ -18,7 +18,8 @@
     "vue": "^2.6.10",
     "vue-meta": "^2.2.0",
     "vue-router": "^3.0.3",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "wangeditor": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.9.0",

src/components/editor/wang-editor.vue

@@ -0,0 +1,78 @@
+<template>
+  <div ref="editor" style="text-align:left"></div>
+</template>
+<script>
+import E from 'wangeditor';
+
+const menus = [
+  'head', // 标题
+  'bold', // 粗体
+  'fontSize', // 字号
+  'fontName', // 字体
+  'italic', // 斜体
+  'underline', // 下划线
+  'strikeThrough', // 删除线
+  'foreColor', // 文字颜色
+  'backColor', // 背景颜色
+  'link', // 插入链接
+  'list', // 列表
+  'justify', // 对齐方式
+  'quote', // 引用
+  // 'emoticon', // 表情
+  'image', // 插入图片
+  'table', // 表格
+  // 'video', // 插入视频
+  // 'code', // 插入代码
+  'undo', // 撤销
+  'redo', // 重复
+];
+
+export default {
+  name: 'wang-editor',
+  model: {
+    prop: 'value',
+    event: 'change', // 默认为input时间，此处改为change
+  },
+  props: {
+    value: { type: String, required: false, default: '' },
+  },
+  data() {
+    return {
+      editorContent: this.value,
+    };
+  },
+  mounted() {
+    var editor = new E(this.$refs.editor);
+    editor.customConfig.onchange = html => {
+      this.editorContent = html;
+      this.$emit('change', html);
+    };
+    // 自定义菜单配置
+    editor.customConfig.menus = menus;
+    editor.customConfig.zIndex = 0;
+    editor.customConfig.uploadImgServer = '/files/cms/images/upload';
+    editor.customConfig.uploadImgMaxLength = 1;
+    editor.customConfig.uploadImgHooks = {
+      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
+      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
+      customInsert: function(insertImg, result, editor) {
+        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
+        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
+
+        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
+        var url = result.uri;
+        insertImg(url);
+
+        // result 必须是一个 JSON 格式字符串！！！否则报错
+      },
+    };
+    editor.create();
+    editor.txt.html(this.value);
+  },
+  methods: {
+    getContent: function() {
+      return this.editorContent;
+    },
+  },
+};
+</script>

src/components/upload-file.vue

@@ -12,6 +12,7 @@
       :file-list="fileList"
       :on-preview="onPreview"
       :on-remove="remove"
+      list-type="picture"
     >
       <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
       <div slot="tip" class="el-upload__tip">{{ desc === undefined ? '只能上传不超过2MB的文件' : desc }}</div>

src/views/want/resume/index.vue

@@ -108,8 +108,8 @@
                   <el-input v-model="info.skill" placeholder="请输入专业技能"></el-input>
                 </form-item>
                 <el-row>
-                  <form-item label="个人介绍">
-                    <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="info.content" maxlength="100" show-word-limit> </el-input>
+                  <form-item label="个人介绍" prop="content">
+                    <wang-editor v-model="info.content" placeholder="请输入新闻描述"></wang-editor>
                   </form-item>
                 </el-row>
               </el-row>
@@ -171,7 +171,7 @@
                 </el-row>
               </template>
               <el-row>
-                <el-col :span="24">
+                <el-col :span="12">
                   <upload-file
                     :url="`/files/stud/resume_${user.id}_honors/upload`"
                     desc="只能上传不超过2MB文件"
@@ -337,6 +337,7 @@ import upload from '@/components/upload.vue';
 import tagAllSelect from '@/components/tag-all-select.vue';
 import formItem from '@/components/form-item.vue';
 import detailLayout from '@/layout/detail-layout.vue';
+import WangEditor from '@/components/editor/wang-editor.vue';
 import { mapActions, mapState } from 'vuex';
 import _ from 'lodash';
 export default {
@@ -348,6 +349,7 @@ export default {
     upload,
     uploadFile,
     resumes,
+    WangEditor,
   },
   data: () => ({
     loading: false,