富文本编辑器（笔记版）

富文本编辑器wangeditor：Introduction · wangEditor 用户文档

第一步：安装和引入

npm i wangeditor --save

import E from 'wangeditor'

第二步：初始化文件上传的接口

/**
 * wang-editor编辑器文件上传接口
 */
@PostMapping("/word/upload")
public Map<String, Object> wangEditorUpload(MultipartFile file) {
    String flag = System.currentTimeMillis() + "";
    String fileName = file.getOriginalFilename();
    try {
        // 文件存储形式：时间戳-文件名
        FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName);
        System.out.println(fileName + "--上传成功");
        Thread.sleep(1L);
    } catch (Exception e) {
        System.err.println(fileName + "--文件上传失败");
    }
    String http = "http://" + ip + ":" + port + "/files/";
    Map<String, Object> resMap = new HashMap<>();
    // wangEditor上传图片成功后， 需要返回的参数
    resMap.put("errno", 0);
    resMap.put("data", CollUtil.newArrayList(Dict.create().set("url", http + flag + "-" + fileName)));
    return resMap;
}

第三步：富文本编辑器图片上传的接口：

<el-form-item prop="content" label="任意内容">
  <div id="editor"></div>
</el-form-item>

initWangEditor(content) {
  this.$nextTick(() => {
    this.editor = new E('#editor')
    this.editor.config.placeholder = '请输入内容'
    this.editor.config.uploadFileName = 'file'
    this.editor.config.uploadImgServer = 'http://localhost:9090/files/Word/upload'
    this.editor.create()
    setTimeout(() => {
      this.editor.txt.html(content)
    })
  })
},

第四步在具体的时候去初始化它

this.initWangEditor(this.form.content || '')

第五步.编辑完之后保存内容
保存：

this.form.content = this.editor.txt.html()

第六步.渲染（管理端表格）
表格上面加一个点击查看的按钮：

<el-table-column prop="content" label="任意内容">
  <template v-slot="scope">
    <el-button type="primary" size="mini" @click="viewData(scope.row.content)">点击查看</el-button>
  </template>
</el-table-column>

实现viewData函数：

viewData(content) {
  this.viewContent = content
  this.editorVisible = true
},

对话框：

<el-dialog title="资讯" :visible.sync="editorVisible" width="50%" :close-on-click-modal="false" destroy-on-close>
  <div v-html="this.viewContent" class="w-e-text"></div>
</el-dialog>

在data里初始化变量：

data() {
  return {
    editor: null,
    viewContent: null
    editorVisible: false,
  }
},