<template>
|
<div>
|
<editor ref="editor" id="tinymce" v-model="tinymceHtml" :init="editorInit"></editor>
|
</div>
|
</template>
|
<script>
|
import tinymce from 'tinymce/tinymce'
|
import 'tinymce/themes/silver/theme'
|
import editor from '@tinymce/tinymce-vue'
|
import 'tinymce/icons/default/icons'
|
// 编辑器插件plugins
|
import 'tinymce/plugins/image'
|
import 'tinymce/plugins/link'
|
import 'tinymce/plugins/code'
|
import 'tinymce/plugins/table'
|
import 'tinymce/plugins/lists'
|
import 'tinymce/plugins/contextmenu'
|
import 'tinymce/plugins/wordcount'
|
import 'tinymce/plugins/colorpicker'
|
import 'tinymce/plugins/textcolor'
|
import 'tinymce/skins/ui/oxide/skin.css'
|
import axios from 'axios'
|
import Cookie from 'js-cookie'
|
// 跨域认证信息 header 名
|
const xsrfHeaderName = 'Authorization'
|
export default {
|
components: { editor },
|
props: ['contentTxt'],
|
data () {
|
return {
|
editorInit: {
|
language_url: process.env.VUE_APP_ROUTER_BASE ? `/${process.env.VUE_APP_ROUTER_BASE}/tinymce/langs/zh_CN.js` : '/tinymce/langs/zh_CN.js',
|
language: 'zh_CN',
|
content_css: process.env.VUE_APP_ROUTER_BASE ? `/${process.env.VUE_APP_ROUTER_BASE}/tinymce/skins/content/default/content.css` : '/tinymce/skins/content/default/content.css', // 富文本编辑器内容区域样式
|
skin_url: process.env.VUE_APP_ROUTER_BASE ? `/${process.env.VUE_APP_ROUTER_BASE}/tinymce/skins/ui/oxide` : '/tinymce/skins/ui/oxide',
|
height: 300,
|
plugins: ['image', 'code'],
|
menubar: 'file edit insert view format',
|
toolbar:
|
'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
|
branding: false,
|
convert_urls: false, // 显示图片地址为绝对路径
|
images_upload_handler: function (blobInfo, succFun, failFun) {
|
const file = blobInfo.blob()
|
const param = new FormData()
|
param.append('file', file)
|
param.append('path', 'productEditor')
|
const config = {
|
headers: {
|
'Content-Type': 'multipart/form-data',
|
Authorization: 'Bearer ' + Cookie.get(xsrfHeaderName)
|
}
|
}
|
// 添加请求头
|
const baseUrl = process.env.VUE_APP_CURRENTMODE === 'development' ? '/api' : process.env.VUE_APP_API_BASE_URL
|
axios.post(`${baseUrl}/ycloud-file-center/file/upload`, param, config)
|
.then(res => {
|
if (res.status === 200 && res.data.code === '0') {
|
succFun(res.data.data.url)
|
} else {
|
failFun('图片上传失败')
|
}
|
}).catch(e => {
|
failFun('图片上传失败')
|
})
|
}
|
},
|
tinymceHtml: null
|
}
|
},
|
created () {
|
this.tinymceHtml = this.contentTxt
|
},
|
watch: {
|
contentTxt: {
|
handler: function (newValue, oldValue) {
|
this.tinymceHtml = newValue || ''
|
},
|
immediate: true
|
},
|
tinymceHtml (newValue, oldValue) {
|
this.$emit('get-context', newValue)
|
}
|
},
|
mounted () {
|
tinymce.init({})
|
}
|
}
|
</script>
|
