Editors

Editors


<form>
    <div class="form-group mb-4">
        <label class="label text-secondary fs-14">Description</label>
        <div id="standalone-container">
            <div id="toolbar-container" class="rounded-top-2">
                <span class="ql-formats">
                    <select class="ql-font"></select>
                    <select class="ql-size"></select>
                </span>
                <span class="ql-formats">
                    <button class="ql-bold"></button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-strike"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-blockquote"></button>
                    <button class="ql-code-block"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-list" value="ordered"></button>
                    <button class="ql-list" value="bullet"></button>
                    <button class="ql-indent" value="-1"></button>
                    <button class="ql-indent" value="+1"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-link"></button>
                    <button class="ql-image"></button>
                    <button class="ql-video"></button>
                </span>
            </div>
            <div id="editor-container" style="height: 250px; border-color: #D5D9E2;" class="rounded-bottom-2"></div>
        </div>
    </div>
    <div class="form-group">
        <div class="d-flex flex-wrap gap-3 align-items-center">
            <button class="btn btn-primary text-white fw-semibold py-2 px-4 me-4" type="submit">
                Send
            </button>
            <div class="position-relative top-3 d-flex align-items-baseline flex-wrap gap-sm-0">
                <button class="p-0 border-0 bg-transparent" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Text">
                    <i class="material-symbols-outlined fs-20 text-body hover">text_fields_alt</i>
                </button>
                <button class="p-0 border-0 bg-transparent ms-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="File">
                    <i class="material-symbols-outlined fs-20 text-body hover">attach_file</i>
                </button>
                <button class="p-0 border-0 bg-transparent ms-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Link">
                    <i class="material-symbols-outlined fs-20 text-body hover">link</i>
                </button>
                <button class="p-0 border-0 bg-transparent ms-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Mood">
                    <i class="material-symbols-outlined fs-20 text-body hover">mood</i>
                </button>
                <button class="p-0 border-0 bg-transparent ms-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Drive">
                    <i class="material-symbols-outlined fs-20 text-body hover">add_to_drive</i>
                </button>
                <button class="p-0 border-0 bg-transparent ms-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Pen">
                    <i class="material-symbols-outlined fs-20 text-body hover">ink_pen</i>
                </button>
                <div class="dropdown action-opt ms-3 position-relative top-2" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="More Option">
                    <button class="p-0 border-0 bg-transparent" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="material-symbols-outlined fs-20 text-body hover">more_vert</i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                        <li>
                            <a class="dropdown-item" href="javascript:void(0);">
                                <i data-feather="eye"></i>
                                View All
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="javascript:void(0);">
                                <i data-feather="trash-2"></i>
                                Delete One
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="javascript:void(0);">
                                <i data-feather="lock"></i>
                                Block
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>