Lineone - From Rich Text Editor

Rich Text Editor

Forms
Rich Text Editor

Text Editor

Code

The textarea provides a native and essential solution to almost any web application. But at some point you may need to add formatting to text input. Quill is a free, open source WYSIWYG editor built for the modern web.

                
  <div
    class="h-48"
    x-init="$el._x_quill = new Quill($el,{
    modules : {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
        ['blockquote', 'code-block'],
        [{ header: 1 }, { header: 2 }], // custom button values
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
        [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
        [{ direction: 'rtl' }], // text direction
        [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
        [{ font: [] }],
        [{ align: [] }],
        ['clean'], // remove formatting button
      ],
    },
    placeholder: 'Enter your content...',
    theme: 'snow',
  })"
  ></div>

Minimal

Code

                
  <div
    class="h-48"
    x-init="$el._x_quill = new Quill($el,{
      modules : {
        toolbar: [
          ['bold', 'italic', 'underline'],
          [
            { list: 'ordered' },
            { list: 'bullet' },
            { header: 1 },
            { background: [] },
          ],
        ],
      },
      placeholder: 'Enter your content...',
      theme: 'snow',
    })"
  ></div>

Filled Header

Code

                
  <div class="ql-header-filled w-full">
    <div
      class="h-48"
      x-init="$el._x_quill = new Quill($el,{
            modules : {
              toolbar: [
                ['bold', 'italic', 'underline', 'strike'], // toggled buttons
                ['blockquote', 'code-block'],
                [{ header: 1 }, { header: 2 }], // custom button values
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
                [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
                [{ direction: 'rtl' }], // text direction
                [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [{ color: [] }, { background: [] }], // dropdown with defaults from theme
                [{ font: [] }],
                [{ align: [] }],
                ['clean'], // remove formatting button
              ],
            },
            placeholder: 'Enter your content...',
            theme: 'snow',
          })"
    ></div>
  </div>

Customizing

Code

                
  <div class="ql-header-filled w-full">
    <div
      class="h-48"
      x-init="$el._x_quill = new Quill($el,{
          modules:{
              toolbar: [
                  ['bold', 'italic', 'underline', 'strike'],
                  ['blockquote', 'code-block'],
                  [{ header: [1, 2, 3, 4, 5, 6, false] }],
                  [{ color: [] }, { background: [] }],
                  ['clean'],
              ]
          },
          placeholder: 'Enter your content...',
          theme: 'snow',
      })"
    ></div>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Rich Text Editor

Text Editor

Minimal

Filled Header

Customizing