富文本编辑器vue-quill-editor

一、install-->command line:

1、cnpm install vue-quill-editor --save

2、cnpm install sass-loader@7.3.1 --save-dev

3、cnpm install --save-dev node-sass

二、官网("https://www.awesomes.cn/repo/surmon-china/vue-quill-editor")-->Nuxt.js example code("https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-quill-editor/nuxt")

 

三、create (plugins/nuxt-quill-plugin.js)

四、configure (nuxt.config.js)

 五、copy and modify(vue file)-->editor.vue

 

<template>
  <!--两列布局-->
  <div class="wrapper release-tc">
    <div class="release-box">
      <h3>发布吐槽</h3>
      <div class="editor">
        <quill-editor
          ref="myQuillEditor"
          v-model="content"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
        />
        <div class="btns">
          <button class="sui-btn btn-danger btn-release" @click="save">发布</button>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</template>
<script>
import "~/assets/css/page-sj-spit-submit.css"
import spitApi from '@/api/spit'
import {quillRedefine} from 'vue-quill-editor-upload'
export default {
  name: "quill-example-nuxt",
  data() {
    return {
      content: "",
      editorOption: {}
    };
  },
  computed: {
      editor() {
          return this.$refs.myQuillEditor.quill;
      },
  },
  created(){
    this.editorOption=quillRedefine({
      uploadConfig:{
        action: 'http://localhost:3000/upload',
        res: (response)=>{
          return response.info
        },
        name: 'img'
      }
    })
  },
  mounted() {
    console.log(
      "App inited, the Quill instance object is:",
      this.$refs.myQuillEditor.quill
    );
    // setTimeout(() => {
    //   this.content = "I was changed!";
    // }, 3000);
  },
  methods: {
    onEditorBlur(editor) {
      console.log("editor blur!", editor);
    },
    onEditorFocus(editor) {
      console.log("editor focus!", editor);
    },
    onEditorReady(editor) {
      console.log("editor ready!", editor);
    },
    onEditorChange({ editor, html, text }) {
        console.log('editor change!', editor, html, text)
        this.content = html
      },
    save(){
      spitApi.save({content:this.content}).then(res=>{
        this.$message({
          message:res.data.message,
          type:(res.data.flag?'success':'error')
        })
        if(res.data.flag){
          this.$router.push('/spit')
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
    .quill-editor {
      height: 50px;
      min-height: 200px;
      max-height: 400px;
      overflow-y: auto;
    }
</style>

 

 六、auxiliary add-ins:vue-quill-editor-upload

1、install-->commandline:cnpm install vue-quill-editor-upload --save

2、import into vue-->("    import {quillRedefine} from 'vue-quill-editor-upload'      ")

3、use

data() {
    return {
      content: "",
      editorOption: {}
    };
  },
created(){
    this.editorOption=quillRedefine({
      uploadConfig:{
        action: '',
        res: (response)=>{
          return response.info
        },
        name: 'img'
      }
    })
  },

 七、multer、Express

1、use "upload-server"

2、install-->commandline:cnpm install

3、run -->npm run start

 4、docking with the program(vue)

 5、correspond to multer(server.js)

const express = require('express');
const upload = require('multer')({ dest: 'uploads/' });
const path = require('path');
const fs = require('fs');
 5 const port = 3000;

let  app = express();

app.set('port', port);
app.use(express.static(path.join(__dirname, 'uploads/')));

//处理跨域请求
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

18 app.post('/upload', upload.single('img'), (req, res) => {
  // 没有附带文件
  if (!req.file) {
    res.json({ ok: false });
    return;
  }
     
  // 输出文件信息
 
  console.log('====================================================');
  console.log('fieldname: ' + req.file.fieldname);
  console.log('originalname: ' + req.file.originalname);
  console.log('encoding: ' + req.file.encoding);
  console.log('mimetype: ' + req.file.mimetype);
  console.log('size: ' + (req.file.size / 1024).toFixed(2) + 'KB');
  console.log('destination: ' + req.file.destination);
  console.log('filename: ' + req.file.filename);
  console.log('path: ' + req.file.path);
  
  
  // 重命名文件 
 
  let oldPath = path.join(__dirname, req.file.path);
  let newPath = path.join(__dirname, 'uploads/' + req.file.originalname);
  fs.rename(oldPath, newPath, (err) => {
    if (err) {
      res.json({ ok: false });
      console.log(err);
    } else {
47       res.json({ ok: true ,info:'http://localhost:'+port+'/'+req.file.originalname});
    }
  });
  
});

app.listen(port, () => {
  console.log("[Server] localhost:" + port);
});

 6、effect: