quill-react-commercial/assets/richTextEditor.less

A Quill component for React and more maturely.

// @import '~quill/dist/quill.snow.css';
@import './theme.less';
// 整体
.ql-editor-container {
  font-family: system-ui, -apple-system;
  .ql-container {
    border: 1px solid @editor-border;
    border-top: 0;
    font-size: 14px;
    overflow: hidden;
  }

  input.text-input[type='text'] {
    border: 1px solid @sub-color;
    height: 32px;
    border-radius: 4px;
    background-color: unset;
    padding: 6px 12px;
    line-height: 18px;
  }
  input.text-input[type='text']:active,
  input.text-input[type='text']:focus {
    border-color: @primary-color;
    outline: 0;
  }
  .ql-toolbar.ql-snow {
    border: 1px solid @editor-border;
    // button:hover, .ql-picker-item:hover, .ql-picker-label:hover {
    //   .ql-fill {
    //     fill: @primary-color;
    //   }
    //   .ql-stroke {
    //     fill: none;
    //     stroke: @primary-color;
    //   }
    // }
    .ql-picker-label {
      padding-left: 4px;
    }
  }
  .flex {
    display: flex;
  }
  .flex-column {
    display: flex;
    flex-direction: column;
  }
  .flex-center {
    justify-content: center;
    align-items: center;
  }
  .err-tips {
    color: @err-color;
    margin: 0;
  }
  .ql-icon {
    display: inline-flex;
    align-items: center;
    text-align: center;
    vertical-align: -0.125em;
  }
  .ql-icon:hover {
    .ql-fill {
      fill: @primary-color;
    }
  }
}

.ql-editor {
  line-height: 1.8;
  padding-top: 18px;
  &:before {
  }
  &:empty:before {
    content: attr(data-placeholder);
    color: red;
  }

  ol {
    padding-left: 0;
  }
  li {
    padding-left: 0;
    .ql-ui {
      position: static;
    }
    > .ql-ui::before {
      margin-left: 0;
      margin-right: 0;
      text-align: left;
      width: auto;
      padding-right: 8px;
      // color: @link-color;
    }
  }
  li.ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 20px;
  }
  li.ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 40px;
  }
  li.ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 60px;
  }
  li.ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 80px;
  }
  li.ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 100px;
  }
  ol li[data-list=ordered][data-start]:first-child > .ql-ui:before {
    counter-set: list-0 var(--list-item-start);
  }
  a {
    color: @link-color;
  }
}

// 字体大小
.ql-toolbar .ql-size .ql-picker-label::before,
.ql-toolbar .ql-size .ql-picker-item::before {
  content: '14px' !important;
}
.ql-toolbar .ql-size .ql-picker-label[data-value]::before,
.ql-toolbar .ql-size .ql-picker-item[data-value]::before {
  content: attr(data-value) !important;
}
// Header的显示
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value]::before {
  content: 'H' attr(data-value) !important;
}

// 字体、header 的中英文显示
.ql-toolbar .ql-picker.ql-font .ql-picker-label::before,
.ql-toolbar .ql-picker.ql-font .ql-picker-item::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before,
.ql-snow .ql-picker.ql-header .ql-picker-label::before {
  content: attr(data-before);
}
.ql-toolbar .ql-picker.ql-font .ql-picker-label[data-value]:not([data-before])::before,
.ql-toolbar .ql-picker.ql-font .ql-picker-item[data-value]:not([data-before])::before {
  content: attr(data-value);
}

/* Set content font-families */
.ql-font-wsYaHei {
  font-family: 'Microsoft YaHei', '微软雅黑';
}
.ql-font-songTi {
  font-family: SimSun, '宋体';
}
.ql-font-kaiTi {
  font-family: '楷体';
}
.ql-font-arial {
  font-family: arial;
}

.ql-snow .ql-picker.ql-size {
  width: 58px;
}
.ql-snow .ql-picker.ql-font {
  width: 80px;
}
.ql-snow .ql-picker.ql-header {
  width: 60px;
}

// 区块分割
.ql-toolbar .ql-formats:not(:last-of-type) {
  border-right: 1px solid @editor-border;
  padding-right: 4px;
  margin-right: 4px;
}
.ql-toolbar .ql-formats:last-of-type {
  margin-right: 4px;
}

// option的disable状态
.ql-formats button:disabled,
.ql-formats .picker-disable {
  opacity: 0.5;
  cursor: not-allowed;
  .ql-picker-label {
    cursor: not-allowed;
  }
}