<template>
|
<div>
|
<textarea :id="id" />
|
<!--<div class="editor-custom-btn-container">-->
|
<!--<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />-->
|
<!--</div>-->
|
</div>
|
</template>
|
<script>
|
// import editorImage from './components/EditorImage'
|
import { getFtpUrl, getUploadUrl } from '@/utils/base'
|
import { guid } from '@/utils/tools'
|
|
export default {
|
components: {
|
// editorImage
|
},
|
props: {
|
width: {
|
type: String,
|
default: '100%'
|
},
|
height: {
|
type: String,
|
default: '300px'
|
},
|
value: {
|
type: String,
|
default: ''
|
},
|
config: {
|
type: Object,
|
default: function() {
|
return {
|
imgUploadUrl: getUploadUrl()
|
}
|
}
|
},
|
tid: {
|
type: String,
|
default: 'edit-' + guid()
|
}
|
},
|
data() {
|
return {
|
id: this.tid + new Date().getTime()
|
}
|
},
|
watch: {
|
value(val) {
|
if (val == null) { val = '' }
|
window.tinymce.get(this.id).setContent(val)
|
}
|
},
|
destroyed() {
|
this.destroyTinymce()
|
},
|
mounted() {
|
// console.log(111)
|
this.init()
|
},
|
methods: {
|
init() {
|
// console.log(this.id)
|
const _this = this
|
window.tinymce.init({
|
selector: `#${this.id}`,
|
body_class: 'panel-body ',
|
skin: 'oxide',
|
language: 'zh_CN',
|
plugins: 'paste preview fullscreen code codesample lists image table hr emoticons',
|
width: this.width,
|
height: this.height,
|
toolbar: [
|
'paste fullscreen preview | undo redo | hr bold italic underline strikethrough | alignleft aligncenter alignright | outdent indent | removeformat subscript superscript',
|
'bullist numlist link image charmap anchor pagebreak insertdatetime table emoticons forecolor backcolor'
|
],
|
image_advtab: true,
|
images_upload_handler: (blobInfo, success, failure) => {
|
const xhr = new XMLHttpRequest()
|
xhr.withCredentials = false
|
xhr.open('POST', _this.config.imgUploadUrl)
|
const formData = new FormData()
|
formData.append('file', blobInfo.blob())
|
xhr.onload = function(e) {
|
if (xhr.status != 200) {
|
failure('HTTP Error: ' + xhr.status)
|
return
|
}
|
const json = JSON.parse(this.responseText)
|
if (!json || typeof json.data[0].path != 'string') {
|
failure('Invalid JSON: ' + xhr.responseText)
|
return
|
}
|
success(getFtpUrl() + json.data[0].path)
|
}
|
xhr.send(formData)
|
// const img = 'data:image/jpeg;base64,' + blobInfo.base64()
|
// success(img)
|
},
|
init_instance_callback: editor => {
|
if (_this.value) {
|
editor.setContent(_this.value)
|
}
|
_this.hasInit = true
|
editor.on('NodeChange Change KeyUp SetContent', () => {
|
// this.hasChange = true
|
this.$emit('input', editor.getContent())
|
})
|
}
|
// external_plugins: {
|
// 'powerpaste': 'http://www.server.com/application/external_plugins/powerpaste/plugin.js'
|
// }
|
})
|
},
|
destroyTinymce() {
|
const tinymce = window.tinymce.get(`#${this.id}`)
|
if (this.fullscreen) {
|
tinymce.execCommand('mceFullScreen')
|
}
|
if (tinymce) {
|
tinymce.destroy()
|
}
|
},
|
setContent(value) {
|
window.tinymce.get(this.id).setContent(value)
|
},
|
getContent() {
|
return window.tinymce.get(this.id).getContent()
|
},
|
imageSuccessCBK(arr) {
|
const _this = this
|
arr.forEach(v => {
|
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.tinymce-container {
|
position: relative;
|
line-height: normal;
|
}
|
.tinymce-container>>>.mce-fullscreen {
|
z-index: 10000;
|
}
|
.tinymce-textarea {
|
visibility: hidden;
|
z-index: -1;
|
}
|
.editor-custom-btn-container {
|
position: absolute;
|
right: 4px;
|
top: 4px;
|
/*z-index: 2005;*/
|
}
|
.fullscreen .editor-custom-btn-container {
|
z-index: 10000;
|
position: fixed;
|
}
|
.editor-upload-btn {
|
display: inline-block;
|
}
|
</style>
|
