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

求助:Django环境下CKEditor5锚点插件添加及id属性被移除问题

解决CKEditor5在Django中锚点id被移除的问题

方法一:配置CKEditor5允许id属性

CKEditor5的内容过滤机制会自动移除未被白名单允许的属性,只需修改编辑器配置,让它允许目标元素的id属性即可:

前端JS配置(自定义构建场景)

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // 精准允许p标签的id属性,避免过度开放
        extraAllowedContent: 'p[id]',
        // 若需要支持更多元素,可扩展为 'p[id],h2[id],div[id]'
    } )
    .catch( error => {
        console.error( error );
    } );

Django后端配置(使用django-ckeditor包)

在settings.py的CKEditor配置中添加规则:

CKEDITOR_CONFIGS = {
    'default': {
        'extraAllowedContent': 'p[id]',
        # 保留其他原有配置
    },
}

方法二:自定义轻量锚点插件(无需第三方依赖)

如果找不到适配Django的现成插件,可以自己实现基础锚点功能:

  1. 编写自定义插件代码(需整合到CKEditor5自定义构建中):
import { Plugin } from '@ckeditor/ckeditor5-core';
import { ButtonView } from '@ckeditor/ckeditor5-ui';

export class AnchorSetter extends Plugin {
    init() {
        const editor = this.editor;

        // 添加工具栏按钮
        editor.ui.componentFactory.add( 'setAnchor', locale => {
            const view = new ButtonView( locale );
            view.set( {
                label: '设置锚点',
                tooltip: true,
                icon: '🔗' // 可替换为官方图标或自定义SVG
            } );

            view.on( 'execute', () => {
                const selectedElement = editor.model.document.selection.getSelectedElement();
                if ( selectedElement ) {
                    const anchorId = prompt( '输入锚点ID:' );
                    if ( anchorId ) {
                        editor.model.change( writer => {
                            writer.setAttribute( 'id', anchorId, selectedElement );
                        } );
                    }
                }
            } );
            return view;
        } );
    }
}
  1. 构建编辑器时引入插件并添加到工具栏:
ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ /* 已有插件 */, AnchorSetter ],
        toolbar: [ /* 已有按钮 */, 'setAnchor' ]
    } )

方法三:确保Django渲染时不过滤内容

在模板渲染编辑器内容时,使用safe过滤器防止Django自动转义或过滤属性:

{{ article.content|safe }}

注意:开放id属性权限后,要确保编辑器仅对可信用户开放,避免XSS注入风险。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.06.18 19:33:18