<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)