Tinymce 文本区域通过拖动底部状态栏调整大小

Posted 2023-05-09

【中文标题】Tinymce 文本区域通过拖动底部状态栏调整大小

【英文标题】：Tinymce text area resizing with dragging bottom status bar

【发布时间】：2020-10-19 19:48:30

【问题描述】：

我是 WordPress 新手。有没有办法通过拖动底部边框线来调整 TinyMCE 文本区域的大小？

任何帮助将不胜感激。

【问题讨论】：

有没有办法在底线添加resize实现？

【参考方案1】：

使用 ctrl+shift+I 检查该区域，然后出现 html 代码检查它并在右侧添加 CSS 尝试它，然后在 Wordpress 自定义中有额外的 CSS，因此您可以添加自定义 CSS

【参考方案2】：

我用一些 css 技巧实现了它。

     $('.tox-statusbar').css('padding', '0');
     $('.tox-statusbar__text-container').addClass('statusbar-text-container');
     $('.tox-statusbar__wordcount').addClass('statusbar-wordcount');
     $('.tox-statusbar__branding').addClass('d-none');
     $('.tox-statusbar__resize-handle').addClass('statusbar-resize-handle');

和;

.statusbar-text-container 
    position: absolute !important;
    width: 100% !important;


.statusbar-wordcount 
    margin-right: 3% !important;


.statusbar-resize-handle 
    margin-right: 0px !important;
    z-index: 1000 !important;
    width: 100% !important;
    cursor: ns-resize !important;
 

这实际上将 textarea 的默认调整大小部分扩展到 tinymce 底栏。