<template>
|
<div class="tinymce-box">
|
<editor v-model="textContent" :init="init"></editor>
|
</div>
|
</template>
|
|
<script>
|
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
|
import Editor from '@tinymce/tinymce-vue'
|
import 'tinymce/themes/silver/theme' // 主题文件
|
import 'tinymce/icons/default'
|
import 'tinymce/models/dom'
|
|
import 'tinymce/plugins/image' // 插入上传图片插件
|
import "tinymce/plugins/importcss"; //图片工具
|
import 'tinymce/plugins/media' // 插入视频插件
|
import 'tinymce/plugins/table' // 插入表格插件
|
import 'tinymce/plugins/lists' // 列表插件
|
import "tinymce/plugins/charmap"; // 特殊字符
|
import 'tinymce/plugins/wordcount' // 字数统计插件
|
import "tinymce/plugins/codesample"; // 插入代码
|
import "tinymce/plugins/code"; // 查看源码
|
import "tinymce/plugins/fullscreen"; //全屏
|
import 'tinymce/plugins/link' //
|
import 'tinymce/plugins/preview' // 预览
|
import "tinymce/plugins/template"; //插入模板
|
import 'tinymce/plugins/save' // 保存
|
import "tinymce/plugins/searchreplace"; //查询替换
|
import "tinymce/plugins/pagebreak"; //分页
|
import "tinymce/plugins/insertdatetime"; //时间插入
|
export default {
|
name: "Tinymce",
|
components: {Editor},
|
props: {
|
content: {
|
type: String,
|
default: ''
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
},
|
data() {
|
return {
|
init: {
|
language_url: './static/tinymce/zh_CN.js',
|
language: 'zh_CN',
|
height: 400,
|
skin_url: './static/tinymce/skins/ui/oxide',
|
content_css: './static/tinymce/skins/content/default/content.min.css',
|
plugins: [
|
'link','lists','image','code', 'table', 'wordcount', 'media'
|
],
|
toolbar: 'bold italic underline strikethrough fontsizeselect forecolor backcolor alignleft aligncenter alignright alignjustify bullist numlist link unlink image media table code removeformat',
|
branding: false,
|
convert_urls:false,
|
menubar: true,
|
promotion: false,
|
images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
|
let formdata = new FormData()
|
formdata.append('file', blobInfo.blob())
|
formdata.append('edit', true)
|
this.$axios.post('/admin/Upload/upload', formdata).then(res => {
|
resolve(res.data.data)
|
})
|
}),
|
},
|
textContent: this.content
|
}
|
},
|
watch: {
|
content (newValue) {
|
this.textContent = newValue
|
},
|
textContent (newValue) {
|
this.$emit('update:content', newValue)
|
}
|
},
|
mounted() {
|
tinymce.init({})
|
},
|
}
|
</script>
|
|
|
