You've already forked vue-element-admin
feature:新增富文本编辑器插件功能入口,提供导出图片功能,全局loading配置
This commit is contained in:
laven-der
234
src/components/Tinymce/example.vue
Normal file
234
src/components/Tinymce/example.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="layout-container">
|
||||
<div ref="list" class="layout-body">
|
||||
<tinymce
|
||||
v-model="content"
|
||||
:menu="menu"
|
||||
:height="height"
|
||||
:new-event-list="eventList"
|
||||
/>
|
||||
</div>
|
||||
<div class="util-component" style="display:none;">
|
||||
<el-upload
|
||||
:multiple="true"
|
||||
:file-list="dataList.list"
|
||||
:on-progress="uploadProgress"
|
||||
:on-success="handleSuccess"
|
||||
class="editor-slide-upload"
|
||||
action="https://httpbin.org/post"
|
||||
list-type="picture-card"
|
||||
>
|
||||
<el-button id="editorUploader" size="small" type="primary">
|
||||
Click upload
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div ref="imageWrapper" class="show-html" v-html="content" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tinymce from './index'
|
||||
import html2canvas from 'html2canvas'
|
||||
import { Loading } from 'element-ui'
|
||||
export default {
|
||||
name: 'TinymceDemo',
|
||||
components: { Tinymce },
|
||||
data() {
|
||||
return {
|
||||
showPreviewDialog: false,
|
||||
dataurl: '',
|
||||
eventList: [
|
||||
{
|
||||
toolbarName: 'uploadImg',
|
||||
tooltip: 'uploadImg',
|
||||
text: 'uploadImg',
|
||||
fn: (e, callback) => {
|
||||
this.handleAdd('uploadImg', data => {
|
||||
if (callback && typeof callback === 'function') {
|
||||
callback(data)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// {
|
||||
// toolbarName: 'uploadVideo',
|
||||
// tooltip: 'uploadVideo',
|
||||
// text: 'uploadVideo',
|
||||
// fn: (e, callback) => {
|
||||
// this.handleAdd('uploadVideo', data => {
|
||||
// if (callback && typeof callback === 'function') {
|
||||
// callback(data)
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
{
|
||||
toolbarName: 'spreview',
|
||||
tooltip: 'spreview',
|
||||
text: 'spreview',
|
||||
fn: (e, callback) => {
|
||||
this.toImage()
|
||||
}
|
||||
}
|
||||
],
|
||||
isUpload: false,
|
||||
dataList: {
|
||||
list: [
|
||||
{
|
||||
url: ''
|
||||
}
|
||||
],
|
||||
type: 'image',
|
||||
setDom: v => `<a>${v.dom}</a>`
|
||||
},
|
||||
height: 700,
|
||||
menu: {
|
||||
file: { title: '文件', items: 'newdocument' },
|
||||
edit: {
|
||||
title: '编辑',
|
||||
items: 'undo redo | cut copy paste pastetext | selectall'
|
||||
},
|
||||
insert: { title: '插入', items: 'link media | image hr' },
|
||||
view: { title: '查看', items: 'visualaid' },
|
||||
format: {
|
||||
title: '格式',
|
||||
items:
|
||||
'bold italic underline strikethrough superscript subscript | formats | removeformat'
|
||||
},
|
||||
table: {
|
||||
title: '表格',
|
||||
items: 'inserttable tableprops deletetable | cell row column'
|
||||
},
|
||||
tools: { title: '工具', items: 'spellchecker code' }
|
||||
},
|
||||
loadingInstance: null,
|
||||
content: `<h1 style="text-align: center;">测试demo!</h1>
|
||||
<p>嗨</p>
|
||||
<img class="img" src="https://ali-image-test.dabanjia.com/image/20200508/1588911589606_5140%24ban.jpg" width="200"/>
|
||||
<p>枕着幸福在梦中微笑，清零生活的压力烦恼，阳光透过窗与你拥抱，伸伸懒腰迎接周末来到，问候源于无法按捺的心跳，愿你周末乐逍遥，生活更美妙！
|
||||
周末来到，让烦恼跑光，让忧愁找不到，跟寂寞说再见，跟压力说拜拜，跟快乐说你好，牵着幸福的手，携上平安，开开心心的过周末！
|
||||
每个人，都有一个世界；每首歌，都有一个故事；每一周，都有一个周末；每个人，都要一个愿望；我的愿望很现实：周末清晨，搅黄你的美梦！周末快乐！
|
||||
</p>
|
||||
`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fileType() {
|
||||
// 自定义配置上传组件支持的文件，需要对上传组件进行封装，制定文件规格
|
||||
if (this.dataList.type === 'image') {
|
||||
return 'png|jpe?g|gif|svg'
|
||||
}
|
||||
if (this.dataList.type === 'video') {
|
||||
// 暂时只支持mp4
|
||||
return 'mp4'
|
||||
// return "mp4|webm|ogg|mp3|wav|flac|aac";
|
||||
}
|
||||
return ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 实时获取高度，并减去padding值
|
||||
this.height = this.$refs.list.clientHeight - 32
|
||||
},
|
||||
methods: {
|
||||
toImage() {
|
||||
var width = 330 // 获取dom 宽度
|
||||
var height = this.$refs.imageWrapper.scrollHeight // 获取dom 高度
|
||||
var canvas = document.createElement('canvas') // 创建一个canvas节点
|
||||
var scale = 2 // 定义任意放大倍数 支持小数默认设置为2，确保图片清晰度
|
||||
canvas.width = width * scale * scale // 定义canvas 宽度 * 缩放
|
||||
canvas.height = height * scale * scale // 定义canvas高度 *缩放
|
||||
canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
|
||||
var opts = {
|
||||
tainttest: true, // 检测每张图片都已经加载完成
|
||||
scale: scale, // 添加的scale 参数
|
||||
useCORS: true,
|
||||
canvas: canvas, // 自定义 canvas
|
||||
logging: true, // 日志开关
|
||||
width: width, // dom 原始宽度
|
||||
height: height // dom 原始高度
|
||||
}
|
||||
html2canvas(this.$refs.imageWrapper, opts).then(canvas => {
|
||||
const dataurl = canvas.toDataURL('image/png')
|
||||
this.dataurl = dataurl
|
||||
if (this.dataurl !== '') {
|
||||
console.log(this.dataurl, '生成base64')
|
||||
}
|
||||
})
|
||||
},
|
||||
error(e) {
|
||||
console.log(e)
|
||||
},
|
||||
handleAdd(key, callback) {
|
||||
this.dataList.list[0].url = ''
|
||||
this.isUpload = false
|
||||
switch (key) {
|
||||
case 'uploadImg':
|
||||
this.dataList.type = 'image'
|
||||
document.getElementById('editorUploader').click()
|
||||
|
||||
break
|
||||
case 'uploadVideo':
|
||||
this.dataList.type = 'video'
|
||||
document.getElementById('editorUploader').click()
|
||||
|
||||
break
|
||||
// 批量操作,可自定义所有操作
|
||||
case 'selectImg':
|
||||
break
|
||||
case 'selectVideo':
|
||||
break
|
||||
}
|
||||
const unWatch = this.$watch('isUpload', val => {
|
||||
if (val && callback && typeof callback === 'function') {
|
||||
callback(this.dataList)
|
||||
// 取消监听
|
||||
unWatch()
|
||||
}
|
||||
})
|
||||
},
|
||||
uploadProgress() {
|
||||
this.loadingInstance = Loading.service({
|
||||
lock: true,
|
||||
text: '数据加载中，请稍后...',
|
||||
background: 'rgba(0, 0, 0, 0.1)'
|
||||
})
|
||||
},
|
||||
// 定义模板
|
||||
handleSuccess(data, file) {
|
||||
this.loadingInstance.close()
|
||||
this.dataList.list[0].url = file.url
|
||||
const { type } = this.dataList
|
||||
if (type === 'image') {
|
||||
this.dataList.setDom = v =>
|
||||
`<img class="img-scale" src="${v.url}" width="200">`
|
||||
}
|
||||
if (type === 'video') {
|
||||
// 自定义配置模板信息，宽高后期都可变成输入
|
||||
this.dataList.setDom = v =>
|
||||
`<p >
|
||||
<video controls="controls" width="200" height="350" >
|
||||
<source src="https://dev-saas.oss-cn-beijing.aliyuncs.com/056eb234fa9844b0b7ec3e13bd39faf7.mp4" type="video/mp4" />
|
||||
<source src="${v.url}" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
</p>
|
||||
`
|
||||
}
|
||||
this.isUpload = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.show-html {
|
||||
position: fixed;
|
||||
right: 40px;
|
||||
top: 80px;
|
||||
width: 330px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border: 1px solid goldenrod;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user