TinyMCE 6 autoresize编辑器在iPhone上初始高度异常问题咨询

我在网站中使用TinyMCE 6的autoresize插件，目标是让编辑器初始为单行（外观类似单行文本框），隐藏菜单栏、工具栏及状态栏。该编辑器在Windows设备和iPad上表现正常，但在iPhone上初始化高度约为7行文本，远超设置的min_height=25；输入内容时可正常自动扩大，删除内容后仅能缩小到该异常初始高度，无法回到设置的最小高度。

初始化代码 #

tinymce.init({
      selector: elementid,
      plugins: 'autoresize',
      menubar: false,
      toolbar: false,
      statusbar: false,
      browser_spellcheck: true,
      promotion: false,
      contextmenu: false,
      autoresize_bottom_margin: 0,
      min_height:25,
      height:25,
      paste_as_text: true,
      newline_behavior: 'linebreak',
      placeholder:placeholder,
      formats: {
        bold : {inline : 'b' },  
        italic : {inline : 'i' },
        underline : {inline : 'u'}
      },
      content_style: `@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald&family=PT+Sans+Narrow&display=swap');
      body { `+fontcss+`;line-height: 1.2em; padding:0px !important; margin:3px !important}
      p {margin:0px}
      .mce-content-body[data-mce-placeholder] {
        cursor: text;
      }
      `
    });

效果对比截图 #

• iPhone端异常效果：
• 桌面端正常效果：

可能原因 #

• Safari移动端默认样式干扰：iPhone的Safari会给contenteditable元素添加特殊默认样式（如内边距、最小高度），覆盖TinyMCE的配置。
• autoresize插件计算偏差：插件在Safari移动端初始化时，未正确计算空内容/占位符的实际高度，导致初始高度异常。
• CSS优先级不足：自定义content_style中的样式在Safari移动端优先级不够，无法覆盖浏览器默认规则。

解决思路 #

• 强制覆盖Safari默认样式：在content_style中添加针对iOS Safari的样式重置：

  body {
    -webkit-appearance: none;
    min-height: 25px !important;
    height: auto !important;
  }
  .mce-content-body {
    overflow: hidden !important;
    min-height: 25px !important;
  }
  

• 通过初始化回调强制设置高度：添加autoresize_init_callback手动校正初始高度：

  autoresize_init_callback: function(editor) {
    editor.getBody().style.minHeight = '25px';
    editor.getBody().style.height = '25px';
    editor.resizeTo('100%', 25);
  }
  

• 调整高度配置逻辑：移除height设置，仅保留min_height:25，让autoresize插件完全控制高度变化，避免参数冲突。
• iOS用户代理针对性调整：检测到iOS设备时，额外注入样式修正：

  if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
    document.querySelector(elementid).style.minHeight = '25px';
  }
  

内容的提问来源于stack exchange，提问作者Ben Cahan