求助: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的现成插件,可以自己实现基础锚点功能:
- 编写自定义插件代码(需整合到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; } ); } }
- 构建编辑器时引入插件并添加到工具栏:
ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ /* 已有插件 */, AnchorSetter ], toolbar: [ /* 已有按钮 */, 'setAnchor' ] } )
方法三:确保Django渲染时不过滤内容
在模板渲染编辑器内容时,使用safe过滤器防止Django自动转义或过滤属性:
{{ article.content|safe }}
注意:开放id属性权限后,要确保编辑器仅对可信用户开放,避免XSS注入风险。
内容的提问来源于stack exchange,提问作者mago marto
相关产品推荐
相关产品推荐

