调整wysihtml5中iframe滚动条位置至左侧以适配阿拉伯视图

你遇到的问题我之前也碰到过——单纯给iframe设置direction:rtl确实没法让滚动条跑到左侧，因为wysihtml5的sandbox iframe是个独立的文档容器，得同时调整iframe本身和内部文档的样式才行。下面给你两个可行的解决方案：

方案一：通过编辑器配置注入自定义样式 #

wysihtml5支持初始化时加载自定义样式表，你可以专门写一个适配RTL的样式文件，然后在编辑器配置里引入：

首先，创建一个rtl-editor.css文件，内容如下：

/* 强制内部文档为RTL方向 */
body {
  direction: rtl !important;
  overflow-y: scroll;
  text-align: right;
}

/* 针对WebKit内核浏览器（Chrome、Safari）调整滚动条位置到左侧 */
body::-webkit-scrollbar {
  direction: ltr;
  width: 10px;
}

body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

body::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* 适配Firefox浏览器 */
@supports (scrollbar-width: thin) {
  body {
    scrollbar-width: thin;
  }
}

然后在初始化wysihtml5编辑器时，把这个样式表加进去：

var editor = new wysihtml5.Editor("your-textarea-id", {
  // 保留你原有的其他配置
  stylesheets: [
    // 这里添加你的自定义RTL样式表路径
    "/path/to/rtl-editor.css"
  ]
});

方案二：通过JavaScript直接修改iframe内部样式 #

如果没法通过编辑器配置加载样式表，你可以等iframe加载完成后，直接往内部文档注入样式：

// 获取目标iframe
const sandboxIframe = document.querySelector('.wysihtml5-sandbox');

// 等iframe加载完成后操作内部文档
sandboxIframe.onload = function() {
  const innerDoc = sandboxIframe.contentDocument || sandboxIframe.contentWindow.document;
  const styleEl = innerDoc.createElement('style');
  
  styleEl.textContent = `
    body {
      direction: rtl !important;
      overflow-y: scroll;
      text-align: right;
    }
    body::-webkit-scrollbar {
      direction: ltr;
      width: 10px;
    }
    body::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    body::-webkit-scrollbar-thumb {
      background: #888;
    }
  `;
  
  innerDoc.head.appendChild(styleEl);
};

关键说明 #

• 为什么单独设置iframe的direction:rtl没用？因为iframe的内部文档是独立的DOM环境，这个属性只会影响iframe元素本身的布局，不会穿透到内部的编辑器内容区。
• WebKit浏览器需要额外设置滚动条的direction:ltr，这样在RTL的文档里，滚动条就会自动切换到左侧显示。

内容的提问来源于stack exchange，提问作者Ahmad Samilo