├── .gitignore ├── .idea └── workspace.xml ├── .travis.yml ├── Gemfile ├── LICENSE.txt ├── README.md ├── Rakefile ├── app └── assets │ ├── javascripts │ ├── quill.core.js │ ├── quill.global.js │ └── quill.min.js │ └── stylesheets │ ├── quill.bubble.css │ ├── quill.core.css │ └── quill.snow.css ├── bin ├── console └── setup ├── lib └── quilljs │ ├── rails.rb │ └── rails │ └── version.rb ├── quilljs-rails.gemspec └── test ├── quilljs └── rails_test.rb └── test_helper.rb /.gitignore: -------------------------------------------------------------------------------- 1 | /.bundle/ 2 | /.yardoc 3 | /Gemfile.lock 4 | /_yardoc/ 5 | /coverage/ 6 | /doc/ 7 | /pkg/ 8 | /spec/reports/ 9 | /tmp/ 10 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 71 | 72 | 73 | 75 | 76 | 90 | 91 | 92 | 93 | 94 | true 95 | DEFINITION_ORDER 96 | 97 | 98 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 127 | 128 | 131 | 132 | 133 | 134 | 137 | 138 | 141 | 142 | 145 | 146 | 149 | 150 | 151 | 152 | 155 | 156 | 159 | 160 | 163 | 164 | 167 | 168 | 171 | 172 | 173 | 174 | 177 | 178 | 181 | 182 | 185 | 186 | 189 | 190 | 191 | 192 | 195 | 196 | 199 | 200 | 203 | 204 | 207 | 208 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | project 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 1487101611918 364 | 373 | 374 | 375 | 376 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 404 | 405 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: ruby 3 | rvm: 4 | - 2.1.3 5 | before_install: gem install bundler -v 1.13.6 6 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # Specify your gem's dependencies in quilljs-rails.gemspec 4 | gemspec 5 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Abhinav Mathur 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Quilljs::Rails 2 | 3 | [![Gem Version](https://badge.fury.io/rb/quilljs-rails.svg)](https://badge.fury.io/rb/quilljs-rails) 4 | [![Gem](https://img.shields.io/gem/dt/quilljs-rails.svg)](https://rubygems.org/gems/quilljs-rails) 5 | 6 | This gem adds a Quill rich editor to an existing text field or text area. 7 | [Quill - Your powerful, rich text editor](http://quilljs.com/) 8 | ## Installation 9 | 10 | Add this line to your application's Gemfile: 11 | 12 | ```ruby 13 | gem 'quilljs-rails', :git => 'git://github.com/abhinavmathur/quilljs-rails.git' 14 | ``` 15 | 16 | And then execute: 17 | 18 | $ bundle 19 | 20 | 21 | ## Usage 22 | 23 | ### From CDN(recommended) 24 | Add these lines in the head section of application.html.erb 25 | 26 | 27 | 28 | Then add this line to your application.js file 29 | 30 | ```ruby 31 | //= require quill.global 32 | ``` 33 | 34 | Add the class `quill_container` to the desired text_field or text_area 35 | 36 | Eg. with `bootstrap_form_for`, 37 | 38 | <%= f.text_field :title, label: 'Title', type: 'text', class: 'quill_container' %> 39 | 40 | With `Simple form`, 41 | 42 | <%= f.input :title, input_html: { class: 'quill_container' } %> 43 | 44 | Quilljs loads with these defaults :- 45 | 46 | ```javascript 47 | 48 | theme: 'snow', 49 | modules: { 50 | toolbar: [ 51 | [{ 'header': [1, 2, 3, false] }], 52 | [{ 'color': [] }, { 'background': [] }], 53 | ['bold', 'italic', 'underline', 'strike'], 54 | ['blockquote', 'code-block'], 55 | [{ 'list': 'ordered'}, { 'list': 'bullet' }], 56 | [{ 'indent': '-1'}, { 'indent': '+1' }], 57 | ['clean'] 58 | ] 59 | } 60 | 61 | ``` 62 | 63 | In order to customize your defaults, this gem comes with a global javascript object. You can 64 | setup the global object(in a js file) like this :- 65 | 66 | ```javascript 67 | var defaults = { 68 | theme: 'snow', 69 | modules: { 70 | toolbar: [ 71 | [{ 'header': [1, 2, 3, false] }], 72 | [{ 'color': [] }, { 'background': [] }], 73 | ['bold', 'italic', 'underline', 'strike'], 74 | ['blockquote', 'code-block'], 75 | [{ 'list': 'ordered'}, { 'list': 'bullet' }], 76 | [{ 'indent': '-1'}, { 'indent': '+1' }], 77 | ['clean'] 78 | ] 79 | } 80 | }; 81 | 82 | //This is the global config object 83 | Quilljs.setDefaults(defaults) 84 | ``` 85 | 86 | ### From the gem 87 | Add these lines to application.js 88 | 89 | //= require quill.min 90 | //= require quill.global 91 | 92 | Add these lines to application.scss(or application.css if you are not using sass) 93 | 94 | *= require quill.snow 95 | 96 | This gem comes with the core, snow(default) and bubble themes. For eg. to use the bubble theme 97 | remove other quill themes and add 98 | 99 | *= require quill.bubble 100 | 101 | Make sure to add `theme: 'bubble'` in the `Quilljs.setDefaults` setting as explained above. 102 | 103 | This gem also comes with the latest `quill.min.js` and `quill.core.js`. 104 | 105 | This gem can also be used in conjuction with [bootstrap maxlength](https://mimo84.github.io/bootstrap-maxlength/). 106 | 107 | ### Common questions 108 | 109 | #### How to access individual quill editors if there are many quill editors on one single page? 110 | 111 | Starting from the top of the page, each quill editor instance is attached to the window object. The first quill editor instance can be accessed by `window['quill-container-0']` and the second one by `window['quill-container-1']` and so on. 112 | 113 | ## Development 114 | 115 | 116 | To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org). 117 | 118 | ## Contributing 119 | 120 | Bug reports and pull requests are welcome on GitHub at https://github.com/abhinavmathur/quilljs-rails. 121 | 122 | 123 | ## License 124 | 125 | The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT). 126 | 127 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require "bundler/gem_tasks" 2 | require "rake/testtask" 3 | 4 | Rake::TestTask.new(:test) do |t| 5 | t.libs << "test" 6 | t.libs << "lib" 7 | t.test_files = FileList['test/**/*_test.rb'] 8 | end 9 | 10 | task :default => :test 11 | -------------------------------------------------------------------------------- /app/assets/javascripts/quill.global.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Abhinav Mathur on 16/02/17. 3 | * Updated on 02/04/17 4 | */ 5 | 6 | (function(){ 7 | 8 | var defaults = { 9 | theme: 'snow', 10 | modules: { 11 | toolbar: [ 12 | [{ 'header': [1, 2, 3, false] }], 13 | [{ 'color': [] }, { 'background': [] }], 14 | ['bold', 'italic', 'underline', 'strike'], 15 | ['blockquote', 'code-block'], 16 | [{ 'list': 'ordered'}, { 'list': 'bullet' }], 17 | [{ 'indent': '-1'}, { 'indent': '+1' }], 18 | ['clean'] 19 | ] 20 | } 21 | }; 22 | 23 | window.Quilljs = { 24 | //This method loads the default values from the global object 25 | setDefaults: function(new_defaults) { 26 | defaults = $.extend(defaults, new_defaults); 27 | this.addQuillContainer(defaults) 28 | }, 29 | //This method loads if no global object is defined 30 | loadDefaults: function () { 31 | this.addQuillContainer(defaults) 32 | }, 33 | //This method adds the quill containers 34 | addQuillContainer: function (settings) { 35 | 36 | var create_quill_containers = function(index, input_field) { 37 | var current_quill_container = create_quill_container(input_field, input_field.id + '-quill'); 38 | var placeholder_attr = $(input_field).attr('placeholder'); 39 | if (typeof placeholder_attr !== typeof undefined && placeholder_attr !== false) { 40 | settings.placeholder = $(input_field).attr('placeholder'); 41 | } 42 | 43 | window['quill-container-' + index] = new Quill(current_quill_container, settings); 44 | 45 | // This function adds bootstrap maxlength functionality to the quill container 46 | if ($(input_field).attr('maxlength') || $(input_field).attr('minlength')) { 47 | add_bootstrap_maxlength(input_field, current_quill_container); 48 | } 49 | 50 | // Event listener to make sure we copy the new content of the Quill back into the field 51 | window['quill-container-' + index].on('editor-change', function () { 52 | debounce_html(input_field, current_quill_container); 53 | }); 54 | 55 | }, 56 | //This function creates a separate quill container since html cannot be rendered 57 | //properly inside input fields 58 | create_quill_container = function(field, quill) { 59 | $(field).hide().after('

'); 60 | quill = '.' + quill; 61 | $(quill).html($(field).val()); 62 | 63 | //pass on the class name to quill container initializer 64 | return quill; 65 | }, 66 | // This adds maxLength compatibility for the editor 67 | add_bootstrap_maxlength = function (field, quill) { 68 | var quill_editor = quill + ' .ql-editor'; 69 | 70 | //Check if fields have minlength and maxlength properties, if yes, add them to the new quill container 71 | if ($(field).attr('maxlength')) { 72 | $(quill_editor).attr('maxlength', $(field).attr('maxlength')); 73 | } 74 | if ($(field).attr('minlength')) { 75 | $(quill_editor).attr('minlength', $(field).attr('minlength')); 76 | } 77 | 78 | //removes the minlength and maxlength properties from the original container 79 | $(field).removeAttr('maxlength').removeAttr('minlength'); 80 | }, 81 | // Synchronises changes made into their respective hidden fields. 82 | debounce_html = debounce(function (input_field, current_quill_container) { 83 | $(input_field).val($(current_quill_container + ' .ql-editor').html()); 84 | }, 500); 85 | 86 | 87 | var quill_container = $('.quill_container'); 88 | if (quill_container.length > 0) { 89 | quill_container.each(function (index, object) { 90 | return create_quill_containers(index, object) 91 | }); 92 | } 93 | } 94 | }; 95 | 96 | $( document ).on('ready page:change turbolinks:load', function() { 97 | if ($('.ql-editor').length <= 0){ 98 | Quilljs.loadDefaults(); 99 | } 100 | }); 101 | 102 | //Debounce function exported from underscore.js to sync the quill container with the hidden input field 103 | function debounce(func, wait, immediate) { 104 | var timeout; 105 | return function() { 106 | var context = this, args = arguments; 107 | var later = function() { 108 | timeout = null; 109 | if (!immediate) func.apply(context, args); 110 | }; 111 | var callNow = immediate && !timeout; 112 | clearTimeout(timeout); 113 | timeout = setTimeout(later, wait); 114 | if (callNow) func.apply(context, args); 115 | }; 116 | } 117 | })(jQuery); -------------------------------------------------------------------------------- /app/assets/stylesheets/quill.bubble.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Quill Editor v1.2.0 3 | * https://quilljs.com/ 4 | * Copyright (c) 2014, Jason Chen 5 | * Copyright (c) 2013, salesforce.com 6 | */ 7 | .ql-container { 8 | box-sizing: border-box; 9 | font-family: Helvetica, Arial, sans-serif; 10 | font-size: 13px; 11 | height: 100%; 12 | margin: 0px; 13 | position: relative; 14 | } 15 | .ql-container.ql-disabled .ql-tooltip { 16 | visibility: hidden; 17 | } 18 | .ql-clipboard { 19 | left: -100000px; 20 | height: 1px; 21 | overflow-y: hidden; 22 | position: absolute; 23 | top: 50%; 24 | } 25 | .ql-clipboard p { 26 | margin: 0; 27 | padding: 0; 28 | } 29 | .ql-editor { 30 | box-sizing: border-box; 31 | cursor: text; 32 | line-height: 1.42; 33 | height: 100%; 34 | outline: none; 35 | overflow-y: auto; 36 | padding: 12px 15px; 37 | tab-size: 4; 38 | -moz-tab-size: 4; 39 | text-align: left; 40 | white-space: pre-wrap; 41 | word-wrap: break-word; 42 | } 43 | .ql-editor p, 44 | .ql-editor ol, 45 | .ql-editor ul, 46 | .ql-editor pre, 47 | .ql-editor blockquote, 48 | .ql-editor h1, 49 | .ql-editor h2, 50 | .ql-editor h3, 51 | .ql-editor h4, 52 | .ql-editor h5, 53 | .ql-editor h6 { 54 | margin: 0; 55 | padding: 0; 56 | counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; 57 | } 58 | .ql-editor ol, 59 | .ql-editor ul { 60 | padding-left: 1.5em; 61 | } 62 | .ql-editor ol > li, 63 | .ql-editor ul > li { 64 | list-style-type: none; 65 | } 66 | .ql-editor ul > li::before { 67 | content: '\25CF'; 68 | } 69 | .ql-editor ul[data-checked=true], 70 | .ql-editor ul[data-checked=false] { 71 | pointer-events: none; 72 | } 73 | .ql-editor ul[data-checked=true] > li::before, 74 | .ql-editor ul[data-checked=false] > li::before { 75 | color: #777; 76 | cursor: pointer; 77 | pointer-events: all; 78 | } 79 | .ql-editor ul[data-checked=true] > li::before { 80 | content: '\2611'; 81 | } 82 | .ql-editor ul[data-checked=false] > li::before { 83 | content: '\2610'; 84 | } 85 | .ql-editor li::before { 86 | display: inline-block; 87 | margin-right: 0.3em; 88 | text-align: right; 89 | white-space: nowrap; 90 | width: 1.2em; 91 | } 92 | .ql-editor li:not(.ql-direction-rtl)::before { 93 | margin-left: -1.5em; 94 | } 95 | .ql-editor ol li, 96 | .ql-editor ul li { 97 | padding-left: 1.5em; 98 | } 99 | .ql-editor ol li { 100 | counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; 101 | counter-increment: list-num; 102 | } 103 | .ql-editor ol li:before { 104 | content: counter(list-num, decimal) '. '; 105 | } 106 | .ql-editor ol li.ql-indent-1 { 107 | counter-increment: list-1; 108 | } 109 | .ql-editor ol li.ql-indent-1:before { 110 | content: counter(list-1, lower-alpha) '. '; 111 | } 112 | .ql-editor ol li.ql-indent-1 { 113 | counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; 114 | } 115 | .ql-editor ol li.ql-indent-2 { 116 | counter-increment: list-2; 117 | } 118 | .ql-editor ol li.ql-indent-2:before { 119 | content: counter(list-2, lower-roman) '. '; 120 | } 121 | .ql-editor ol li.ql-indent-2 { 122 | counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; 123 | } 124 | .ql-editor ol li.ql-indent-3 { 125 | counter-increment: list-3; 126 | } 127 | .ql-editor ol li.ql-indent-3:before { 128 | content: counter(list-3, decimal) '. '; 129 | } 130 | .ql-editor ol li.ql-indent-3 { 131 | counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; 132 | } 133 | .ql-editor ol li.ql-indent-4 { 134 | counter-increment: list-4; 135 | } 136 | .ql-editor ol li.ql-indent-4:before { 137 | content: counter(list-4, lower-alpha) '. '; 138 | } 139 | .ql-editor ol li.ql-indent-4 { 140 | counter-reset: list-5 list-6 list-7 list-8 list-9; 141 | } 142 | .ql-editor ol li.ql-indent-5 { 143 | counter-increment: list-5; 144 | } 145 | .ql-editor ol li.ql-indent-5:before { 146 | content: counter(list-5, lower-roman) '. '; 147 | } 148 | .ql-editor ol li.ql-indent-5 { 149 | counter-reset: list-6 list-7 list-8 list-9; 150 | } 151 | .ql-editor ol li.ql-indent-6 { 152 | counter-increment: list-6; 153 | } 154 | .ql-editor ol li.ql-indent-6:before { 155 | content: counter(list-6, decimal) '. '; 156 | } 157 | .ql-editor ol li.ql-indent-6 { 158 | counter-reset: list-7 list-8 list-9; 159 | } 160 | .ql-editor ol li.ql-indent-7 { 161 | counter-increment: list-7; 162 | } 163 | .ql-editor ol li.ql-indent-7:before { 164 | content: counter(list-7, lower-alpha) '. '; 165 | } 166 | .ql-editor ol li.ql-indent-7 { 167 | counter-reset: list-8 list-9; 168 | } 169 | .ql-editor ol li.ql-indent-8 { 170 | counter-increment: list-8; 171 | } 172 | .ql-editor ol li.ql-indent-8:before { 173 | content: counter(list-8, lower-roman) '. '; 174 | } 175 | .ql-editor ol li.ql-indent-8 { 176 | counter-reset: list-9; 177 | } 178 | .ql-editor ol li.ql-indent-9 { 179 | counter-increment: list-9; 180 | } 181 | .ql-editor ol li.ql-indent-9:before { 182 | content: counter(list-9, decimal) '. '; 183 | } 184 | .ql-editor .ql-indent-1:not(.ql-direction-rtl) { 185 | padding-left: 3em; 186 | } 187 | .ql-editor li.ql-indent-1:not(.ql-direction-rtl) { 188 | padding-left: 4.5em; 189 | } 190 | .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right { 191 | padding-right: 3em; 192 | } 193 | .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { 194 | padding-right: 4.5em; 195 | } 196 | .ql-editor .ql-indent-2:not(.ql-direction-rtl) { 197 | padding-left: 6em; 198 | } 199 | .ql-editor li.ql-indent-2:not(.ql-direction-rtl) { 200 | padding-left: 7.5em; 201 | } 202 | .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right { 203 | padding-right: 6em; 204 | } 205 | .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { 206 | padding-right: 7.5em; 207 | } 208 | .ql-editor .ql-indent-3:not(.ql-direction-rtl) { 209 | padding-left: 9em; 210 | } 211 | .ql-editor li.ql-indent-3:not(.ql-direction-rtl) { 212 | padding-left: 10.5em; 213 | } 214 | .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right { 215 | padding-right: 9em; 216 | } 217 | .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { 218 | padding-right: 10.5em; 219 | } 220 | .ql-editor .ql-indent-4:not(.ql-direction-rtl) { 221 | padding-left: 12em; 222 | } 223 | .ql-editor li.ql-indent-4:not(.ql-direction-rtl) { 224 | padding-left: 13.5em; 225 | } 226 | .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right { 227 | padding-right: 12em; 228 | } 229 | .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { 230 | padding-right: 13.5em; 231 | } 232 | .ql-editor .ql-indent-5:not(.ql-direction-rtl) { 233 | padding-left: 15em; 234 | } 235 | .ql-editor li.ql-indent-5:not(.ql-direction-rtl) { 236 | padding-left: 16.5em; 237 | } 238 | .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right { 239 | padding-right: 15em; 240 | } 241 | .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { 242 | padding-right: 16.5em; 243 | } 244 | .ql-editor .ql-indent-6:not(.ql-direction-rtl) { 245 | padding-left: 18em; 246 | } 247 | .ql-editor li.ql-indent-6:not(.ql-direction-rtl) { 248 | padding-left: 19.5em; 249 | } 250 | .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right { 251 | padding-right: 18em; 252 | } 253 | .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { 254 | padding-right: 19.5em; 255 | } 256 | .ql-editor .ql-indent-7:not(.ql-direction-rtl) { 257 | padding-left: 21em; 258 | } 259 | .ql-editor li.ql-indent-7:not(.ql-direction-rtl) { 260 | padding-left: 22.5em; 261 | } 262 | .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right { 263 | padding-right: 21em; 264 | } 265 | .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { 266 | padding-right: 22.5em; 267 | } 268 | .ql-editor .ql-indent-8:not(.ql-direction-rtl) { 269 | padding-left: 24em; 270 | } 271 | .ql-editor li.ql-indent-8:not(.ql-direction-rtl) { 272 | padding-left: 25.5em; 273 | } 274 | .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right { 275 | padding-right: 24em; 276 | } 277 | .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { 278 | padding-right: 25.5em; 279 | } 280 | .ql-editor .ql-indent-9:not(.ql-direction-rtl) { 281 | padding-left: 27em; 282 | } 283 | .ql-editor li.ql-indent-9:not(.ql-direction-rtl) { 284 | padding-left: 28.5em; 285 | } 286 | .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right { 287 | padding-right: 27em; 288 | } 289 | .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { 290 | padding-right: 28.5em; 291 | } 292 | .ql-editor .ql-video { 293 | display: block; 294 | max-width: 100%; 295 | } 296 | .ql-editor .ql-video.ql-align-center { 297 | margin: 0 auto; 298 | } 299 | .ql-editor .ql-video.ql-align-right { 300 | margin: 0 0 0 auto; 301 | } 302 | .ql-editor .ql-bg-black { 303 | background-color: #000; 304 | } 305 | .ql-editor .ql-bg-red { 306 | background-color: #e60000; 307 | } 308 | .ql-editor .ql-bg-orange { 309 | background-color: #f90; 310 | } 311 | .ql-editor .ql-bg-yellow { 312 | background-color: #ff0; 313 | } 314 | .ql-editor .ql-bg-green { 315 | background-color: #008a00; 316 | } 317 | .ql-editor .ql-bg-blue { 318 | background-color: #06c; 319 | } 320 | .ql-editor .ql-bg-purple { 321 | background-color: #93f; 322 | } 323 | .ql-editor .ql-color-white { 324 | color: #fff; 325 | } 326 | .ql-editor .ql-color-red { 327 | color: #e60000; 328 | } 329 | .ql-editor .ql-color-orange { 330 | color: #f90; 331 | } 332 | .ql-editor .ql-color-yellow { 333 | color: #ff0; 334 | } 335 | .ql-editor .ql-color-green { 336 | color: #008a00; 337 | } 338 | .ql-editor .ql-color-blue { 339 | color: #06c; 340 | } 341 | .ql-editor .ql-color-purple { 342 | color: #93f; 343 | } 344 | .ql-editor .ql-font-serif { 345 | font-family: Georgia, Times New Roman, serif; 346 | } 347 | .ql-editor .ql-font-monospace { 348 | font-family: Monaco, Courier New, monospace; 349 | } 350 | .ql-editor .ql-size-small { 351 | font-size: 0.75em; 352 | } 353 | .ql-editor .ql-size-large { 354 | font-size: 1.5em; 355 | } 356 | .ql-editor .ql-size-huge { 357 | font-size: 2.5em; 358 | } 359 | .ql-editor .ql-direction-rtl { 360 | direction: rtl; 361 | text-align: inherit; 362 | } 363 | .ql-editor .ql-align-center { 364 | text-align: center; 365 | } 366 | .ql-editor .ql-align-justify { 367 | text-align: justify; 368 | } 369 | .ql-editor .ql-align-right { 370 | text-align: right; 371 | } 372 | .ql-editor.ql-blank::before { 373 | color: rgba(0,0,0,0.6); 374 | content: attr(data-placeholder); 375 | font-style: italic; 376 | pointer-events: none; 377 | position: absolute; 378 | } 379 | .ql-bubble.ql-toolbar:after, 380 | .ql-bubble .ql-toolbar:after { 381 | clear: both; 382 | content: ''; 383 | display: table; 384 | } 385 | .ql-bubble.ql-toolbar button, 386 | .ql-bubble .ql-toolbar button { 387 | background: none; 388 | border: none; 389 | cursor: pointer; 390 | display: inline-block; 391 | float: left; 392 | height: 24px; 393 | padding: 3px 5px; 394 | width: 28px; 395 | } 396 | .ql-bubble.ql-toolbar button svg, 397 | .ql-bubble .ql-toolbar button svg { 398 | float: left; 399 | height: 100%; 400 | } 401 | .ql-bubble.ql-toolbar button:active:hover, 402 | .ql-bubble .ql-toolbar button:active:hover { 403 | outline: none; 404 | } 405 | .ql-bubble.ql-toolbar input.ql-image[type=file], 406 | .ql-bubble .ql-toolbar input.ql-image[type=file] { 407 | display: none; 408 | } 409 | .ql-bubble.ql-toolbar button:hover, 410 | .ql-bubble .ql-toolbar button:hover, 411 | .ql-bubble.ql-toolbar button.ql-active, 412 | .ql-bubble .ql-toolbar button.ql-active, 413 | .ql-bubble.ql-toolbar .ql-picker-label:hover, 414 | .ql-bubble .ql-toolbar .ql-picker-label:hover, 415 | .ql-bubble.ql-toolbar .ql-picker-label.ql-active, 416 | .ql-bubble .ql-toolbar .ql-picker-label.ql-active, 417 | .ql-bubble.ql-toolbar .ql-picker-item:hover, 418 | .ql-bubble .ql-toolbar .ql-picker-item:hover, 419 | .ql-bubble.ql-toolbar .ql-picker-item.ql-selected, 420 | .ql-bubble .ql-toolbar .ql-picker-item.ql-selected { 421 | color: #fff; 422 | } 423 | .ql-bubble.ql-toolbar button:hover .ql-fill, 424 | .ql-bubble .ql-toolbar button:hover .ql-fill, 425 | .ql-bubble.ql-toolbar button.ql-active .ql-fill, 426 | .ql-bubble .ql-toolbar button.ql-active .ql-fill, 427 | .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill, 428 | .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill, 429 | .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill, 430 | .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill, 431 | .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill, 432 | .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill, 433 | .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill, 434 | .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill, 435 | .ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill, 436 | .ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill, 437 | .ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill, 438 | .ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill, 439 | .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, 440 | .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, 441 | .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, 442 | .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, 443 | .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, 444 | .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, 445 | .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, 446 | .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { 447 | fill: #fff; 448 | } 449 | .ql-bubble.ql-toolbar button:hover .ql-stroke, 450 | .ql-bubble .ql-toolbar button:hover .ql-stroke, 451 | .ql-bubble.ql-toolbar button.ql-active .ql-stroke, 452 | .ql-bubble .ql-toolbar button.ql-active .ql-stroke, 453 | .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke, 454 | .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke, 455 | .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke, 456 | .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke, 457 | .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke, 458 | .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke, 459 | .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, 460 | .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, 461 | .ql-bubble.ql-toolbar button:hover .ql-stroke-miter, 462 | .ql-bubble .ql-toolbar button:hover .ql-stroke-miter, 463 | .ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter, 464 | .ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter, 465 | .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, 466 | .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, 467 | .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, 468 | .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, 469 | .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, 470 | .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, 471 | .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, 472 | .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { 473 | stroke: #fff; 474 | } 475 | .ql-bubble { 476 | box-sizing: border-box; 477 | } 478 | .ql-bubble * { 479 | box-sizing: border-box; 480 | } 481 | .ql-bubble .ql-hidden { 482 | display: none; 483 | } 484 | .ql-bubble .ql-out-bottom, 485 | .ql-bubble .ql-out-top { 486 | visibility: hidden; 487 | } 488 | .ql-bubble .ql-tooltip { 489 | position: absolute; 490 | transform: translateY(10px); 491 | } 492 | .ql-bubble .ql-tooltip a { 493 | cursor: pointer; 494 | text-decoration: none; 495 | } 496 | .ql-bubble .ql-tooltip.ql-flip { 497 | transform: translateY(-10px); 498 | } 499 | .ql-bubble .ql-formats { 500 | display: inline-block; 501 | vertical-align: middle; 502 | } 503 | .ql-bubble .ql-formats:after { 504 | clear: both; 505 | content: ''; 506 | display: table; 507 | } 508 | .ql-bubble .ql-stroke { 509 | fill: none; 510 | stroke: #ccc; 511 | stroke-linecap: round; 512 | stroke-linejoin: round; 513 | stroke-width: 2; 514 | } 515 | .ql-bubble .ql-stroke-miter { 516 | fill: none; 517 | stroke: #ccc; 518 | stroke-miterlimit: 10; 519 | stroke-width: 2; 520 | } 521 | .ql-bubble .ql-fill, 522 | .ql-bubble .ql-stroke.ql-fill { 523 | fill: #ccc; 524 | } 525 | .ql-bubble .ql-empty { 526 | fill: none; 527 | } 528 | .ql-bubble .ql-even { 529 | fill-rule: evenodd; 530 | } 531 | .ql-bubble .ql-thin, 532 | .ql-bubble .ql-stroke.ql-thin { 533 | stroke-width: 1; 534 | } 535 | .ql-bubble .ql-transparent { 536 | opacity: 0.4; 537 | } 538 | .ql-bubble .ql-direction svg:last-child { 539 | display: none; 540 | } 541 | .ql-bubble .ql-direction.ql-active svg:last-child { 542 | display: inline; 543 | } 544 | .ql-bubble .ql-direction.ql-active svg:first-child { 545 | display: none; 546 | } 547 | .ql-bubble .ql-editor h1 { 548 | font-size: 2em; 549 | } 550 | .ql-bubble .ql-editor h2 { 551 | font-size: 1.5em; 552 | } 553 | .ql-bubble .ql-editor h3 { 554 | font-size: 1.17em; 555 | } 556 | .ql-bubble .ql-editor h4 { 557 | font-size: 1em; 558 | } 559 | .ql-bubble .ql-editor h5 { 560 | font-size: 0.83em; 561 | } 562 | .ql-bubble .ql-editor h6 { 563 | font-size: 0.67em; 564 | } 565 | .ql-bubble .ql-editor a { 566 | text-decoration: underline; 567 | } 568 | .ql-bubble .ql-editor blockquote { 569 | border-left: 4px solid #ccc; 570 | margin-bottom: 5px; 571 | margin-top: 5px; 572 | padding-left: 16px; 573 | } 574 | .ql-bubble .ql-editor code, 575 | .ql-bubble .ql-editor pre { 576 | background-color: #f0f0f0; 577 | border-radius: 3px; 578 | } 579 | .ql-bubble .ql-editor pre { 580 | white-space: pre-wrap; 581 | margin-bottom: 5px; 582 | margin-top: 5px; 583 | padding: 5px 10px; 584 | } 585 | .ql-bubble .ql-editor code { 586 | font-size: 85%; 587 | padding-bottom: 2px; 588 | padding-top: 2px; 589 | } 590 | .ql-bubble .ql-editor code:before, 591 | .ql-bubble .ql-editor code:after { 592 | content: "\A0"; 593 | letter-spacing: -2px; 594 | } 595 | .ql-bubble .ql-editor pre.ql-syntax { 596 | background-color: #23241f; 597 | color: #f8f8f2; 598 | overflow: visible; 599 | } 600 | .ql-bubble .ql-editor img { 601 | max-width: 100%; 602 | } 603 | .ql-bubble .ql-picker { 604 | color: #ccc; 605 | display: inline-block; 606 | float: left; 607 | font-size: 14px; 608 | font-weight: 500; 609 | height: 24px; 610 | position: relative; 611 | vertical-align: middle; 612 | } 613 | .ql-bubble .ql-picker-label { 614 | cursor: pointer; 615 | display: inline-block; 616 | height: 100%; 617 | padding-left: 8px; 618 | padding-right: 2px; 619 | position: relative; 620 | width: 100%; 621 | } 622 | .ql-bubble .ql-picker-label::before { 623 | display: inline-block; 624 | line-height: 22px; 625 | } 626 | .ql-bubble .ql-picker-options { 627 | background-color: #444; 628 | display: none; 629 | min-width: 100%; 630 | padding: 4px 8px; 631 | position: absolute; 632 | white-space: nowrap; 633 | } 634 | .ql-bubble .ql-picker-options .ql-picker-item { 635 | cursor: pointer; 636 | display: block; 637 | padding-bottom: 5px; 638 | padding-top: 5px; 639 | } 640 | .ql-bubble .ql-picker.ql-expanded .ql-picker-label { 641 | color: #777; 642 | z-index: 2; 643 | } 644 | .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill { 645 | fill: #777; 646 | } 647 | .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke { 648 | stroke: #777; 649 | } 650 | .ql-bubble .ql-picker.ql-expanded .ql-picker-options { 651 | display: block; 652 | margin-top: -1px; 653 | top: 100%; 654 | z-index: 1; 655 | } 656 | .ql-bubble .ql-color-picker, 657 | .ql-bubble .ql-icon-picker { 658 | width: 28px; 659 | } 660 | .ql-bubble .ql-color-picker .ql-picker-label, 661 | .ql-bubble .ql-icon-picker .ql-picker-label { 662 | padding: 2px 4px; 663 | } 664 | .ql-bubble .ql-color-picker .ql-picker-label svg, 665 | .ql-bubble .ql-icon-picker .ql-picker-label svg { 666 | right: 4px; 667 | } 668 | .ql-bubble .ql-icon-picker .ql-picker-options { 669 | padding: 4px 0px; 670 | } 671 | .ql-bubble .ql-icon-picker .ql-picker-item { 672 | height: 24px; 673 | width: 24px; 674 | padding: 2px 4px; 675 | } 676 | .ql-bubble .ql-color-picker .ql-picker-options { 677 | padding: 3px 5px; 678 | width: 152px; 679 | } 680 | .ql-bubble .ql-color-picker .ql-picker-item { 681 | border: 1px solid transparent; 682 | float: left; 683 | height: 16px; 684 | margin: 2px; 685 | padding: 0px; 686 | width: 16px; 687 | } 688 | .ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg { 689 | position: absolute; 690 | margin-top: -9px; 691 | right: 0; 692 | top: 50%; 693 | width: 18px; 694 | } 695 | .ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, 696 | .ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, 697 | .ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, 698 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, 699 | .ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, 700 | .ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before { 701 | content: attr(data-label); 702 | } 703 | .ql-bubble .ql-picker.ql-header { 704 | width: 98px; 705 | } 706 | .ql-bubble .ql-picker.ql-header .ql-picker-label::before, 707 | .ql-bubble .ql-picker.ql-header .ql-picker-item::before { 708 | content: 'Normal'; 709 | } 710 | .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, 711 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { 712 | content: 'Heading 1'; 713 | } 714 | .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, 715 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { 716 | content: 'Heading 2'; 717 | } 718 | .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, 719 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { 720 | content: 'Heading 3'; 721 | } 722 | .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, 723 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { 724 | content: 'Heading 4'; 725 | } 726 | .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, 727 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { 728 | content: 'Heading 5'; 729 | } 730 | .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, 731 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { 732 | content: 'Heading 6'; 733 | } 734 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { 735 | font-size: 2em; 736 | } 737 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { 738 | font-size: 1.5em; 739 | } 740 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { 741 | font-size: 1.17em; 742 | } 743 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { 744 | font-size: 1em; 745 | } 746 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { 747 | font-size: 0.83em; 748 | } 749 | .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { 750 | font-size: 0.67em; 751 | } 752 | .ql-bubble .ql-picker.ql-font { 753 | width: 108px; 754 | } 755 | .ql-bubble .ql-picker.ql-font .ql-picker-label::before, 756 | .ql-bubble .ql-picker.ql-font .ql-picker-item::before { 757 | content: 'Sans Serif'; 758 | } 759 | .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before, 760 | .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before { 761 | content: 'Serif'; 762 | } 763 | .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before, 764 | .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before { 765 | content: 'Monospace'; 766 | } 767 | .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before { 768 | font-family: Georgia, Times New Roman, serif; 769 | } 770 | .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before { 771 | font-family: Monaco, Courier New, monospace; 772 | } 773 | .ql-bubble .ql-picker.ql-size { 774 | width: 98px; 775 | } 776 | .ql-bubble .ql-picker.ql-size .ql-picker-label::before, 777 | .ql-bubble .ql-picker.ql-size .ql-picker-item::before { 778 | content: 'Normal'; 779 | } 780 | .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before, 781 | .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before { 782 | content: 'Small'; 783 | } 784 | .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before, 785 | .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before { 786 | content: 'Large'; 787 | } 788 | .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, 789 | .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { 790 | content: 'Huge'; 791 | } 792 | .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before { 793 | font-size: 10px; 794 | } 795 | .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before { 796 | font-size: 18px; 797 | } 798 | .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { 799 | font-size: 32px; 800 | } 801 | .ql-bubble .ql-color-picker.ql-background .ql-picker-item { 802 | background-color: #fff; 803 | } 804 | .ql-bubble .ql-color-picker.ql-color .ql-picker-item { 805 | background-color: #000; 806 | } 807 | .ql-bubble .ql-toolbar .ql-formats { 808 | margin: 8px 12px 8px 0px; 809 | } 810 | .ql-bubble .ql-toolbar .ql-formats:first-child { 811 | margin-left: 12px; 812 | } 813 | .ql-bubble .ql-color-picker svg { 814 | margin: 1px; 815 | } 816 | .ql-bubble .ql-color-picker .ql-picker-item.ql-selected, 817 | .ql-bubble .ql-color-picker .ql-picker-item:hover { 818 | border-color: #fff; 819 | } 820 | .ql-bubble .ql-tooltip { 821 | background-color: #444; 822 | border-radius: 25px; 823 | color: #fff; 824 | } 825 | .ql-bubble .ql-tooltip-arrow { 826 | border-left: 6px solid transparent; 827 | border-right: 6px solid transparent; 828 | content: " "; 829 | display: block; 830 | left: 50%; 831 | margin-left: -6px; 832 | position: absolute; 833 | } 834 | .ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow { 835 | border-bottom: 6px solid #444; 836 | top: -6px; 837 | } 838 | .ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow { 839 | border-top: 6px solid #444; 840 | bottom: -6px; 841 | } 842 | .ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor { 843 | display: block; 844 | } 845 | .ql-bubble .ql-tooltip.ql-editing .ql-formats { 846 | visibility: hidden; 847 | } 848 | .ql-bubble .ql-tooltip-editor { 849 | display: none; 850 | } 851 | .ql-bubble .ql-tooltip-editor input[type=text] { 852 | background: transparent; 853 | border: none; 854 | color: #fff; 855 | font-size: 13px; 856 | height: 100%; 857 | outline: none; 858 | padding: 10px 20px; 859 | position: absolute; 860 | width: 100%; 861 | } 862 | .ql-bubble .ql-tooltip-editor a { 863 | top: 10px; 864 | position: absolute; 865 | right: 20px; 866 | } 867 | .ql-bubble .ql-tooltip-editor a:before { 868 | color: #ccc; 869 | content: "\D7"; 870 | font-size: 16px; 871 | font-weight: bold; 872 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/quill.core.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Quill Editor v1.2.0 3 | * https://quilljs.com/ 4 | * Copyright (c) 2014, Jason Chen 5 | * Copyright (c) 2013, salesforce.com 6 | */ 7 | .ql-container { 8 | box-sizing: border-box; 9 | font-family: Helvetica, Arial, sans-serif; 10 | font-size: 13px; 11 | height: 100%; 12 | margin: 0px; 13 | position: relative; 14 | } 15 | .ql-container.ql-disabled .ql-tooltip { 16 | visibility: hidden; 17 | } 18 | .ql-clipboard { 19 | left: -100000px; 20 | height: 1px; 21 | overflow-y: hidden; 22 | position: absolute; 23 | top: 50%; 24 | } 25 | .ql-clipboard p { 26 | margin: 0; 27 | padding: 0; 28 | } 29 | .ql-editor { 30 | box-sizing: border-box; 31 | cursor: text; 32 | line-height: 1.42; 33 | height: 100%; 34 | outline: none; 35 | overflow-y: auto; 36 | padding: 12px 15px; 37 | tab-size: 4; 38 | -moz-tab-size: 4; 39 | text-align: left; 40 | white-space: pre-wrap; 41 | word-wrap: break-word; 42 | } 43 | .ql-editor p, 44 | .ql-editor ol, 45 | .ql-editor ul, 46 | .ql-editor pre, 47 | .ql-editor blockquote, 48 | .ql-editor h1, 49 | .ql-editor h2, 50 | .ql-editor h3, 51 | .ql-editor h4, 52 | .ql-editor h5, 53 | .ql-editor h6 { 54 | margin: 0; 55 | padding: 0; 56 | counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; 57 | } 58 | .ql-editor ol, 59 | .ql-editor ul { 60 | padding-left: 1.5em; 61 | } 62 | .ql-editor ol > li, 63 | .ql-editor ul > li { 64 | list-style-type: none; 65 | } 66 | .ql-editor ul > li::before { 67 | content: '\25CF'; 68 | } 69 | .ql-editor ul[data-checked=true], 70 | .ql-editor ul[data-checked=false] { 71 | pointer-events: none; 72 | } 73 | .ql-editor ul[data-checked=true] > li::before, 74 | .ql-editor ul[data-checked=false] > li::before { 75 | color: #777; 76 | cursor: pointer; 77 | pointer-events: all; 78 | } 79 | .ql-editor ul[data-checked=true] > li::before { 80 | content: '\2611'; 81 | } 82 | .ql-editor ul[data-checked=false] > li::before { 83 | content: '\2610'; 84 | } 85 | .ql-editor li::before { 86 | display: inline-block; 87 | margin-right: 0.3em; 88 | text-align: right; 89 | white-space: nowrap; 90 | width: 1.2em; 91 | } 92 | .ql-editor li:not(.ql-direction-rtl)::before { 93 | margin-left: -1.5em; 94 | } 95 | .ql-editor ol li, 96 | .ql-editor ul li { 97 | padding-left: 1.5em; 98 | } 99 | .ql-editor ol li { 100 | counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; 101 | counter-increment: list-num; 102 | } 103 | .ql-editor ol li:before { 104 | content: counter(list-num, decimal) '. '; 105 | } 106 | .ql-editor ol li.ql-indent-1 { 107 | counter-increment: list-1; 108 | } 109 | .ql-editor ol li.ql-indent-1:before { 110 | content: counter(list-1, lower-alpha) '. '; 111 | } 112 | .ql-editor ol li.ql-indent-1 { 113 | counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; 114 | } 115 | .ql-editor ol li.ql-indent-2 { 116 | counter-increment: list-2; 117 | } 118 | .ql-editor ol li.ql-indent-2:before { 119 | content: counter(list-2, lower-roman) '. '; 120 | } 121 | .ql-editor ol li.ql-indent-2 { 122 | counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; 123 | } 124 | .ql-editor ol li.ql-indent-3 { 125 | counter-increment: list-3; 126 | } 127 | .ql-editor ol li.ql-indent-3:before { 128 | content: counter(list-3, decimal) '. '; 129 | } 130 | .ql-editor ol li.ql-indent-3 { 131 | counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; 132 | } 133 | .ql-editor ol li.ql-indent-4 { 134 | counter-increment: list-4; 135 | } 136 | .ql-editor ol li.ql-indent-4:before { 137 | content: counter(list-4, lower-alpha) '. '; 138 | } 139 | .ql-editor ol li.ql-indent-4 { 140 | counter-reset: list-5 list-6 list-7 list-8 list-9; 141 | } 142 | .ql-editor ol li.ql-indent-5 { 143 | counter-increment: list-5; 144 | } 145 | .ql-editor ol li.ql-indent-5:before { 146 | content: counter(list-5, lower-roman) '. '; 147 | } 148 | .ql-editor ol li.ql-indent-5 { 149 | counter-reset: list-6 list-7 list-8 list-9; 150 | } 151 | .ql-editor ol li.ql-indent-6 { 152 | counter-increment: list-6; 153 | } 154 | .ql-editor ol li.ql-indent-6:before { 155 | content: counter(list-6, decimal) '. '; 156 | } 157 | .ql-editor ol li.ql-indent-6 { 158 | counter-reset: list-7 list-8 list-9; 159 | } 160 | .ql-editor ol li.ql-indent-7 { 161 | counter-increment: list-7; 162 | } 163 | .ql-editor ol li.ql-indent-7:before { 164 | content: counter(list-7, lower-alpha) '. '; 165 | } 166 | .ql-editor ol li.ql-indent-7 { 167 | counter-reset: list-8 list-9; 168 | } 169 | .ql-editor ol li.ql-indent-8 { 170 | counter-increment: list-8; 171 | } 172 | .ql-editor ol li.ql-indent-8:before { 173 | content: counter(list-8, lower-roman) '. '; 174 | } 175 | .ql-editor ol li.ql-indent-8 { 176 | counter-reset: list-9; 177 | } 178 | .ql-editor ol li.ql-indent-9 { 179 | counter-increment: list-9; 180 | } 181 | .ql-editor ol li.ql-indent-9:before { 182 | content: counter(list-9, decimal) '. '; 183 | } 184 | .ql-editor .ql-indent-1:not(.ql-direction-rtl) { 185 | padding-left: 3em; 186 | } 187 | .ql-editor li.ql-indent-1:not(.ql-direction-rtl) { 188 | padding-left: 4.5em; 189 | } 190 | .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right { 191 | padding-right: 3em; 192 | } 193 | .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { 194 | padding-right: 4.5em; 195 | } 196 | .ql-editor .ql-indent-2:not(.ql-direction-rtl) { 197 | padding-left: 6em; 198 | } 199 | .ql-editor li.ql-indent-2:not(.ql-direction-rtl) { 200 | padding-left: 7.5em; 201 | } 202 | .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right { 203 | padding-right: 6em; 204 | } 205 | .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { 206 | padding-right: 7.5em; 207 | } 208 | .ql-editor .ql-indent-3:not(.ql-direction-rtl) { 209 | padding-left: 9em; 210 | } 211 | .ql-editor li.ql-indent-3:not(.ql-direction-rtl) { 212 | padding-left: 10.5em; 213 | } 214 | .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right { 215 | padding-right: 9em; 216 | } 217 | .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { 218 | padding-right: 10.5em; 219 | } 220 | .ql-editor .ql-indent-4:not(.ql-direction-rtl) { 221 | padding-left: 12em; 222 | } 223 | .ql-editor li.ql-indent-4:not(.ql-direction-rtl) { 224 | padding-left: 13.5em; 225 | } 226 | .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right { 227 | padding-right: 12em; 228 | } 229 | .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { 230 | padding-right: 13.5em; 231 | } 232 | .ql-editor .ql-indent-5:not(.ql-direction-rtl) { 233 | padding-left: 15em; 234 | } 235 | .ql-editor li.ql-indent-5:not(.ql-direction-rtl) { 236 | padding-left: 16.5em; 237 | } 238 | .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right { 239 | padding-right: 15em; 240 | } 241 | .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { 242 | padding-right: 16.5em; 243 | } 244 | .ql-editor .ql-indent-6:not(.ql-direction-rtl) { 245 | padding-left: 18em; 246 | } 247 | .ql-editor li.ql-indent-6:not(.ql-direction-rtl) { 248 | padding-left: 19.5em; 249 | } 250 | .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right { 251 | padding-right: 18em; 252 | } 253 | .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { 254 | padding-right: 19.5em; 255 | } 256 | .ql-editor .ql-indent-7:not(.ql-direction-rtl) { 257 | padding-left: 21em; 258 | } 259 | .ql-editor li.ql-indent-7:not(.ql-direction-rtl) { 260 | padding-left: 22.5em; 261 | } 262 | .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right { 263 | padding-right: 21em; 264 | } 265 | .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { 266 | padding-right: 22.5em; 267 | } 268 | .ql-editor .ql-indent-8:not(.ql-direction-rtl) { 269 | padding-left: 24em; 270 | } 271 | .ql-editor li.ql-indent-8:not(.ql-direction-rtl) { 272 | padding-left: 25.5em; 273 | } 274 | .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right { 275 | padding-right: 24em; 276 | } 277 | .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { 278 | padding-right: 25.5em; 279 | } 280 | .ql-editor .ql-indent-9:not(.ql-direction-rtl) { 281 | padding-left: 27em; 282 | } 283 | .ql-editor li.ql-indent-9:not(.ql-direction-rtl) { 284 | padding-left: 28.5em; 285 | } 286 | .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right { 287 | padding-right: 27em; 288 | } 289 | .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { 290 | padding-right: 28.5em; 291 | } 292 | .ql-editor .ql-video { 293 | display: block; 294 | max-width: 100%; 295 | } 296 | .ql-editor .ql-video.ql-align-center { 297 | margin: 0 auto; 298 | } 299 | .ql-editor .ql-video.ql-align-right { 300 | margin: 0 0 0 auto; 301 | } 302 | .ql-editor .ql-bg-black { 303 | background-color: #000; 304 | } 305 | .ql-editor .ql-bg-red { 306 | background-color: #e60000; 307 | } 308 | .ql-editor .ql-bg-orange { 309 | background-color: #f90; 310 | } 311 | .ql-editor .ql-bg-yellow { 312 | background-color: #ff0; 313 | } 314 | .ql-editor .ql-bg-green { 315 | background-color: #008a00; 316 | } 317 | .ql-editor .ql-bg-blue { 318 | background-color: #06c; 319 | } 320 | .ql-editor .ql-bg-purple { 321 | background-color: #93f; 322 | } 323 | .ql-editor .ql-color-white { 324 | color: #fff; 325 | } 326 | .ql-editor .ql-color-red { 327 | color: #e60000; 328 | } 329 | .ql-editor .ql-color-orange { 330 | color: #f90; 331 | } 332 | .ql-editor .ql-color-yellow { 333 | color: #ff0; 334 | } 335 | .ql-editor .ql-color-green { 336 | color: #008a00; 337 | } 338 | .ql-editor .ql-color-blue { 339 | color: #06c; 340 | } 341 | .ql-editor .ql-color-purple { 342 | color: #93f; 343 | } 344 | .ql-editor .ql-font-serif { 345 | font-family: Georgia, Times New Roman, serif; 346 | } 347 | .ql-editor .ql-font-monospace { 348 | font-family: Monaco, Courier New, monospace; 349 | } 350 | .ql-editor .ql-size-small { 351 | font-size: 0.75em; 352 | } 353 | .ql-editor .ql-size-large { 354 | font-size: 1.5em; 355 | } 356 | .ql-editor .ql-size-huge { 357 | font-size: 2.5em; 358 | } 359 | .ql-editor .ql-direction-rtl { 360 | direction: rtl; 361 | text-align: inherit; 362 | } 363 | .ql-editor .ql-align-center { 364 | text-align: center; 365 | } 366 | .ql-editor .ql-align-justify { 367 | text-align: justify; 368 | } 369 | .ql-editor .ql-align-right { 370 | text-align: right; 371 | } 372 | .ql-editor.ql-blank::before { 373 | color: rgba(0,0,0,0.6); 374 | content: attr(data-placeholder); 375 | font-style: italic; 376 | pointer-events: none; 377 | position: absolute; 378 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/quill.snow.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Quill Editor v1.2.0 3 | * https://quilljs.com/ 4 | * Copyright (c) 2014, Jason Chen 5 | * Copyright (c) 2013, salesforce.com 6 | */ 7 | .ql-container { 8 | box-sizing: border-box; 9 | font-family: Helvetica, Arial, sans-serif; 10 | font-size: 13px; 11 | height: 100%; 12 | margin: 0px; 13 | position: relative; 14 | } 15 | .ql-container.ql-disabled .ql-tooltip { 16 | visibility: hidden; 17 | } 18 | .ql-clipboard { 19 | left: -100000px; 20 | height: 1px; 21 | overflow-y: hidden; 22 | position: absolute; 23 | top: 50%; 24 | } 25 | .ql-clipboard p { 26 | margin: 0; 27 | padding: 0; 28 | } 29 | .ql-editor { 30 | box-sizing: border-box; 31 | cursor: text; 32 | line-height: 1.42; 33 | height: 100%; 34 | outline: none; 35 | overflow-y: auto; 36 | padding: 12px 15px; 37 | tab-size: 4; 38 | -moz-tab-size: 4; 39 | text-align: left; 40 | white-space: pre-wrap; 41 | word-wrap: break-word; 42 | } 43 | .ql-editor p, 44 | .ql-editor ol, 45 | .ql-editor ul, 46 | .ql-editor pre, 47 | .ql-editor blockquote, 48 | .ql-editor h1, 49 | .ql-editor h2, 50 | .ql-editor h3, 51 | .ql-editor h4, 52 | .ql-editor h5, 53 | .ql-editor h6 { 54 | margin: 0; 55 | padding: 0; 56 | counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; 57 | } 58 | .ql-editor ol, 59 | .ql-editor ul { 60 | padding-left: 1.5em; 61 | } 62 | .ql-editor ol > li, 63 | .ql-editor ul > li { 64 | list-style-type: none; 65 | } 66 | .ql-editor ul > li::before { 67 | content: '\25CF'; 68 | } 69 | .ql-editor ul[data-checked=true], 70 | .ql-editor ul[data-checked=false] { 71 | pointer-events: none; 72 | } 73 | .ql-editor ul[data-checked=true] > li::before, 74 | .ql-editor ul[data-checked=false] > li::before { 75 | color: #777; 76 | cursor: pointer; 77 | pointer-events: all; 78 | } 79 | .ql-editor ul[data-checked=true] > li::before { 80 | content: '\2611'; 81 | } 82 | .ql-editor ul[data-checked=false] > li::before { 83 | content: '\2610'; 84 | } 85 | .ql-editor li::before { 86 | display: inline-block; 87 | margin-right: 0.3em; 88 | text-align: right; 89 | white-space: nowrap; 90 | width: 1.2em; 91 | } 92 | .ql-editor li:not(.ql-direction-rtl)::before { 93 | margin-left: -1.5em; 94 | } 95 | .ql-editor ol li, 96 | .ql-editor ul li { 97 | padding-left: 1.5em; 98 | } 99 | .ql-editor ol li { 100 | counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; 101 | counter-increment: list-num; 102 | } 103 | .ql-editor ol li:before { 104 | content: counter(list-num, decimal) '. '; 105 | } 106 | .ql-editor ol li.ql-indent-1 { 107 | counter-increment: list-1; 108 | } 109 | .ql-editor ol li.ql-indent-1:before { 110 | content: counter(list-1, lower-alpha) '. '; 111 | } 112 | .ql-editor ol li.ql-indent-1 { 113 | counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; 114 | } 115 | .ql-editor ol li.ql-indent-2 { 116 | counter-increment: list-2; 117 | } 118 | .ql-editor ol li.ql-indent-2:before { 119 | content: counter(list-2, lower-roman) '. '; 120 | } 121 | .ql-editor ol li.ql-indent-2 { 122 | counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; 123 | } 124 | .ql-editor ol li.ql-indent-3 { 125 | counter-increment: list-3; 126 | } 127 | .ql-editor ol li.ql-indent-3:before { 128 | content: counter(list-3, decimal) '. '; 129 | } 130 | .ql-editor ol li.ql-indent-3 { 131 | counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; 132 | } 133 | .ql-editor ol li.ql-indent-4 { 134 | counter-increment: list-4; 135 | } 136 | .ql-editor ol li.ql-indent-4:before { 137 | content: counter(list-4, lower-alpha) '. '; 138 | } 139 | .ql-editor ol li.ql-indent-4 { 140 | counter-reset: list-5 list-6 list-7 list-8 list-9; 141 | } 142 | .ql-editor ol li.ql-indent-5 { 143 | counter-increment: list-5; 144 | } 145 | .ql-editor ol li.ql-indent-5:before { 146 | content: counter(list-5, lower-roman) '. '; 147 | } 148 | .ql-editor ol li.ql-indent-5 { 149 | counter-reset: list-6 list-7 list-8 list-9; 150 | } 151 | .ql-editor ol li.ql-indent-6 { 152 | counter-increment: list-6; 153 | } 154 | .ql-editor ol li.ql-indent-6:before { 155 | content: counter(list-6, decimal) '. '; 156 | } 157 | .ql-editor ol li.ql-indent-6 { 158 | counter-reset: list-7 list-8 list-9; 159 | } 160 | .ql-editor ol li.ql-indent-7 { 161 | counter-increment: list-7; 162 | } 163 | .ql-editor ol li.ql-indent-7:before { 164 | content: counter(list-7, lower-alpha) '. '; 165 | } 166 | .ql-editor ol li.ql-indent-7 { 167 | counter-reset: list-8 list-9; 168 | } 169 | .ql-editor ol li.ql-indent-8 { 170 | counter-increment: list-8; 171 | } 172 | .ql-editor ol li.ql-indent-8:before { 173 | content: counter(list-8, lower-roman) '. '; 174 | } 175 | .ql-editor ol li.ql-indent-8 { 176 | counter-reset: list-9; 177 | } 178 | .ql-editor ol li.ql-indent-9 { 179 | counter-increment: list-9; 180 | } 181 | .ql-editor ol li.ql-indent-9:before { 182 | content: counter(list-9, decimal) '. '; 183 | } 184 | .ql-editor .ql-indent-1:not(.ql-direction-rtl) { 185 | padding-left: 3em; 186 | } 187 | .ql-editor li.ql-indent-1:not(.ql-direction-rtl) { 188 | padding-left: 4.5em; 189 | } 190 | .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right { 191 | padding-right: 3em; 192 | } 193 | .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { 194 | padding-right: 4.5em; 195 | } 196 | .ql-editor .ql-indent-2:not(.ql-direction-rtl) { 197 | padding-left: 6em; 198 | } 199 | .ql-editor li.ql-indent-2:not(.ql-direction-rtl) { 200 | padding-left: 7.5em; 201 | } 202 | .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right { 203 | padding-right: 6em; 204 | } 205 | .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { 206 | padding-right: 7.5em; 207 | } 208 | .ql-editor .ql-indent-3:not(.ql-direction-rtl) { 209 | padding-left: 9em; 210 | } 211 | .ql-editor li.ql-indent-3:not(.ql-direction-rtl) { 212 | padding-left: 10.5em; 213 | } 214 | .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right { 215 | padding-right: 9em; 216 | } 217 | .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { 218 | padding-right: 10.5em; 219 | } 220 | .ql-editor .ql-indent-4:not(.ql-direction-rtl) { 221 | padding-left: 12em; 222 | } 223 | .ql-editor li.ql-indent-4:not(.ql-direction-rtl) { 224 | padding-left: 13.5em; 225 | } 226 | .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right { 227 | padding-right: 12em; 228 | } 229 | .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { 230 | padding-right: 13.5em; 231 | } 232 | .ql-editor .ql-indent-5:not(.ql-direction-rtl) { 233 | padding-left: 15em; 234 | } 235 | .ql-editor li.ql-indent-5:not(.ql-direction-rtl) { 236 | padding-left: 16.5em; 237 | } 238 | .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right { 239 | padding-right: 15em; 240 | } 241 | .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { 242 | padding-right: 16.5em; 243 | } 244 | .ql-editor .ql-indent-6:not(.ql-direction-rtl) { 245 | padding-left: 18em; 246 | } 247 | .ql-editor li.ql-indent-6:not(.ql-direction-rtl) { 248 | padding-left: 19.5em; 249 | } 250 | .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right { 251 | padding-right: 18em; 252 | } 253 | .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { 254 | padding-right: 19.5em; 255 | } 256 | .ql-editor .ql-indent-7:not(.ql-direction-rtl) { 257 | padding-left: 21em; 258 | } 259 | .ql-editor li.ql-indent-7:not(.ql-direction-rtl) { 260 | padding-left: 22.5em; 261 | } 262 | .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right { 263 | padding-right: 21em; 264 | } 265 | .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { 266 | padding-right: 22.5em; 267 | } 268 | .ql-editor .ql-indent-8:not(.ql-direction-rtl) { 269 | padding-left: 24em; 270 | } 271 | .ql-editor li.ql-indent-8:not(.ql-direction-rtl) { 272 | padding-left: 25.5em; 273 | } 274 | .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right { 275 | padding-right: 24em; 276 | } 277 | .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { 278 | padding-right: 25.5em; 279 | } 280 | .ql-editor .ql-indent-9:not(.ql-direction-rtl) { 281 | padding-left: 27em; 282 | } 283 | .ql-editor li.ql-indent-9:not(.ql-direction-rtl) { 284 | padding-left: 28.5em; 285 | } 286 | .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right { 287 | padding-right: 27em; 288 | } 289 | .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { 290 | padding-right: 28.5em; 291 | } 292 | .ql-editor .ql-video { 293 | display: block; 294 | max-width: 100%; 295 | } 296 | .ql-editor .ql-video.ql-align-center { 297 | margin: 0 auto; 298 | } 299 | .ql-editor .ql-video.ql-align-right { 300 | margin: 0 0 0 auto; 301 | } 302 | .ql-editor .ql-bg-black { 303 | background-color: #000; 304 | } 305 | .ql-editor .ql-bg-red { 306 | background-color: #e60000; 307 | } 308 | .ql-editor .ql-bg-orange { 309 | background-color: #f90; 310 | } 311 | .ql-editor .ql-bg-yellow { 312 | background-color: #ff0; 313 | } 314 | .ql-editor .ql-bg-green { 315 | background-color: #008a00; 316 | } 317 | .ql-editor .ql-bg-blue { 318 | background-color: #06c; 319 | } 320 | .ql-editor .ql-bg-purple { 321 | background-color: #93f; 322 | } 323 | .ql-editor .ql-color-white { 324 | color: #fff; 325 | } 326 | .ql-editor .ql-color-red { 327 | color: #e60000; 328 | } 329 | .ql-editor .ql-color-orange { 330 | color: #f90; 331 | } 332 | .ql-editor .ql-color-yellow { 333 | color: #ff0; 334 | } 335 | .ql-editor .ql-color-green { 336 | color: #008a00; 337 | } 338 | .ql-editor .ql-color-blue { 339 | color: #06c; 340 | } 341 | .ql-editor .ql-color-purple { 342 | color: #93f; 343 | } 344 | .ql-editor .ql-font-serif { 345 | font-family: Georgia, Times New Roman, serif; 346 | } 347 | .ql-editor .ql-font-monospace { 348 | font-family: Monaco, Courier New, monospace; 349 | } 350 | .ql-editor .ql-size-small { 351 | font-size: 0.75em; 352 | } 353 | .ql-editor .ql-size-large { 354 | font-size: 1.5em; 355 | } 356 | .ql-editor .ql-size-huge { 357 | font-size: 2.5em; 358 | } 359 | .ql-editor .ql-direction-rtl { 360 | direction: rtl; 361 | text-align: inherit; 362 | } 363 | .ql-editor .ql-align-center { 364 | text-align: center; 365 | } 366 | .ql-editor .ql-align-justify { 367 | text-align: justify; 368 | } 369 | .ql-editor .ql-align-right { 370 | text-align: right; 371 | } 372 | .ql-editor.ql-blank::before { 373 | color: rgba(0,0,0,0.6); 374 | content: attr(data-placeholder); 375 | font-style: italic; 376 | pointer-events: none; 377 | position: absolute; 378 | } 379 | .ql-snow.ql-toolbar:after, 380 | .ql-snow .ql-toolbar:after { 381 | clear: both; 382 | content: ''; 383 | display: table; 384 | } 385 | .ql-snow.ql-toolbar button, 386 | .ql-snow .ql-toolbar button { 387 | background: none; 388 | border: none; 389 | cursor: pointer; 390 | display: inline-block; 391 | float: left; 392 | height: 24px; 393 | padding: 3px 5px; 394 | width: 28px; 395 | } 396 | .ql-snow.ql-toolbar button svg, 397 | .ql-snow .ql-toolbar button svg { 398 | float: left; 399 | height: 100%; 400 | } 401 | .ql-snow.ql-toolbar button:active:hover, 402 | .ql-snow .ql-toolbar button:active:hover { 403 | outline: none; 404 | } 405 | .ql-snow.ql-toolbar input.ql-image[type=file], 406 | .ql-snow .ql-toolbar input.ql-image[type=file] { 407 | display: none; 408 | } 409 | .ql-snow.ql-toolbar button:hover, 410 | .ql-snow .ql-toolbar button:hover, 411 | .ql-snow.ql-toolbar button.ql-active, 412 | .ql-snow .ql-toolbar button.ql-active, 413 | .ql-snow.ql-toolbar .ql-picker-label:hover, 414 | .ql-snow .ql-toolbar .ql-picker-label:hover, 415 | .ql-snow.ql-toolbar .ql-picker-label.ql-active, 416 | .ql-snow .ql-toolbar .ql-picker-label.ql-active, 417 | .ql-snow.ql-toolbar .ql-picker-item:hover, 418 | .ql-snow .ql-toolbar .ql-picker-item:hover, 419 | .ql-snow.ql-toolbar .ql-picker-item.ql-selected, 420 | .ql-snow .ql-toolbar .ql-picker-item.ql-selected { 421 | color: #06c; 422 | } 423 | .ql-snow.ql-toolbar button:hover .ql-fill, 424 | .ql-snow .ql-toolbar button:hover .ql-fill, 425 | .ql-snow.ql-toolbar button.ql-active .ql-fill, 426 | .ql-snow .ql-toolbar button.ql-active .ql-fill, 427 | .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, 428 | .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, 429 | .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, 430 | .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, 431 | .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, 432 | .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, 433 | .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, 434 | .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, 435 | .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, 436 | .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, 437 | .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, 438 | .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, 439 | .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, 440 | .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, 441 | .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, 442 | .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, 443 | .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, 444 | .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, 445 | .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, 446 | .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { 447 | fill: #06c; 448 | } 449 | .ql-snow.ql-toolbar button:hover .ql-stroke, 450 | .ql-snow .ql-toolbar button:hover .ql-stroke, 451 | .ql-snow.ql-toolbar button.ql-active .ql-stroke, 452 | .ql-snow .ql-toolbar button.ql-active .ql-stroke, 453 | .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, 454 | .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, 455 | .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, 456 | .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, 457 | .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, 458 | .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, 459 | .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, 460 | .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, 461 | .ql-snow.ql-toolbar button:hover .ql-stroke-miter, 462 | .ql-snow .ql-toolbar button:hover .ql-stroke-miter, 463 | .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, 464 | .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, 465 | .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, 466 | .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, 467 | .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, 468 | .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, 469 | .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, 470 | .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, 471 | .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, 472 | .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { 473 | stroke: #06c; 474 | } 475 | .ql-snow { 476 | box-sizing: border-box; 477 | } 478 | .ql-snow * { 479 | box-sizing: border-box; 480 | } 481 | .ql-snow .ql-hidden { 482 | display: none; 483 | } 484 | .ql-snow .ql-out-bottom, 485 | .ql-snow .ql-out-top { 486 | visibility: hidden; 487 | } 488 | .ql-snow .ql-tooltip { 489 | position: absolute; 490 | transform: translateY(10px); 491 | } 492 | .ql-snow .ql-tooltip a { 493 | cursor: pointer; 494 | text-decoration: none; 495 | } 496 | .ql-snow .ql-tooltip.ql-flip { 497 | transform: translateY(-10px); 498 | } 499 | .ql-snow .ql-formats { 500 | display: inline-block; 501 | vertical-align: middle; 502 | } 503 | .ql-snow .ql-formats:after { 504 | clear: both; 505 | content: ''; 506 | display: table; 507 | } 508 | .ql-snow .ql-stroke { 509 | fill: none; 510 | stroke: #444; 511 | stroke-linecap: round; 512 | stroke-linejoin: round; 513 | stroke-width: 2; 514 | } 515 | .ql-snow .ql-stroke-miter { 516 | fill: none; 517 | stroke: #444; 518 | stroke-miterlimit: 10; 519 | stroke-width: 2; 520 | } 521 | .ql-snow .ql-fill, 522 | .ql-snow .ql-stroke.ql-fill { 523 | fill: #444; 524 | } 525 | .ql-snow .ql-empty { 526 | fill: none; 527 | } 528 | .ql-snow .ql-even { 529 | fill-rule: evenodd; 530 | } 531 | .ql-snow .ql-thin, 532 | .ql-snow .ql-stroke.ql-thin { 533 | stroke-width: 1; 534 | } 535 | .ql-snow .ql-transparent { 536 | opacity: 0.4; 537 | } 538 | .ql-snow .ql-direction svg:last-child { 539 | display: none; 540 | } 541 | .ql-snow .ql-direction.ql-active svg:last-child { 542 | display: inline; 543 | } 544 | .ql-snow .ql-direction.ql-active svg:first-child { 545 | display: none; 546 | } 547 | .ql-snow .ql-editor h1 { 548 | font-size: 2em; 549 | } 550 | .ql-snow .ql-editor h2 { 551 | font-size: 1.5em; 552 | } 553 | .ql-snow .ql-editor h3 { 554 | font-size: 1.17em; 555 | } 556 | .ql-snow .ql-editor h4 { 557 | font-size: 1em; 558 | } 559 | .ql-snow .ql-editor h5 { 560 | font-size: 0.83em; 561 | } 562 | .ql-snow .ql-editor h6 { 563 | font-size: 0.67em; 564 | } 565 | .ql-snow .ql-editor a { 566 | text-decoration: underline; 567 | } 568 | .ql-snow .ql-editor blockquote { 569 | border-left: 4px solid #ccc; 570 | margin-bottom: 5px; 571 | margin-top: 5px; 572 | padding-left: 16px; 573 | } 574 | .ql-snow .ql-editor code, 575 | .ql-snow .ql-editor pre { 576 | background-color: #f0f0f0; 577 | border-radius: 3px; 578 | } 579 | .ql-snow .ql-editor pre { 580 | white-space: pre-wrap; 581 | margin-bottom: 5px; 582 | margin-top: 5px; 583 | padding: 5px 10px; 584 | } 585 | .ql-snow .ql-editor code { 586 | font-size: 85%; 587 | padding-bottom: 2px; 588 | padding-top: 2px; 589 | } 590 | .ql-snow .ql-editor code:before, 591 | .ql-snow .ql-editor code:after { 592 | content: "\A0"; 593 | letter-spacing: -2px; 594 | } 595 | .ql-snow .ql-editor pre.ql-syntax { 596 | background-color: #23241f; 597 | color: #f8f8f2; 598 | overflow: visible; 599 | } 600 | .ql-snow .ql-editor img { 601 | max-width: 100%; 602 | } 603 | .ql-snow .ql-picker { 604 | color: #444; 605 | display: inline-block; 606 | float: left; 607 | font-size: 14px; 608 | font-weight: 500; 609 | height: 24px; 610 | position: relative; 611 | vertical-align: middle; 612 | } 613 | .ql-snow .ql-picker-label { 614 | cursor: pointer; 615 | display: inline-block; 616 | height: 100%; 617 | padding-left: 8px; 618 | padding-right: 2px; 619 | position: relative; 620 | width: 100%; 621 | } 622 | .ql-snow .ql-picker-label::before { 623 | display: inline-block; 624 | line-height: 22px; 625 | } 626 | .ql-snow .ql-picker-options { 627 | background-color: #fff; 628 | display: none; 629 | min-width: 100%; 630 | padding: 4px 8px; 631 | position: absolute; 632 | white-space: nowrap; 633 | } 634 | .ql-snow .ql-picker-options .ql-picker-item { 635 | cursor: pointer; 636 | display: block; 637 | padding-bottom: 5px; 638 | padding-top: 5px; 639 | } 640 | .ql-snow .ql-picker.ql-expanded .ql-picker-label { 641 | color: #ccc; 642 | z-index: 2; 643 | } 644 | .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { 645 | fill: #ccc; 646 | } 647 | .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { 648 | stroke: #ccc; 649 | } 650 | .ql-snow .ql-picker.ql-expanded .ql-picker-options { 651 | display: block; 652 | margin-top: -1px; 653 | top: 100%; 654 | z-index: 1; 655 | } 656 | .ql-snow .ql-color-picker, 657 | .ql-snow .ql-icon-picker { 658 | width: 28px; 659 | } 660 | .ql-snow .ql-color-picker .ql-picker-label, 661 | .ql-snow .ql-icon-picker .ql-picker-label { 662 | padding: 2px 4px; 663 | } 664 | .ql-snow .ql-color-picker .ql-picker-label svg, 665 | .ql-snow .ql-icon-picker .ql-picker-label svg { 666 | right: 4px; 667 | } 668 | .ql-snow .ql-icon-picker .ql-picker-options { 669 | padding: 4px 0px; 670 | } 671 | .ql-snow .ql-icon-picker .ql-picker-item { 672 | height: 24px; 673 | width: 24px; 674 | padding: 2px 4px; 675 | } 676 | .ql-snow .ql-color-picker .ql-picker-options { 677 | padding: 3px 5px; 678 | width: 152px; 679 | } 680 | .ql-snow .ql-color-picker .ql-picker-item { 681 | border: 1px solid transparent; 682 | float: left; 683 | height: 16px; 684 | margin: 2px; 685 | padding: 0px; 686 | width: 16px; 687 | } 688 | .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg { 689 | position: absolute; 690 | margin-top: -9px; 691 | right: 0; 692 | top: 50%; 693 | width: 18px; 694 | } 695 | .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, 696 | .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, 697 | .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, 698 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, 699 | .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, 700 | .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before { 701 | content: attr(data-label); 702 | } 703 | .ql-snow .ql-picker.ql-header { 704 | width: 98px; 705 | } 706 | .ql-snow .ql-picker.ql-header .ql-picker-label::before, 707 | .ql-snow .ql-picker.ql-header .ql-picker-item::before { 708 | content: 'Normal'; 709 | } 710 | .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, 711 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { 712 | content: 'Heading 1'; 713 | } 714 | .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, 715 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { 716 | content: 'Heading 2'; 717 | } 718 | .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, 719 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { 720 | content: 'Heading 3'; 721 | } 722 | .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, 723 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { 724 | content: 'Heading 4'; 725 | } 726 | .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, 727 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { 728 | content: 'Heading 5'; 729 | } 730 | .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, 731 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { 732 | content: 'Heading 6'; 733 | } 734 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { 735 | font-size: 2em; 736 | } 737 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { 738 | font-size: 1.5em; 739 | } 740 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { 741 | font-size: 1.17em; 742 | } 743 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { 744 | font-size: 1em; 745 | } 746 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { 747 | font-size: 0.83em; 748 | } 749 | .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { 750 | font-size: 0.67em; 751 | } 752 | .ql-snow .ql-picker.ql-font { 753 | width: 108px; 754 | } 755 | .ql-snow .ql-picker.ql-font .ql-picker-label::before, 756 | .ql-snow .ql-picker.ql-font .ql-picker-item::before { 757 | content: 'Sans Serif'; 758 | } 759 | .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before, 760 | .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before { 761 | content: 'Serif'; 762 | } 763 | .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before, 764 | .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before { 765 | content: 'Monospace'; 766 | } 767 | .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before { 768 | font-family: Georgia, Times New Roman, serif; 769 | } 770 | .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before { 771 | font-family: Monaco, Courier New, monospace; 772 | } 773 | .ql-snow .ql-picker.ql-size { 774 | width: 98px; 775 | } 776 | .ql-snow .ql-picker.ql-size .ql-picker-label::before, 777 | .ql-snow .ql-picker.ql-size .ql-picker-item::before { 778 | content: 'Normal'; 779 | } 780 | .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before, 781 | .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before { 782 | content: 'Small'; 783 | } 784 | .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before, 785 | .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before { 786 | content: 'Large'; 787 | } 788 | .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, 789 | .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { 790 | content: 'Huge'; 791 | } 792 | .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before { 793 | font-size: 10px; 794 | } 795 | .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before { 796 | font-size: 18px; 797 | } 798 | .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { 799 | font-size: 32px; 800 | } 801 | .ql-snow .ql-color-picker.ql-background .ql-picker-item { 802 | background-color: #fff; 803 | } 804 | .ql-snow .ql-color-picker.ql-color .ql-picker-item { 805 | background-color: #000; 806 | } 807 | .ql-toolbar.ql-snow { 808 | border: 1px solid #ccc; 809 | box-sizing: border-box; 810 | font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 811 | padding: 8px; 812 | } 813 | .ql-toolbar.ql-snow .ql-formats { 814 | margin-right: 15px; 815 | } 816 | .ql-toolbar.ql-snow .ql-picker-label { 817 | border: 1px solid transparent; 818 | } 819 | .ql-toolbar.ql-snow .ql-picker-options { 820 | border: 1px solid transparent; 821 | box-shadow: rgba(0,0,0,0.2) 0 2px 8px; 822 | } 823 | .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { 824 | border-color: #ccc; 825 | } 826 | .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { 827 | border-color: #ccc; 828 | } 829 | .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, 830 | .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover { 831 | border-color: #000; 832 | } 833 | .ql-toolbar.ql-snow + .ql-container.ql-snow { 834 | border-top: 0px; 835 | } 836 | .ql-snow .ql-tooltip { 837 | background-color: #fff; 838 | border: 1px solid #ccc; 839 | box-shadow: 0px 0px 5px #ddd; 840 | color: #444; 841 | padding: 5px 12px; 842 | white-space: nowrap; 843 | } 844 | .ql-snow .ql-tooltip::before { 845 | content: "Visit URL:"; 846 | line-height: 26px; 847 | margin-right: 8px; 848 | } 849 | .ql-snow .ql-tooltip input[type=text] { 850 | display: none; 851 | border: 1px solid #ccc; 852 | font-size: 13px; 853 | height: 26px; 854 | margin: 0px; 855 | padding: 3px 5px; 856 | width: 170px; 857 | } 858 | .ql-snow .ql-tooltip a.ql-preview { 859 | display: inline-block; 860 | max-width: 200px; 861 | overflow-x: hidden; 862 | text-overflow: ellipsis; 863 | vertical-align: top; 864 | } 865 | .ql-snow .ql-tooltip a.ql-action::after { 866 | border-right: 1px solid #ccc; 867 | content: 'Edit'; 868 | margin-left: 16px; 869 | padding-right: 8px; 870 | } 871 | .ql-snow .ql-tooltip a.ql-remove::before { 872 | content: 'Remove'; 873 | margin-left: 8px; 874 | } 875 | .ql-snow .ql-tooltip a { 876 | line-height: 26px; 877 | } 878 | .ql-snow .ql-tooltip.ql-editing a.ql-preview, 879 | .ql-snow .ql-tooltip.ql-editing a.ql-remove { 880 | display: none; 881 | } 882 | .ql-snow .ql-tooltip.ql-editing input[type=text] { 883 | display: inline-block; 884 | } 885 | .ql-snow .ql-tooltip.ql-editing a.ql-action::after { 886 | border-right: 0px; 887 | content: 'Save'; 888 | padding-right: 0px; 889 | } 890 | .ql-snow .ql-tooltip[data-mode=link]::before { 891 | content: "Enter link:"; 892 | } 893 | .ql-snow .ql-tooltip[data-mode=formula]::before { 894 | content: "Enter formula:"; 895 | } 896 | .ql-snow .ql-tooltip[data-mode=video]::before { 897 | content: "Enter video:"; 898 | } 899 | .ql-snow a { 900 | color: #06c; 901 | } 902 | .ql-container.ql-snow { 903 | border: 1px solid #ccc; 904 | } -------------------------------------------------------------------------------- /bin/console: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | require "bundler/setup" 4 | require "quilljs/rails" 5 | 6 | # You can add fixtures and/or initialization code here to make experimenting 7 | # with your gem easier. You can also use a different console, if you like. 8 | 9 | # (If you use this, don't forget to add pry to your Gemfile!) 10 | # require "pry" 11 | # Pry.start 12 | 13 | require "irb" 14 | IRB.start 15 | -------------------------------------------------------------------------------- /bin/setup: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | set -euo pipefail 3 | IFS=$'\n\t' 4 | set -vx 5 | 6 | bundle install 7 | 8 | # Do any other automated setup that you need to do here 9 | -------------------------------------------------------------------------------- /lib/quilljs/rails.rb: -------------------------------------------------------------------------------- 1 | require "quilljs/rails/version" 2 | 3 | module Quilljs 4 | module Rails 5 | class Engine < ::Rails::Engine 6 | end 7 | end 8 | end -------------------------------------------------------------------------------- /lib/quilljs/rails/version.rb: -------------------------------------------------------------------------------- 1 | module Quilljs 2 | module Rails 3 | VERSION = "0.0.3" 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /quilljs-rails.gemspec: -------------------------------------------------------------------------------- 1 | # coding: utf-8 2 | lib = File.expand_path('../lib', __FILE__) 3 | $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib) 4 | require 'quilljs/rails/version' 5 | 6 | Gem::Specification.new do |spec| 7 | spec.name = "quilljs-rails" 8 | spec.version = Quilljs::Rails::VERSION 9 | spec.authors = ["Abhinav Mathur"] 10 | spec.email = ["amathur5000@gmail.com"] 11 | 12 | spec.summary = %q{This gem adds quill rich text editor to input fields} 13 | spec.description = '' 14 | spec.homepage = 'https://www.github.com/abhinavmathur/quilljs-rails' 15 | spec.license = "MIT" 16 | spec.files = `git ls-files`.split("\n") 17 | 18 | spec.executables = [] 19 | spec.require_paths = ['lib'] 20 | spec.required_ruby_version = '>= 2.1.3' 21 | 22 | spec.add_development_dependency 'bundler', '~> 1.13' 23 | spec.add_development_dependency "rake", ">= 12.3.3" 24 | spec.add_development_dependency 'jquery-rails', '~> 4.1' 25 | 26 | end 27 | -------------------------------------------------------------------------------- /test/quilljs/rails_test.rb: -------------------------------------------------------------------------------- 1 | require 'test_helper' 2 | 3 | class Quilljs::RailsTest < Minitest::Test 4 | def test_that_it_has_a_version_number 5 | refute_nil ::Quilljs::Rails::VERSION 6 | end 7 | 8 | def test_it_does_something_useful 9 | assert false 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /test/test_helper.rb: -------------------------------------------------------------------------------- 1 | $LOAD_PATH.unshift File.expand_path('../../lib', __FILE__) 2 | require 'quilljs/rails' 3 | 4 | require 'minitest/autorun' 5 | --------------------------------------------------------------------------------