django-ckeditor个性化配置
标签:
日期: 2024-02-23 | 作者: admin | 浏览: 234

django-ckeditor 默认的样式里,使用 Special Container 后,上下间距有点问题,想着优化下,找了好久,终于了解了。

1. 修改默认样式
// 默认样式文件路径为:site_env\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\styles.js
{
    name: 'Special Container',
    element: 'div',
    styles: {
	    padding: '5px 10px',
        // 增加上下间距
		margin: '0.2rem 0 0.8rem 0',
		background: '#eee',
		border: '1px solid #ccc',
        // 增加边框圆角
		'border-radius': '0.25rem',
	}
},
2. 加载默认配置
//ckeditor配置文件地址 site_env\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\config.js

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    // 增加默认样式文件
    config.stylesSet = 'default:./styles.js';
    // 修改格式化标签, 去除不需要的H1,H2,H3啥的(个人习惯)
    config.format_tags = 'p;h5;pre;address;div'
    // 上传图片不带长宽的内联样式
    config.disallowedContent = 'img[width,height];img{width,height};';
};
3. 上传的图片前台超宽显示问题
# 图片问题
p > img {
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 0.25rem;
}
4. 表格样式前台显示异常问题
# 表格不超宽
table{
    width: 100%;
}

# 加个边框
table, thead, tbody, tfoot, tr, td, th{
    border: 1px solid #2775B6;
}
5. blockquote显示问题 
blockquote {
    font-style: italic;
    border-style: solid;
    border-color: #ccc;
    border-width: 0;
    border-left-width: 1rem;
    padding-left: 1rem;
    margin-left: 0.5rem;
}