tinymce 字号选择下拉框太长，怎么将他变短。

tinymce 字号选择下拉框太长，怎么将他变短

找了一下官方的配置，并没有找到对应的配置，所以只能自己另辟蹊径了。

这是刚开始的样子

1. 在 mounted 里面创建 MutationObserver 对 body 节点的监听，监听他孩子节点的变化

   mounted() {
       const mb = new MutationObserver(this.watchDom)
       mb.observe(document.body, { childList: true, subtree: true })
   }
   

2. 在监听的回调函数里面，获取字号下拉框的dom节点

   我这里他的节点是这个，你可以去看他的是哪个节点再去获取
   

   watchDom() {
       const menuDom = document.querySelectorAll('div[role="menu"]')[0]
   },
   

3. 接下来就是对dom节点的操作了，设置的高度不让他太长

   menuDom.style.['max-height'] = '150px'  // 设置最大高度为150px
   menuDom.style['overflow-y'] = 'auto'	// y轴方向超出自适应
   

4. 此时就已经下拉框就变短了，但你会发现所有的下拉框都变短了

5. 
   

6. 解决其他下拉框变短问题，加上条件判断只改字号选择下拉框，我这里他第一个字号选择节点对应的dom结构是这样的，那么只要判断打开的是不是这个字号选择的下拉框即可

如果打开的是字号选择下拉框就去更改他的高度即可
if (menuDom.children[0].children[0].title == '10px') {
    menuDom.style.height = '150px'
    menuDom.style['overflow-y'] = 'auto'
}

至此就解决了，但是 MutationObserver 的监听要记得销毁

完整代码示例

mounted() {
    const mb = new MutationObserver(this.watchDom)
    mb.observe(document.body, { childList: true, subtree: true })
}

// methods的回调函数
watchDom() {
    const menuDom = document.querySelectorAll('div[role="menu"]')[0]
    if (menuDom) {
        if (menuDom.children[0].children[0].title == '10px') {
            menuDom.style.height = '150px'
            menuDom.style['overflow-y'] = 'auto'
        }
    }
},