| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- /**
- * RichTextEditor.css - 富文本编辑器样式
- */
- .rich-text-editor-wrapper {
- position: relative;
- width: 100%;
- isolation: isolate;
- }
- /* 连接正文与左侧工具按钮,避免鼠标经过间隙时触发 hover 离开 */
- .rich-text-editor-wrapper::before {
- content: '';
- position: absolute;
- top: 0;
- left: -12px;
- width: 12px;
- height: 100%;
- pointer-events: auto;
- }
- .rich-text-editor {
- width: 100%;
- outline: none;
- white-space: pre-wrap;
- word-wrap: break-word;
- word-break: break-word;
- min-height: 1.5em;
- transition: all 0.2s ease;
- }
- /* 可编辑状态 */
- .rich-text-editor:not(.read-only) {
- cursor: text;
- }
- /* 移除hover和focus时的背景色 */
- .rich-text-editor:not(.read-only):hover {
- /* background-color: rgba(0, 0, 0, 0.02); */
- /* border-radius: 2px; */
- }
- .rich-text-editor:not(.read-only):focus {
- /* background-color: rgba(24, 144, 255, 0.05); */
- /* border-radius: 2px; */
- }
- /* 占位符 */
- .rich-text-editor:empty:before {
- content: attr(data-placeholder);
- color: #bfbfbf;
- pointer-events: none;
- }
- /* 只读模式 */
- .rich-text-editor.read-only {
- cursor: default;
- }
- /* 富文本样式 - 使用最高优先级并添加明显的视觉效果 */
- .rich-text-editor strong,
- .rich-text-editor b,
- .rich-text-editor-wrapper strong,
- .rich-text-editor-wrapper b {
- font-weight: 900 !important; /* 使用更粗的字重 */
- /* 使用粗体效果更明显的字体 */
- font-family: "Microsoft YaHei", "微软雅黑", "Arial", "Helvetica", sans-serif !important;
- /* 添加文字阴影增强视觉效果 */
- text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
- /* 确保继承父元素的颜色 */
- color: inherit !important;
- }
- .rich-text-editor em,
- .rich-text-editor i,
- .rich-text-editor-wrapper em,
- .rich-text-editor-wrapper i {
- font-style: italic !important;
- /* 增强斜体效果 */
- transform: skewX(-8deg);
- display: inline-block;
- /* 使用斜体效果更明显的字体 */
- font-family: "Times New Roman", "Georgia", "Palatino", serif !important;
- /* 确保继承父元素的颜色 */
- color: inherit !important;
- }
- .rich-text-editor u,
- .rich-text-editor-wrapper u {
- text-decoration: underline !important;
- text-underline-offset: 2px;
- /* 确保继承父元素的颜色 */
- color: inherit !important;
- }
- /* span元素 - 完全不设置任何color规则,让内联样式自然生效 */
- /* 选中文本高亮 */
- .rich-text-editor::selection {
- background-color: #bae7ff;
- }
|