1、安装
npm install --save element-tiptap
2、使用
局部使用
<el-form-item label="内容" prop="content">
<el-tiptap
v-model="article.content"
:extensions="extensions"
height="350"
lang="zh"
placeholder="请输入文章内容"
></el-tiptap>
</el-form-item>
import {
ElementTiptap,
Doc,
Text,
Paragraph,
Heading,
Bold,
Underline,
Italic,
Image,
Strike,
ListItem,
BulletList,
OrderedList,
TodoItem,
TodoList,
HorizontalRule,
Fullscreen,
Preview,
CodeBlock,
TextColor
} from 'element-tiptap'
import 'element-tiptap/lib/index.css'
import { uploadImage } from '@/api/image'
export default {
components: {
'el-tiptap': ElementTiptap,
},
data () {
return {
// 编辑器的 extensions
extensions: [
new Doc(),
new Text(),
new Paragraph(),
new Heading({ level: 3 }),
new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
new Image({
// 默认会把图片生成 base64 字符串和内容存储在一起,如果需要自定义图片上传
uploadRequest (file) {
// 如果接口要求 Content-Type 是 multipart/form-data,则请求体必须使用 FormData
const fd = new FormData()
//image是后台接口需要参数名
fd.append('file', file)
//走后台接口进行上传返回上传后的图片地址
// 第1个 return 是返回 Promise 对象
// 为什么?因为 axios 本身就是返回 Promise 对象
return uploadImage(fd).then(res => {
// 这个 return 是返回最后的结果
return res.data.data.url
})
} // 图片的上传方法,返回一个 Promise<url>
}),
new Underline(), // 下划线
new Italic(), // 斜体
new Strike(), // 删除线
new HorizontalRule(), // 华丽的分割线
new ListItem(),
new BulletList(), // 无序列表
new OrderedList(), // 有序列表
new TodoItem(),
new TodoList(),
new Fullscreen(),
new Preview(),
new CodeBlock(),
new TextColor()
],
formRules: {
title: [
{ required: true, message: '请输入文章标题', trigger: 'blur' },
{ min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' }
],
content: [
// { required: true, message: '请输入文章内容', trigger: 'change' }
{
validator (rule, value, callback) {
console.log('content validator')
if (value === '<p></p>') {
// 验证失败
callback(new Error('请输入文章内容'))
} else {
// 验证通过
callback()
}
}
},
{ required: true, message: '请输入文章内容', trigger: 'blur' }
],
channel_id: [
{ required: true, message: '请选择文章频道' }
]
}
}
}
image.js
/**
* 素材请求相关模块
*/
import request from '@/utils/request'
/**
* 上传图片素材
*/
export const uploadImage = data => {
return request({
method: 'POST',
url: '/mp/v1_0/user/images',
// 正常的文件上传接口要求 Content-Type 设置为 multipart/form-data
// 一般文件上传的接口都要求把请求头中的 Content-Type 设置为 multipart/form-data,但是我们使用 axios 上传文件的话不需要手动设置,你只要给 data 一个 FormData 对象即可。
// new FormData()
data
})
}