解决vue中使用tinymce在dialog对话框中层级低
1.安装:npm install tinymce -Stinymce默认英文界面,下载一个中文语言包zh_CN.js(https://www.tiny.cloud/get-tiny/language-packages/)文档地址:http://tinymce.ax-z.cn/2.把node_modules/tinynce里面的文件复制到static文件夹下3.main.js中引入tinymceEd
·
1.安装:npm install tinymce -S
tinymce默认英文界面,下载一个中文语言包zh_CN.js(https://www.tiny.cloud/get-tiny/language-packages/)
文档地址:http://tinymce.ax-z.cn/
2.把node_modules/tinynce里面的文件复制到static文件夹下
3.main.js中引入tinymce
Editor.vue
<template>
<div class="tinymce-editor">
<no-ssr>
<Editor v-model="myValue" :disabled="disabled" :init="init"></Editor>
</no-ssr>
</div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
let tinymce;
if (process.client) {
tinymce = require("tinymce/tinymce");
require("tinymce/themes/silver/theme");
require("tinymce/plugins/image");
require("tinymce/plugins/link");
require("tinymce/plugins/media");
require("tinymce/plugins/table");
require("tinymce/plugins/lists");
require("tinymce/plugins/contextmenu");
require("tinymce/plugins/wordcount");
require("tinymce/plugins/colorpicker");
require("tinymce/plugins/textcolor");
require("tinymce/plugins/fullscreen");
require("tinymce/icons/default");
}
export default {
props: {
value: {
type: String,
required: false,
},
// triggerChange: {
// type: Boolean,
// default: false,
// required: false,
// },
disabled: {
type: Boolean,
default: false,
},
plugins: {
type: [String, Array],
default:
"lists image link media table textcolor wordcount contextmenu fullscreen",
},
toolbar: {
type: [String, Array],
default:
"undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image table | removeformat | fullscreen"
},
width: {
type: Number,
default: 840,
},
height: {
type: Number,
default: 300,
},
},
components: {
Editor,
},
data() {
return {
//初始化配置
init: {
language_url: '/tinymce/langs/zh_CN.js',
language: "zh_CN",
skin_url: '/tinymce/skins/ui/oxide',
width: this.width,
height: this.height,
content_css: '/tinymce/skins/content/default/content.css',
object_resizing: false,
selector: "tinymce-editor",
plugins: this.plugins,
toolbar: this.toolbar,
branding: false,
menubar: true,
toolbar_drawer: false,
statusbar: false, // 隐藏底部状态栏
//预防xss攻击,同时不希望用户直接粘贴进来一些富文本,在你的 init 里面,添加以下属性
paste_preprocess: (pl, o) => {
o.content = $stripTags(o.content, "sup,sub");
},
images_upload_handler: (blobInfo, success) => {
let formData = new FormData();
formData.append("file", blobInfo.blob(), blobInfo.filename());
// this.$axios.post("/sys/upload/uploadMinio", formData).then((res) => {
// if (res.success) {
// if (res.message == "local") {
const img = "data:image/jpeg;base64," + blobInfo.base64();
success(img);
// } else {
// // let img = getFileAccessHttpUrl(res.message);
// success(img);
// }
// }
// });
},
},
myValue: this.value,
};
},
mounted() {
},
methods: {
// reload() {
// this.reloading = true;
// this.$nextTick(() => (this.reloading = false));
// },
// onClick(e) {
// this.$emit("onClick", e, tinymce);
// },
//可以添加一些自己的自定义事件,如清空内容
clear() {
this.myValue = "";
},
},
watch: {
myValue(newValue) {
// if (this.triggerChange) {
// this.$emit("change", newValue);
// } else {
this.$emit("input", newValue);
// }
},
},
};
</script>
<style lang="scss" scoped>
</style>
4.tinymce在dialog对话框中层级太低
找到static\tinymce\skins\ui\oxide下面的skin.min.css文件,将里面的z-index统一后面加五个零
更多推荐
已为社区贡献1条内容
所有评论(0)