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

如何在CKEditor 5配置中为占位符添加换行符?

在CKEditor 5中实现多行占位符

要给CKEditor 5的占位符添加换行,直接在配置里写<br>或原生换行符默认不会生效——因为编辑器的占位符样式默认不支持多行渲染,需要通过配置文本换行符+自定义CSS的组合方式实现:

  1. 配置占位符文本时使用换行符\n
    在编辑器初始化配置中,用\n标记换行位置:

    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            placeholder: 'Type some\ncontent here!'
        } )
        .catch( error => {
            console.error( error );
        } );
    
  2. 添加自定义CSS让占位符支持多行
    编辑器默认的占位符样式会忽略换行,需要通过CSS开启多行渲染:

    /* 适配所有编辑器类型(inline和classic) */
    .ck.ck-editor__editable::placeholder {
        white-space: pre-line;
        line-height: 1.6; /* 可选,优化行间距 */
    }
    

完成以上两步后,占位符里的\n会被解析为换行,"content here!"就会显示在"Type some"下方。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.12 18:55:12