feat: 初始化
This commit is contained in:
258
src/components/Tinymce.vue
Normal file
258
src/components/Tinymce.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<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:
|
||||
//
|
||||
"preview searchreplace autolink directionality visualblocks visualchars fullscreen image axupimgs 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]; //获取文件信息
|
||||
let 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, {text:file.name ,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>
|
||||
Reference in New Issue
Block a user