Compare commits

...

1 Commits

6 changed files with 378 additions and 32 deletions

View File

@ -89,6 +89,7 @@
"eslint": "5.15.3",
"eslint-plugin-vue": "5.2.2",
"html-webpack-plugin": "3.2.0",
"html2canvas": "^1.0.0-rc.5",
"husky": "1.3.1",
"lint-staged": "8.1.5",
"mockjs": "1.0.1-beta3",

View File

@ -1,6 +1,12 @@
<template>
<div class="upload-container">
<el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
<el-button
:style="{background:color,borderColor:color}"
icon="el-icon-upload"
size="mini"
type="primary"
@click=" dialogVisible=true"
>
upload
</el-button>
<el-dialog :visible.sync="dialogVisible">
@ -15,14 +21,20 @@
action="https://httpbin.org/post"
list-type="picture-card"
>
<el-button size="small" type="primary">
<el-button
size="small"
type="primary"
>
Click upload
</el-button>
</el-upload>
<el-button @click="dialogVisible = false">
Cancel
</el-button>
<el-button type="primary" @click="handleSubmit">
<el-button
type="primary"
@click="handleSubmit"
>
Confirm
</el-button>
</el-dialog>
@ -49,12 +61,16 @@ export default {
},
methods: {
checkAllSuccess() {
return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
return Object.keys(this.listObj).every(
item => this.listObj[item].hasSuccess
)
},
handleSubmit() {
const arr = Object.keys(this.listObj).map(v => this.listObj[v])
if (!this.checkAllSuccess()) {
this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
this.$message(
'Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!'
)
return
}
this.$emit('successCBK', arr)
@ -92,7 +108,12 @@ export default {
const img = new Image()
img.src = _URL.createObjectURL(file)
img.onload = function() {
_self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
_self.listObj[fileName] = {
hasSuccess: false,
uid: file.uid,
width: this.width,
height: this.height
}
}
resolve(true)
})

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

View File

@ -1,8 +1,16 @@
<template>
<div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}">
<div
:class="{ fullscreen: fullscreen }"
class="tinymce-container"
:style="{ width: containerWidth }"
>
<textarea :id="tinymceId" class="tinymce-textarea" />
<div class="editor-custom-btn-container">
<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
<editorImage
color="#1890ff"
class="editor-upload-btn"
@successCBK="imageSuccessCBK"
/>
</div>
</div>
</template>
@ -18,7 +26,8 @@ import toolbar from './toolbar'
import load from './dynamicLoadScript'
// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
const tinymceCDN =
'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
export default {
name: 'Tinymce',
@ -27,7 +36,11 @@ export default {
id: {
type: String,
default: function() {
return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
return (
'vue-tinymce-' +
+new Date() +
((Math.random() * 1000).toFixed(0) + '')
)
}
},
value: {
@ -45,6 +58,13 @@ export default {
type: String,
default: 'file edit insert view format table'
},
newEventList: {
type: Array,
required: false,
default() {
return []
}
},
height: {
type: [Number, String],
required: false,
@ -63,17 +83,18 @@ export default {
tinymceId: this.id,
fullscreen: false,
languageTypeList: {
'en': 'en',
'zh': 'zh_CN',
'es': 'es_MX',
'ja': 'ja'
en: 'en',
zh: 'zh_CN',
es: 'es_MX',
ja: 'ja'
}
}
},
computed: {
containerWidth() {
const width = this.width
if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'`
if (/^[\d]+(\.[\d]+)?$/.test(width)) {
// matches `100`, `'100'`
return `${width}px`
}
return width
@ -83,7 +104,8 @@ export default {
value(val) {
if (!this.hasChange && this.hasInit) {
this.$nextTick(() =>
window.tinymce.get(this.tinymceId).setContent(val || ''))
window.tinymce.get(this.tinymceId).setContent(val || '')
)
}
}
},
@ -104,7 +126,7 @@ export default {
methods: {
init() {
// dynamic load tinymce from cdn
load(tinymceCDN, (err) => {
load(tinymceCDN, err => {
if (err) {
this.$message.error(err.message)
return
@ -114,13 +136,39 @@ export default {
},
initTinymce() {
const _this = this
//
let newToolbar = []
let barStr = ''
const eventData = []
this.newEventList.map(itemData => {
const { toolbarName, tooltip, text, fn } = itemData
eventData.push({
data: {
tooltip,
text,
onclick: e => {
fn(e, data => {
//
_this.dataSuccessCBK(data)
})
}
},
name: toolbarName
})
barStr += toolbarName + ' '
})
if (this.toolbar.length > 0) {
newToolbar = this.toolbar.concat(barStr)
} else {
newToolbar = toolbar.concat(barStr)
}
window.tinymce.init({
selector: `#${this.tinymceId}`,
language: this.languageTypeList['en'],
height: this.height,
body_class: 'panel-body ',
object_resizing: false,
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
toolbar: newToolbar,
menubar: this.menubar,
plugins: plugins,
end_container_on_empty_block: true,
@ -144,8 +192,9 @@ export default {
})
},
setup(editor) {
editor.on('FullscreenStateChanged', (e) => {
_this.fullscreen = e.state
eventData.map(item => {
console.log('-----', item)
editor.addButton(item.name, item.data)
})
},
// it will try to keep these URLs intact
@ -206,8 +255,27 @@ export default {
imageSuccessCBK(arr) {
const _this = this
arr.forEach(v => {
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
window.tinymce
.get(_this.tinymceId)
.insertContent(`<img class="wscnph" src="${v.url}" >`)
})
},
dataSuccessCBK(dataList) {
const { type, list, setDom } = dataList
let newDom = ''
console.log(dataList)
const self = this
if (type === 'image') {
list.forEach(v => {
newDom = setDom(v)
window.tinymce.get(self.tinymceId).insertContent(newDom)
})
} else if (type === 'video') {
list.forEach(v => {
newDom = setDom(v)
window.tinymce.get(self.tinymceId).insertContent(newDom)
})
}
}
}
}

View File

@ -1,8 +1,12 @@
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import {
Message,
MessageBox,
Loading
} from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
var loadingInstance = null
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
@ -21,6 +25,12 @@ service.interceptors.request.use(
// please modify it according to the actual situation
config.headers['X-Token'] = getToken()
}
console.log('------')
loadingInstance = Loading.service({
lock: true,
text: '数据加载中,请稍后...',
background: 'rgba(0, 0, 0, 0.1)'
})
return config
},
error => {
@ -43,6 +53,7 @@ service.interceptors.response.use(
* You can also judge the status by HTTP Status Code
*/
response => {
loadingInstance.close()
const res = response.data
// if the custom code is not 20000, it is judged as an error.
@ -72,6 +83,7 @@ service.interceptors.response.use(
}
},
error => {
loadingInstance.close()
console.log('err' + error) // for debug
Message({
message: error.message,

View File

@ -2,34 +2,44 @@
<div class="components-container">
<aside>
Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html">Documentation</a>
<a
target="_blank"
class="link-type"
href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"
>Documentation</a>
</aside>
<div>
<tinymce v-model="content" :height="300" />
<tinymce
v-model="content"
:height="300"
/>
</div>
<div class="editor-content" v-html="content" />
</div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import Tinymce from '@/components/Tinymce/example'
export default {
name: 'TinymceDemo',
components: { Tinymce },
data() {
return {
content:
`<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /><ul>
<li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li><li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
</ul>`
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>
`
}
}
}
</script>
<style scoped>
.editor-content{
.editor-content {
margin-top: 20px;
}
</style>