富文本编辑器使用及JS基础知识点总结

<template>
  <div style="height: 400px;">
    <el-Upload
      v-show="false"
      :show-upload-list="false"
      :http-request="handleSuccess"
      :multiple="true"
      action=""
      accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
    >
//show-upload-list 不显示上传的列表

      <Button id="upload" />
    </el-Upload>
    <quill-editor
      ref="quillEditor"
      v-model="formData[data.model]"
      :options="editorOption"
    />
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import { uploadApi } from '@/api/publicApi'

export default {
  name: 'EditorMoudel',
  components: {
    quillEditor
  },
  props: {
    data: { // 上传图片模块所需的初始数据
      type: Object,
      default: () => { return {} }
    },
    formData: { // 表单数据
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      editorOption: { // 自定义富文本工具
        modules: {
          imageResize: { // 添加
            displayStyles: { // 添加
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar'] // 添加
          },
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'image'],
              ['formula', 'clean'],
              ['blockquote', 'code-block'],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'script': 'sub' }, { 'script': 'super' }],
              [{ 'size': ['small', false, 'large', 'huge'] }],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'align': [] }]
            ],
            handlers: {
              'image': function(value) {
                if (value) {
                  document.querySelector('#upload').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          },
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          }
        }
      }
    }
  },
  computed: {
    quillEditor() {
      return this.$refs.quillEditor
    }
  },
  methods: {
    // 富文本上传文件
    handleSuccess(file) {
      if (file.file.name.indexOf('.') !== -1 && ['jpg', 'jpeg', 'png'].includes(file.file.name.substring(file.file.name.lastIndexOf('.') + 1).toLowerCase())) {
        const Data = new FormData()
        Data.append('file', file.file)
        uploadApi(this.data.code, Data)
          .then(res => {
            // 获取富文本组件实例
            const quill = this.quillEditor.quill
            // 如果上传成功
            if (res) {
              // 插入图片，res为服务器返回的图片链接地址
              const fileUrl = res.data.url
              // 获取光标所在位置
              const length = quill.getSelection().index
              quill.insertEmbed(length, 'image', fileUrl)
              // 调整光标到最后
              quill.setSelection(length + 1)
            } else {
              // 提示信息，需引入Message
              this.$message({
                message: `图片插入失败！`,
                type: 'error'
              })
            }
          })
      } else {
        this.$message({
          title: '提示',
          message: '请选择图片！',
          type: 'warning'
        })
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ {
  .ql-formats {
    line-height: 24px;
  }
}

</style>

拓展 JavaScript indexOf()方法

indexOf()方法可返回某个指定的字符串在字符串中首次出现的位置

stringObject.indexOf(searchvalue,formindex)

参数	描述
searchvalue	必需。规定需检索的字符串值。
fromindex	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

说明

该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

提示和注释

注释：indexOf() 方法对大小写敏感！

注释：如果要检索的字符串值没有出现，则该方法返回 -1。

JavaScript Array includes() 方法

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

[1, 2, 3].includes(2);     // true

JavaScript substring() 方法

定义和用法

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

stringObject.substring(start,stop)

参数	描述
start	必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop	可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。 如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回值

一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。

说明

substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。

如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

提示和注释

重要事项：与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。

<script type="text/javascript">

var str="Hello world!"
document.write(str.substring(3))

</script>
输出：

lo world!

JavaScript toLowerCase() 方法

toLowerCase() 方法用于把字符串转换为小写。

stringObject.toLowerCase()

FormData的使用方法详解

FormData的主要用途有两个：

1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。

2、异步上传文件

（详细用法可参照 https://www.jianshu.com/p/e984c3619019）

（富文本宝藏链接 https://www.jianshu.com/p/9e4e4d955d0f）