259 lines
9.0 KiB
Vue
259 lines
9.0 KiB
Vue
<template>
|
||
<div class="tinymce-boxz" style="width: 100%">
|
||
<Editor v-model="content" :init="init"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import tinymce from 'tinymce'
|
||
import Editor from "@tinymce/tinymce-vue";
|
||
import {defineProps} from "vue";
|
||
import {ElLoading, ElMessage, ElNotification} from "element-plus";
|
||
import {getToken} from '@/utils/auth'
|
||
import axios from "axios";
|
||
|
||
import 'tinymce/themes/silver'
|
||
import 'tinymce/icons/default/icons'
|
||
import 'tinymce/plugins/preview'
|
||
import 'tinymce/plugins/searchreplace'
|
||
import 'tinymce/plugins/autolink'
|
||
import 'tinymce/plugins/directionality'
|
||
import 'tinymce/plugins/visualblocks'
|
||
import 'tinymce/plugins/visualchars'
|
||
import 'tinymce/plugins/advlist'
|
||
import 'tinymce/plugins/fullscreen'
|
||
import 'tinymce/plugins/image'
|
||
import 'tinymce/plugins/link'
|
||
import 'tinymce/plugins/media'
|
||
import 'tinymce/plugins/template'
|
||
import 'tinymce/plugins/code'
|
||
import 'tinymce/plugins/codesample'
|
||
import 'tinymce/plugins/table'
|
||
import 'tinymce/plugins/pagebreak'
|
||
import 'tinymce/plugins/nonbreaking'
|
||
import 'tinymce/plugins/anchor'
|
||
import 'tinymce/plugins/insertdatetime'
|
||
import 'tinymce/plugins/lists'
|
||
import 'tinymce/plugins/wordcount'
|
||
import 'tinymce/plugins/autosave'
|
||
import '@/assets/axupimgs/plugin.js'//多图上传插件
|
||
|
||
const emit = defineEmits(['update:value'])
|
||
const props = defineProps({
|
||
//默认值
|
||
value: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
imageUrl: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
fileUrl: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
plugins: {
|
||
type: [String, Array],
|
||
default:
|
||
//axupimgs
|
||
"preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave",
|
||
},
|
||
toolbar: {
|
||
type: [String, Array],
|
||
default: [
|
||
"fullscreen undo redo | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | blockquote subscript superscript removeformat ",
|
||
"styleselect formatselect fontselect fontsizeselect | table image axupimgs media pagebreak insertdatetime selectall visualblocks searchreplace | code preview | indent2em lineheight formatpainter",
|
||
],
|
||
},
|
||
fontFormats: {
|
||
type: [String, Array],
|
||
default: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;"
|
||
},
|
||
width:{
|
||
type: String,
|
||
default: 'auto'
|
||
},
|
||
height:{
|
||
type: Number,
|
||
default: 500
|
||
}
|
||
})
|
||
const content = ref(props.value);
|
||
const imgUrl = ref();
|
||
// const apiKey = reactive("v4zo4n22oanvco29ws5drh0pecuf3gh53clx53cccj3grjwg");
|
||
const init = reactive({
|
||
language_url: '/langs/zh_CN.js', //汉化路径是自定义的
|
||
skin_url: '/skins/ui/oxide', //皮肤
|
||
content_css: '/skins/content/default/content.css',
|
||
language: 'zh_CN',
|
||
placeholder: "在这里输入文字", //textarea中的提示信息
|
||
min_width: 300,
|
||
min_height: 200,
|
||
width:props.width,
|
||
height: props.height, //注：引入autoresize插件时，此属性失效
|
||
resize: "both", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
|
||
promotion: false,
|
||
branding: false, //tiny技术支持信息是否显示
|
||
statusbar: false, //最下方的元素路径和字数统计那一栏是否显示
|
||
elementpath: false, //元素路径是否显示
|
||
font_formats: props.fontFormats, //字体样式
|
||
plugins: props.plugins, //插件配置 axupimgs indent2em
|
||
toolbar: props.toolbar, //工具栏配置，设为false则隐藏
|
||
menubar: "file edit view format table tools", //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
|
||
images_upload_url: '/workflow/process/file/upload', //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
|
||
// images_upload_base_path: '/demo', //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
|
||
paste_data_images: true, //图片是否可粘贴
|
||
file_picker_types: "file image", //file image media分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。想屏蔽某个插件的上传就去掉对应的参数
|
||
// 文件上传处理函数
|
||
setup: function (editor) {
|
||
editor.on('change', function (e) {
|
||
tinymce.activeEditor.save();//执行自动保存
|
||
});
|
||
},
|
||
//此处为图片上传处理函数
|
||
images_upload_handler: (blobInfo, success) => {
|
||
// new Promise((resolve, reject) => {
|
||
let formData = new FormData()
|
||
formData.append('file', blobInfo.blob())
|
||
//上传图片接口 上传成功后返回图片地址，用于显示在富文本中
|
||
uploadFile(formData, props.imageUrl, success)
|
||
// }),
|
||
},
|
||
file_picker_callback: (callback, value, meta) => {
|
||
// 使用案例http://tinymce.ax-z.cn/general/upload-images.php
|
||
// meta.filetype //根据这个判断点击的是什么file image media
|
||
let filetype; //限制文件的上传类型,需要什么就添加什么的后缀
|
||
if (meta.filetype == "image") {
|
||
filetype = ".jpg, .jpeg, .png, .gif, .ico, .svg";
|
||
} else if (meta.filetype == "media") {
|
||
filetype = ".mp3, .mp4, .avi, .mov";
|
||
} else {
|
||
filetype =
|
||
".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4, .jpg, .jpeg, .png, .gif, .ico, .svg";
|
||
}
|
||
let inputElem = document.createElement("input"); //创建文件选择
|
||
inputElem.setAttribute("type", "file");
|
||
inputElem.setAttribute("accept", filetype);
|
||
inputElem.click();
|
||
inputElem.onchange = () => {
|
||
let file = inputElem.files[0]; //获取文件信息
|
||
var xhr, formData;
|
||
xhr = new XMLHttpRequest();
|
||
xhr.withCredentials = false;
|
||
xhr.open('POST', import.meta.env.VITE_BASE_URL+props.imageUrl);
|
||
xhr.setRequestHeader(
|
||
'Authorization',getToken()
|
||
)
|
||
let loading= ElLoading.service({
|
||
lock: true,
|
||
text: '文件上传中...',
|
||
background: 'rgba(0, 0, 0, 0.7)',
|
||
})
|
||
xhr.onload = function() {
|
||
let res;
|
||
// if (xhr.status != 200) {
|
||
// failure('HTTP Error: ' + xhr.status);
|
||
// return;
|
||
// }
|
||
res = JSON.parse(xhr.responseText);
|
||
ElNotification({
|
||
title: '提示',
|
||
message: res.code === 1000 ? '上传成功' : '上传失败',
|
||
type: res.code === 1000 ? 'success' : 'error'
|
||
})
|
||
loading.close()
|
||
const fileUrl = res.data.url;
|
||
// '?fileId='+res.data.id+
|
||
callback(fileUrl+'?fileName='+res.data.originalFilename, {title: file.name });
|
||
};
|
||
formData = new FormData();
|
||
formData.append('file', file, file.name );
|
||
xhr.send(formData);
|
||
//
|
||
// let reader = new FileReader();
|
||
// reader.readAsDataURL(file);
|
||
// reader.onload = function () {
|
||
// let formData;
|
||
// let id = "blobid" + new Date().getTime();
|
||
// let blobCache = tinymce.activeEditor.editorUpload.blobCache;
|
||
// let base64 = reader.result.split(",")[1];
|
||
// let blobInfo = blobCache.create(id, file, base64);
|
||
// blobCache.add(blobInfo);
|
||
// // callback(blobInfo.blobUri(), {alt: file.name});
|
||
// formData = new FormData();
|
||
// formData.append('file', file, file.name );
|
||
// uploadFile(formData, props.imageUrl,callback)
|
||
// };
|
||
};
|
||
},
|
||
});
|
||
//内容有变化，就更新内容，将值返回给父组件
|
||
watch(() => {
|
||
emit("update:value", content.value);
|
||
});
|
||
const uploadFile = (formData, url,success) => {
|
||
let loading= ElLoading.service({
|
||
lock: true,
|
||
text: '图片上传中...',
|
||
background: 'rgba(0, 0, 0, 0.7)',
|
||
})
|
||
axios.post(
|
||
import.meta.env.VITE_BASE_URL + url,
|
||
formData,
|
||
{
|
||
headers: {
|
||
'Content-Type': 'multipart/form-data',
|
||
Authorization: getToken()
|
||
}
|
||
}
|
||
).then(res => {
|
||
// if (res.status !== 200) {
|
||
// ElMessage.error("上传失败!")
|
||
// }
|
||
let data = res.data
|
||
if (data.code !== 1000) {
|
||
ElMessage.error(data.msg)
|
||
loading.close()
|
||
}else {
|
||
success(data.data.url)
|
||
loading.close()
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.tox-sidebar-wrap{
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
// 滚动条轨道
|
||
&::-webkit-scrollbar-track {
|
||
background: rgb(239, 239, 239);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
// 小滑块
|
||
&::-webkit-scrollbar-thumb {
|
||
background: rgba(80, 81, 82, 0.29);
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
.tinymce-boxz > textarea {
|
||
display: none;
|
||
|
||
}
|
||
|
||
</style>
|
||
<style lang="scss">
|
||
/* 隐藏apikey没有绑定当前域名的提示 */
|
||
.tox-notifications-container .tox-notification--warning {
|
||
display: none !important;
|
||
}
|
||
|
||
.tox.tox-tinymce {
|
||
max-width: 100%;
|
||
}
|
||
</style>
|