在vueelement中使⽤tinymce富⽂本编辑器，解决tinymce在dialog对。。。在vue element中使⽤tinymce富⽂本编辑器，解决tinymce在dialog对话框中层级太低的问题
问题
更新tinymce版本导致
解决⽅案
1.在当前项⽬的node_modules 中 复制 tinymce
2. 粘贴到pubilc⽬录下
3.⽅法很简单，到项⽬public\tinymce\skins\ui\oxide下⾯的skin.min.css⽂件，将⾥⾯的z-index统⼀后⾯加五个零注意 min.css ⽂件 需要在系统盘⾥⾯才能看到，idea默认隐藏了
4.使⽤本地的tinymce
结果
正常显⽰
各国语⾔包下载地址
各国语⾔包下载地址 www.tiny.cloud/get-tiny/language-packages/
index.vue代码
<template>
<div :class="{fullscreen:fullscreen}"class="tinymce-container":>
<textarea :id="tinymceId"class="tinymce-textarea"/>
<div class="editor-custom-btn-container">
<editorImage color="#1890ff"class="editor-upload-btn" @successCBK="imageSuccessCBK"/> </div>
</div>
</template>
<script>
/**
* docs:
* panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce  */
import editorImage from'./components/EditorImage'
import plugins from'./plugins'
import toolbar from'./toolbar'
import load from'./dynamicLoadScript'
// why use this cdn, detail see github/PanJiaChen/tinymce-all-in-one
// const tinymceCDN = 'cdn.jsdelivr/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
// www.jsdelivr/package/npm/tinymce
// const tinymceCDN = 'cdn.jsdelivr/npm/tinymce@5.6.0/tinymce.min.js'
//使⽤本地的tinymce
const tinymceCDN ='/Tinymce/tinymce/tinymce.min.js'
export default{
name:'Tinymce',
components:{ editorImage },
props:{
id:{
type: String,
default:function(){
return'vue-tinymce-'++new Date()+((Math.random()*1000).toFixed(0)+'')
}
},
value:{
type: String,
default:''
},
toolbar:{
type: Array,
required:false,
default(){
return[]
}
},
menubar:{
type: String,
default:'file edit insert view format table'
},
height:{
type:[Number, String],
required:false,
default:360
},
width:{
type:[Number, String],
required:false,
default:'auto'
}
}
},
data(){
return{
hasChange:false,vue element admin
hasInit:false,
tinymceId:this.id,
fullscreen:false,
languageTypeList:{
'en':'en',
'zh':'zh_CN',
'es':'es_MX',
'ja':'ja'
}
}
},
computed:{
containerWidth(){
const width =this.width
if(/^[\d]+(\.[\d]+)?$/.test(width)){// matches `100`, `'100'` return`${width}px`
}
return width
}
},
watch:{
value(val){
if(!this.hasChange &&this.hasInit){
this.$nextTick(()=>
(this.tinymceId).setContent(val ||'')) }
}
},
mounted(){
this.init()
},
activated(){
if(window.tinymce){
this.initTinymce()
}
},
deactivated(){
this.destroyTinymce()
},
destroyed(){
this.destroyTinymce()
},
methods:{
init(){
// dynamic load tinymce from cdn
load(tinymceCDN,(err)=>{
if(err){
this.$(ssage)
return
}
this.initTinymce()
})
},
initTinymce(){
const _this =this
window.tinymce.init({
selector:`#${this.tinymceId}`,
//语⾔包地址
language_url:`/Tinymce/langs/zh_CN.js`,
language:this.languageTypeList['zh'],

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。