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
相关产品推荐
相关产品推荐

