editor.css 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. .ql-container {
  2. display: block;
  3. position: relative;
  4. box-sizing: border-box;
  5. user-select: text;
  6. outline: none;
  7. overflow: hidden;
  8. width: 100%;
  9. height: 200px;
  10. min-height: 200px;
  11. }
  12. .ql-container[hidden] {
  13. display: none;
  14. }
  15. .ql-container .ql-editor {
  16. position: relative;
  17. font-size: inherit;
  18. line-height: inherit;
  19. font-family: inherit;
  20. min-height: inherit;
  21. width: 100%;
  22. height: 100%;
  23. padding: 0;
  24. overflow-x: hidden;
  25. overflow-y: auto;
  26. -webkit-tap-highlight-color: transparent;
  27. -webkit-touch-callout: none;
  28. -webkit-overflow-scrolling: touch;
  29. }
  30. .ql-container .ql-editor::-webkit-scrollbar {
  31. width: 0 !important;
  32. }
  33. .ql-container .ql-editor.scroll-disabled {
  34. overflow: hidden;
  35. }
  36. .ql-container .ql-image-overlay {
  37. display: flex;
  38. position: absolute;
  39. box-sizing: border-box;
  40. border: 1px dashed #ccc;
  41. justify-content: center;
  42. align-items: center;
  43. user-select: none;
  44. }
  45. .ql-container .ql-image-overlay .ql-image-size {
  46. position: absolute;
  47. padding: 4px 8px;
  48. text-align: center;
  49. background-color: #fff;
  50. color: #888;
  51. border: 1px solid #ccc;
  52. box-sizing: border-box;
  53. opacity: 0.8;
  54. right: 4px;
  55. top: 4px;
  56. font-size: 12px;
  57. display: inline-block;
  58. width: auto;
  59. }
  60. .ql-container .ql-image-overlay .ql-image-toolbar {
  61. position: relative;
  62. text-align: center;
  63. box-sizing: border-box;
  64. background: #000;
  65. border-radius: 5px;
  66. color: #fff;
  67. font-size: 0;
  68. min-height: 24px;
  69. z-index: 100;
  70. }
  71. .ql-container .ql-image-overlay .ql-image-toolbar span {
  72. display: inline-block;
  73. cursor: pointer;
  74. padding: 5px;
  75. font-size: 12px;
  76. border-right: 1px solid #fff;
  77. }
  78. .ql-container .ql-image-overlay .ql-image-toolbar span:last-child {
  79. border-right: 0;
  80. }
  81. .ql-container .ql-image-overlay .ql-image-toolbar span.triangle-up {
  82. padding: 0;
  83. position: absolute;
  84. top: -12px;
  85. left: 50%;
  86. transform: translatex(-50%);
  87. width: 0;
  88. height: 0;
  89. border-width: 6px;
  90. border-style: solid;
  91. border-color: transparent transparent black transparent;
  92. }
  93. .ql-container .ql-image-overlay .ql-image-handle {
  94. position: absolute;
  95. height: 12px;
  96. width: 12px;
  97. border-radius: 50%;
  98. border: 1px solid #ccc;
  99. box-sizing: border-box;
  100. background: #fff;
  101. }
  102. .ql-container img {
  103. display: inline-block;
  104. max-width: 100%;
  105. }
  106. .ql-clipboard p {
  107. margin: 0;
  108. padding: 0;
  109. }
  110. .ql-editor {
  111. box-sizing: border-box;
  112. height: 100%;
  113. outline: none;
  114. overflow-y: auto;
  115. tab-size: 4;
  116. -moz-tab-size: 4;
  117. text-align: left;
  118. white-space: pre-wrap;
  119. word-wrap: break-word;
  120. }
  121. .ql-editor > * {
  122. cursor: text;
  123. }
  124. .ql-editor p,
  125. .ql-editor ol,
  126. .ql-editor ul,
  127. .ql-editor pre,
  128. .ql-editor blockquote,
  129. .ql-editor h1,
  130. .ql-editor h2,
  131. .ql-editor h3,
  132. .ql-editor h4,
  133. .ql-editor h5,
  134. .ql-editor h6 {
  135. margin: 0;
  136. padding: 0;
  137. counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  138. }
  139. .ql-editor ol > li,
  140. .ql-editor ul > li {
  141. list-style-type: none;
  142. }
  143. .ql-editor ul > li::before {
  144. content: '\2022';
  145. }
  146. .ql-editor ul[data-checked=true],
  147. .ql-editor ul[data-checked=false] {
  148. pointer-events: none;
  149. }
  150. .ql-editor ul[data-checked=true] > li *,
  151. .ql-editor ul[data-checked=false] > li * {
  152. pointer-events: all;
  153. }
  154. .ql-editor ul[data-checked=true] > li::before,
  155. .ql-editor ul[data-checked=false] > li::before {
  156. color: #777;
  157. cursor: pointer;
  158. pointer-events: all;
  159. }
  160. .ql-editor ul[data-checked=true] > li::before {
  161. content: '\2611';
  162. }
  163. .ql-editor ul[data-checked=false] > li::before {
  164. content: '\2610';
  165. }
  166. .ql-editor li::before {
  167. display: inline-block;
  168. white-space: nowrap;
  169. width: 2em;
  170. }
  171. .ql-editor ol li {
  172. counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  173. counter-increment: list-0;
  174. }
  175. .ql-editor ol li:before {
  176. content: counter(list-0, decimal) '. ';
  177. }
  178. .ql-editor ol li.ql-indent-1 {
  179. counter-increment: list-1;
  180. }
  181. .ql-editor ol li.ql-indent-1:before {
  182. content: counter(list-1, lower-alpha) '. ';
  183. }
  184. .ql-editor ol li.ql-indent-1 {
  185. counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  186. }
  187. .ql-editor ol li.ql-indent-2 {
  188. counter-increment: list-2;
  189. }
  190. .ql-editor ol li.ql-indent-2:before {
  191. content: counter(list-2, lower-roman) '. ';
  192. }
  193. .ql-editor ol li.ql-indent-2 {
  194. counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  195. }
  196. .ql-editor ol li.ql-indent-3 {
  197. counter-increment: list-3;
  198. }
  199. .ql-editor ol li.ql-indent-3:before {
  200. content: counter(list-3, decimal) '. ';
  201. }
  202. .ql-editor ol li.ql-indent-3 {
  203. counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
  204. }
  205. .ql-editor ol li.ql-indent-4 {
  206. counter-increment: list-4;
  207. }
  208. .ql-editor ol li.ql-indent-4:before {
  209. content: counter(list-4, lower-alpha) '. ';
  210. }
  211. .ql-editor ol li.ql-indent-4 {
  212. counter-reset: list-5 list-6 list-7 list-8 list-9;
  213. }
  214. .ql-editor ol li.ql-indent-5 {
  215. counter-increment: list-5;
  216. }
  217. .ql-editor ol li.ql-indent-5:before {
  218. content: counter(list-5, lower-roman) '. ';
  219. }
  220. .ql-editor ol li.ql-indent-5 {
  221. counter-reset: list-6 list-7 list-8 list-9;
  222. }
  223. .ql-editor ol li.ql-indent-6 {
  224. counter-increment: list-6;
  225. }
  226. .ql-editor ol li.ql-indent-6:before {
  227. content: counter(list-6, decimal) '. ';
  228. }
  229. .ql-editor ol li.ql-indent-6 {
  230. counter-reset: list-7 list-8 list-9;
  231. }
  232. .ql-editor ol li.ql-indent-7 {
  233. counter-increment: list-7;
  234. }
  235. .ql-editor ol li.ql-indent-7:before {
  236. content: counter(list-7, lower-alpha) '. ';
  237. }
  238. .ql-editor ol li.ql-indent-7 {
  239. counter-reset: list-8 list-9;
  240. }
  241. .ql-editor ol li.ql-indent-8 {
  242. counter-increment: list-8;
  243. }
  244. .ql-editor ol li.ql-indent-8:before {
  245. content: counter(list-8, lower-roman) '. ';
  246. }
  247. .ql-editor ol li.ql-indent-8 {
  248. counter-reset: list-9;
  249. }
  250. .ql-editor ol li.ql-indent-9 {
  251. counter-increment: list-9;
  252. }
  253. .ql-editor ol li.ql-indent-9:before {
  254. content: counter(list-9, decimal) '. ';
  255. }
  256. .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  257. padding-left: 2em;
  258. }
  259. .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  260. padding-left: 2em;
  261. }
  262. .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  263. padding-right: 2em;
  264. }
  265. .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  266. padding-right: 2em;
  267. }
  268. .ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  269. padding-left: 4em;
  270. }
  271. .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  272. padding-left: 4em;
  273. }
  274. .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  275. padding-right: 4em;
  276. }
  277. .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  278. padding-right: 4em;
  279. }
  280. .ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  281. padding-left: 6em;
  282. }
  283. .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  284. padding-left: 6em;
  285. }
  286. .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  287. padding-right: 6em;
  288. }
  289. .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  290. padding-right: 6em;
  291. }
  292. .ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  293. padding-left: 8em;
  294. }
  295. .ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  296. padding-left: 8em;
  297. }
  298. .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  299. padding-right: 8em;
  300. }
  301. .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  302. padding-right: 8em;
  303. }
  304. .ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  305. padding-left: 10em;
  306. }
  307. .ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  308. padding-left: 10em;
  309. }
  310. .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  311. padding-right: 10em;
  312. }
  313. .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  314. padding-right: 10em;
  315. }
  316. .ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  317. padding-left: 12em;
  318. }
  319. .ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  320. padding-left: 12em;
  321. }
  322. .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  323. padding-right: 12em;
  324. }
  325. .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  326. padding-right: 12em;
  327. }
  328. .ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  329. padding-left: 14em;
  330. }
  331. .ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  332. padding-left: 14em;
  333. }
  334. .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  335. padding-right: 14em;
  336. }
  337. .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  338. padding-right: 14em;
  339. }
  340. .ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  341. padding-left: 16em;
  342. }
  343. .ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  344. padding-left: 16em;
  345. }
  346. .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  347. padding-right: 16em;
  348. }
  349. .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  350. padding-right: 16em;
  351. }
  352. .ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  353. padding-left: 18em;
  354. }
  355. .ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  356. padding-left: 18em;
  357. }
  358. .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  359. padding-right: 18em;
  360. }
  361. .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  362. padding-right: 18em;
  363. }
  364. .ql-editor .ql-direction-rtl {
  365. direction: rtl;
  366. text-align: inherit;
  367. }
  368. .ql-editor .ql-align-center {
  369. text-align: center;
  370. }
  371. .ql-editor .ql-align-justify {
  372. text-align: justify;
  373. }
  374. .ql-editor .ql-align-right {
  375. text-align: right;
  376. }
  377. .ql-editor.ql-blank::before {
  378. color: rgba(0, 0, 0, 0.6);
  379. content: attr(data-placeholder);
  380. font-style: italic;
  381. pointer-events: none;
  382. position: absolute;
  383. }
  384. .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  385. pointer-events: none;
  386. }
  387. .ql-clipboard {
  388. left: -100000px;
  389. height: 1px;
  390. overflow-y: hidden;
  391. position: absolute;
  392. top: 50%;
  393. }