django-ckeditor个性化配置
分类:
入门到放弃
日期: 2024-02-23 | 作者: admin
| 浏览:
402
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;
}
相关文章