上传文本文件到富文本

废话

需求：有一个添加文章的需求，自己又不想去写和复制，要求是别人发给他一个doc，docx，txt，类型的文件，然后呢，他去稍微标注修改一下内容，再提交，所以就很简单嘛，一个上传，一个富文本，上传的文件读到富文本里，在编辑提交搞定

正文

本项目直接写到vue2.0项目里了，当然原生js，或者其它都可以

1、引入富文本

安装 vue-quill-editor

npm install vue-quill-editor
           

在main.js中引入

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
           

2、使用

<template>
	<quill-editor class="mt15" v-model="content" :options="editorOption"></quill-editor>
</template>

  data() {
    return {
      content:"",
      editorOption: {},
    };
  },

           

editorOption是工具栏，可以选择自己想要的工具栏，文档传送

效果

3、上传文件

本示例使用的elementui里的upload

<template>
	    <div>
	      上传 txt文件，到富文本中编辑
	    </div>
	    <el-upload
	      class="upload-demo"
	      accept=".txt"
	      action=""
	      :on-change="handleChange"
	      :file-list="fileList"
	      :auto-upload="false"
	      :multiple="true"
	    >
	      <el-button style="margin:20px 0" size="small" type="primary"
	        >点击上传</el-button
	      >
	    </el-upload>
    <template>

	 data() {
	    return {
	      fileList: []
	    };
	  },
           

4、读取上传文件的内容

let reader = new FileReader();
      if (typeof FileReader === "undefined") {
        this.$message({
          type: "info",
          message: "您的浏览器不支持文件读取。"
        });
        return;
      }
      reader.readAsArrayBuffer(file.raw); //读文件
      reader.onload = function(e) {
        let ints = new Uint8Array(e.target.result);   //转成Uint8Array类型
        let snippets = new TextDecoder().decode(ints);   //转成string
        console.log(snippets) //内容
      };
           

5、最终代码

<template>
  <div>
    <div>
      上传 txt文件，到富文本中编辑
    </div>
    <el-upload
      class="upload-demo"
      accept=".txt"
      action=""
      :on-change="handleChange"
      :file-list="fileList"
      :auto-upload="false"
      :multiple="true"
    >
      <el-button style="margin:20px 0" size="small" type="primary"
        >点击上传</el-button
      >
    </el-upload>

    <quill-editor class="mt15" v-model="content" :options="editorOption">
    </quill-editor>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "",
      editorOption: {},
      fileList: []
    };
  },
  methods: {
    onEditorChange() {},
    // 改变文件
    handleChange(file, fileList) {
      let reader = new FileReader();
      if (typeof FileReader === "undefined") {
        this.$message({
          type: "info",
          message: "您的浏览器不支持文件读取。"
        });
        return;
      }
      reader.readAsArrayBuffer(file.raw); //读任意文件
      let _this = this;
      reader.onload = function(e) {
        let ints = new Uint8Array(e.target.result);
        let snippets = new TextDecoder("utf8").decode(ints);
        _this.content += snippets;
      };
    }
  },
  created() {}
};
</script>
<style  scoped></style>

           

效果

上传完成之后，内容放到富文本中，再次编辑，在传给后端

笔记

目前试了一下只能上传纯文本txt文件，doc,docx文件会乱码，后端可以转换，可以上传给后端，转义后，再取回来放到富文本里，如果有大佬知道前端直接可以转义，希望提出来，互相学习，感谢

demo预览