You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SCEditor如何设置编辑器为空时默认字体为Arial?

SCEditor空内容时强制默认使用Arial字体的解决方案

SCEditor默认状态下编辑区无内容时会继承浏览器默认的衬线字体(多为Times类字体),可通过以下两种方案修改:

  • 方案1:修改初始化配置,注入自定义样式
    初始化编辑器时,通过style参数向编辑器内嵌的iframe中注入body默认样式,优先级最高,一次配置永久生效:
const editor = SCEditor.create(document.querySelector('#your-textarea'), {
  // 保留你原有全部配置项,新增以下style配置
  style: 'data:text/css;charset=utf-8,' + encodeURIComponent(`
    body {
      font-family: Arial, sans-serif !important;
      margin: 8px;
    }
  `)
});

该配置仅影响编辑器内的显示效果,不会被带入到用户提交的最终内容中。

  • 方案2:运行时动态修改编辑器样式
    如果已经完成编辑器初始化不方便修改配置,可以直接操作iframe的DOM注入样式:
// 获取编辑器body对应的文档对象,sceditorInstance替换为你的编辑器实例变量名
const editorDocument = sceditorInstance.getBody().ownerDocument;
const customStyle = editorDocument.createElement('style');
customStyle.textContent = 'body { font-family: Arial, sans-serif !important; }';
editorDocument.head.appendChild(customStyle);

补充说明:如果需要保证编辑效果和前端展示效果一致,建议给内容展示的容器也加上font-family: Arial, sans-serif;的CSS样式

内容的提问来源于stack exchange,提问作者DroidOS

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.01 04:39:03