<template>
|
<Editor
|
ref="editorRef"
|
v-model="currentValue"
|
:tinymce-script-src="`${baseUrl}tinymce/tinymce.min.js`"
|
:plugins="plugins"
|
:toolbar="toolbar"
|
:init="init"
|
output-format="html"
|
class="el-ext-editor"
|
/>
|
</template>
|
|
<script>
|
// eslint-disable-next-line
|
import tinymce from 'tinymce/tinymce'
|
import Editor from '@tinymce/tinymce-vue'
|
import 'tinymce/icons/default/icons'
|
import 'tinymce/plugins/image'
|
import 'tinymce/plugins/table'
|
import 'tinymce/plugins/lists' // 列表插件
|
import 'tinymce/plugins/wordcount' // 文字计数
|
import 'tinymce/plugins/preview' // 预览
|
import 'tinymce/plugins/emoticons' // emoji表情
|
import 'tinymce/plugins/emoticons/js/emojis.js' // 必须引入这个文件才有表情图库
|
import 'tinymce/plugins/code' // 编辑源码
|
import 'tinymce/plugins/link' // 链接插件
|
import 'tinymce/plugins/advlist' // 高级列表
|
import 'tinymce/plugins/autoresize' // 自动调整编辑器大小
|
import 'tinymce/plugins/searchreplace' // 查找替换
|
import 'tinymce/plugins/autolink' // 自动链接
|
import 'tinymce/plugins/visualblocks' // 显示元素范围
|
import 'tinymce/plugins/visualchars' // 显示不可见字符
|
import 'tinymce/plugins/charmap' // 特殊符号
|
import 'tinymce/plugins/importcss'
|
import 'tinymce/plugins/nonbreaking' // 插入不间断空格
|
import 'tinymce/plugins/anchor'
|
import 'tinymce/plugins/codesample'
|
import 'tinymce/plugins/fullscreen'
|
import 'tinymce/plugins/paste'
|
export default {
|
components: {
|
Editor,
|
},
|
props: {
|
initOptions: {
|
type: Object,
|
default: () => ({}),
|
},
|
value: {
|
type: String,
|
default: '',
|
},
|
plugins: {
|
type: [String, Array],
|
default:
|
'importcss autoresize searchreplace autolink code visualblocks visualchars fullscreen image link codesample table charmap nonbreaking anchor advlist lists wordcount charmap emoticons indent2em paste',
|
},
|
toolbar: {
|
type: [String, Array],
|
default: () => [
|
'code undo redo | bold italic underline strikethrough ltr rtl | align numlist bullist | link image | table | lineheight outdent indent indent2em | charmap emoticons | anchor',
|
'fontselect fontsizeselect | forecolor backcolor removeformat',
|
],
|
},
|
baseUrl: {
|
type: String,
|
default() {
|
return this.$config.baseUrl || '/'
|
},
|
},
|
},
|
data() {
|
return {
|
currentValue: '',
|
}
|
},
|
computed: {
|
init() {
|
return {
|
base_url: `${this.baseUrl}tinymce/`,
|
width: '100%',
|
min_height: 400,
|
max_height: 700,
|
language: 'zh_CN',
|
language_url: `${this.baseUrl}tinymce/langs/zh_CN.js`,
|
branding: false,
|
promotion: false,
|
convert_urls: false,
|
paste_preprocess: (plugin, args) => {
|
if (args.wordContent) {
|
this.$message.warning(
|
'检测到可能是从word中复制的内容，如果存在图片请通过编辑器的图片上传功能上传'
|
)
|
}
|
},
|
paste_data_images: true,
|
font_formats:
|
'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;',
|
fontsize_formats:
|
'10px 11px 12px 14px 16px 18px 20px 22px 24px 36px 48px 64px 72px',
|
images_upload_handler: async (blobInfo, success) => {
|
const formData = new FormData()
|
formData.append('file', blobInfo.blob())
|
const { code, data } = await this.$elBusHttp.request(
|
'flower/api/upload/oss/file',
|
{
|
method: 'post',
|
data: formData,
|
contentType: 'multipart/form-data',
|
}
|
)
|
if (code === 0) {
|
success(data[0]?.url)
|
}
|
},
|
...this.initOptions,
|
}
|
},
|
},
|
watch: {
|
value: {
|
immediate: true,
|
handler(value) {
|
this.currentValue = value || ''
|
},
|
},
|
currentValue(value) {
|
this.$emit('input', value)
|
this.$emit('change', value)
|
},
|
},
|
}
|
</script>
|
|
<style>
|
.tox-tinymce-aux {
|
z-index: 10000 !important;
|
}
|
</style>
|
