CKEditor系列（六）改造原编辑器默认样式dom结构效果对比

前端

2024-01-15 01:24:38

初次使用CKEditor时，发现CKEditor有很多需要注意的地方，并且不能完全与其他富文本编辑器通用。很多文章、网站都声称CKEditor很好用，而且有着简洁的源码架构。但实际改造时发现CKEditor有很多地方需要更改。

为何要改造原编辑器的默认样式dom结构？

原编辑器的默认样式实现并不能完全同步对齐到新迁移的CKEditor，而且原来的实现并不能和编辑器其它功能完美配合。比如：

原编辑器的默认样式使用class进行定义，而CKEditor使用style进行定义。
原编辑器的默认样式没有考虑兼容性，而CKEditor考虑到了兼容性。
原编辑器的默认样式没有考虑扩展性，而CKEditor考虑到了扩展性。

改造后的效果

改造后的效果如下：

原编辑器的默认样式完全同步对齐到了新迁移的CKEditor。
原编辑器的默认样式可以和编辑器其它功能完美配合。
原编辑器的默认样式考虑了兼容性和扩展性。

改造过程

改造过程主要分为以下几个步骤：

分析原编辑器的默认样式实现。
编写改造后的默认样式。
测试改造后的默认样式。

改造后的默认样式

改造后的默认样式如下：

/* 段落 */
p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

/* 标题 */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

h4 {
  font-size: 14px;
}

h5 {
  font-size: 12px;
}

h6 {
  font-size: 10px;
}

/* 列表 */
ul, ol {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

ol {
  list-style-type: decimal;
}

/* 链接 */
a {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #333;
  text-decoration: underline;
}