RichTextEditor.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. /**
  2. * RichTextEditor.css - 富文本编辑器样式
  3. */
  4. .rich-text-editor-wrapper {
  5. position: relative;
  6. width: 100%;
  7. isolation: isolate;
  8. }
  9. /* 连接正文与左侧工具按钮,避免鼠标经过间隙时触发 hover 离开 */
  10. .rich-text-editor-wrapper::before {
  11. content: '';
  12. position: absolute;
  13. top: 0;
  14. left: -12px;
  15. width: 12px;
  16. height: 100%;
  17. pointer-events: auto;
  18. }
  19. .rich-text-editor {
  20. width: 100%;
  21. outline: none;
  22. white-space: pre-wrap;
  23. word-wrap: break-word;
  24. word-break: break-word;
  25. min-height: 1.5em;
  26. transition: all 0.2s ease;
  27. }
  28. /* 可编辑状态 */
  29. .rich-text-editor:not(.read-only) {
  30. cursor: text;
  31. }
  32. /* 移除hover和focus时的背景色 */
  33. .rich-text-editor:not(.read-only):hover {
  34. /* background-color: rgba(0, 0, 0, 0.02); */
  35. /* border-radius: 2px; */
  36. }
  37. .rich-text-editor:not(.read-only):focus {
  38. /* background-color: rgba(24, 144, 255, 0.05); */
  39. /* border-radius: 2px; */
  40. }
  41. /* 占位符 */
  42. .rich-text-editor:empty:before {
  43. content: attr(data-placeholder);
  44. color: #bfbfbf;
  45. pointer-events: none;
  46. }
  47. /* 只读模式 */
  48. .rich-text-editor.read-only {
  49. cursor: default;
  50. }
  51. /* 富文本样式 - 使用最高优先级并添加明显的视觉效果 */
  52. .rich-text-editor strong,
  53. .rich-text-editor b,
  54. .rich-text-editor-wrapper strong,
  55. .rich-text-editor-wrapper b {
  56. font-weight: 900 !important; /* 使用更粗的字重 */
  57. /* 使用粗体效果更明显的字体 */
  58. font-family: "Microsoft YaHei", "微软雅黑", "Arial", "Helvetica", sans-serif !important;
  59. /* 添加文字阴影增强视觉效果 */
  60. text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
  61. /* 确保继承父元素的颜色 */
  62. color: inherit !important;
  63. }
  64. .rich-text-editor em,
  65. .rich-text-editor i,
  66. .rich-text-editor-wrapper em,
  67. .rich-text-editor-wrapper i {
  68. font-style: italic !important;
  69. /* 增强斜体效果 */
  70. transform: skewX(-8deg);
  71. display: inline-block;
  72. /* 使用斜体效果更明显的字体 */
  73. font-family: "Times New Roman", "Georgia", "Palatino", serif !important;
  74. /* 确保继承父元素的颜色 */
  75. color: inherit !important;
  76. }
  77. .rich-text-editor u,
  78. .rich-text-editor-wrapper u {
  79. text-decoration: underline !important;
  80. text-underline-offset: 2px;
  81. /* 确保继承父元素的颜色 */
  82. color: inherit !important;
  83. }
  84. /* span元素 - 完全不设置任何color规则,让内联样式自然生效 */
  85. /* 选中文本高亮 */
  86. .rich-text-editor::selection {
  87. background-color: #bae7ff;
  88. }