如何在Django CKEditor的textarea文本域中添加HTML标签与自定义CSS样式

可以在Django CKEditor的textarea文本域中添加自定义HTML代码与CSS样式，你提到的带跳转链接的图片效果完全可以实现，具体操作和配置方法如下：

Django CKEditor默认开启了HTML内容过滤规则，会自动删除不在白名单内的标签、属性和样式，需要先在项目settings.py中添加配置：

CKEDITOR_CONFIGS = {
    'default': {
        # 开启源码编辑按钮，方便直接写入HTML代码
        'toolbar': 'full',
        # 允许所有HTML内容，若面向公共用户使用建议按需指定允许的标签，避免XSS风险
        'allowedContent': True,
        # 额外允许style属性、自定义标签属性
        'extraAllowedContent': '*[*](style);',
    }
}

• 直接使用源码编辑模式写入：点击编辑器工具栏的「源码」按钮，直接粘贴或编写你需要的HTML代码、CSS样式即可，比如你需要的带跳转链接的图片，直接写入对应HTML代码，退出源码模式后就能看到渲染效果。
• CSS样式支持两种写法：可以给标签加行内style属性，也可以在源码顶部插入<style>标签编写全局样式，示例代码如下：

<!-- 自定义样式 -->
<style>
.article-img {
    border-radius: 8px;
    border: 1px solid #eee;
    max-width: 100%;
}
</style>
<p>
    <a href="你的跳转地址" rel="nofollow noreferrer">
        <img src="你的图片地址" alt="图片说明" class="article-img">
    </a>
</p>

Django模板默认会转义HTML字符，渲染富文本字段时需要加safe过滤器关闭转义，才能正常展示样式：

<!-- 模板文件中替换成你自己的富文本字段名 -->
{{ article.content|safe }}

如果你的富文本编辑器对普通用户开放编辑权限，不要直接设置allowedContent: True，建议手动指定允许的标签、属性和样式列表，防范XSS注入风险。

内容的提问来源于stack exchange，提问作者penk