Ckedit默认的文本样式并不能完全满足我们排版的需求，应该需要自定义一部分样式，已丰富博客内容。具体方式如下：

1、修改Ckedit的配置，选择文本格式（基本/完整HTML），并在样式中新增需要扩展样式。

注意： 每个样式一行，格式为: element.classA.classB|样式名，其中classA，ClassB要在样式文件中存在。ClassA，ClassB的数量，基于实际情况增加或修改，但应至少有一个Class。

p.inlinecode|行内代码
p.callout-info|信息块
p.callout-warning|警告块
p.callout-success|成功块
p.callout-danger|危险块

2、样式文件中增加步骤1中的Class，例如：

.inlinecode {
    @apply bg-gray-50 dark:bg-blue-950/30 rounded-lg p-2 border-l-4 border-sky-600 hover:shadow-lg hover:shadow-sky-100/50 dark:hover:shadow-sky-900/20 transition-all duration-300;
  }

  blockquote {
    @apply my-4 p-4 border-l-4 border-sky-600 bg-gray-50 dark:bg-blue-950/30 rounded-lg hover:shadow-lg hover:shadow-sky-100/50 dark:hover:shadow-sky-900/20 transition-all duration-300;
  }

  .callout-info {
    @apply bg-sky-50 dark:bg-blue-950/30 rounded-lg p-4 border-l-4 border-sky-600 hover:shadow-lg hover:shadow-sky-100/50 dark:hover:shadow-sky-900/20 transition-all duration-300;
  }

  .callout-warning {
    @apply bg-yellow-50 dark:bg-yellow-950/30 rounded-lg p-4 border-l-4 border-yellow-600 hover:shadow-lg hover:shadow-yellow-100/50 dark:hover:shadow-yellow-900/20 transition-all duration-300;
  }

  .callout-danger {
    @apply bg-red-50 dark:bg-red-950/30 rounded-lg p-4 border-l-4 border-red-600 hover:shadow-lg hover:shadow-red-100/50 dark:hover:shadow-red-900/20 transition-all duration-300;
  }

  .callout-success {
    @apply bg-green-50 dark:bg-green-950/30 rounded-lg p-4 border-l-4 border-green-600 hover:shadow-lg hover:shadow-green-100/50 dark:hover:shadow-green-900/20 transition-all duration-300;
  }

3、创建内容时，选择对应的样式即可。

注意： 编辑器下方的文本格式-完整/基本的HTML要和你在步骤1中配置的保持一致。

常见问题：

问题1：经常性的出现点击编辑器样式下拉框，不显示新增的样式。

解决方案：element要匹配，比如当前元素为p，如果设置为div，则不能正常显示。