CODEWITHSUNDEEP
javascriptquill
Srinivas
Srinivas

Reputation: 339

Is it possible to display toolbar options below textarea in Quilljs editor?

How to display toolbar below textarea.

My code: 

var quill = new Quill('#txtMessage', {
  theme: 'snow',
  modules: {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline'],
        [{
          'list': 'ordered'
        }, {
          'list': 'bullet'
        }],
        ['clean'],
        ['code-block'],
        [{
          'variables': ['{Name}', '{Email}']
        }],
      ],
      handlers: {
        "variables": function(value) {
          if (value) {
            const cursorPosition = this.quill.getSelection().index;
            this.quill.insertText(cursorPosition, value);
            this.quill.setSelection(cursorPosition + value.length);
          }
        }
      }
    }
  }
});

// Variables
const placeholderPickerItems = Array.prototype.slice.call(document.querySelectorAll('.ql-variables .ql-picker-item'));
placeholderPickerItems.forEach(item => item.textContent = item.dataset.value);
document.querySelector('.ql-variables .ql-picker-label').innerHTML = 'Variables' + document.querySelector('.ql-variables .ql-picker-label').innerHTML;
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet"/>

<div id="txtMessage"></div>

Output for the above code: enter image description here

I want output as follows: enter image description here How to accomplish above result.

Upvotes: 3

Views: 6335

Answers (5)

Tarun Jain
Tarun Jain

Reputation: 689

Many people above have given answer. I am just sharing example in react using that solution for reference

import React, { useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

function TextEditor() {
  const [value, setValue] = useState("");

  return (
    <ReactQuill
      theme="snow"
      value={value}
      onChange={setValue}
      style={{
        display: "flex",
        flexDirection: "column-reverse",
      }}
    />
  );
}

export default TextEditor;

Upvotes: 1

emmanuel uchewa
emmanuel uchewa

Reputation: 11

<ReactQuill className="editor" />

<style> 
.editor .ql-toolbar { 
position: absolute; 
top: calc(100% + 10px); 
}
</style>

Upvotes: -1

Andrew Basarab
Andrew Basarab

Reputation: 428

You can use flexbox to achieve this. Something like this should do the trick:

<div class="d-flex flex-column-reverse">
   <div id="quill-editor"></div>
</div>

Also remember that you need to update Quill css styles (borders, etc)

Upvotes: 1

Mike Kodiak
Mike Kodiak

Reputation: 181

This does the trick:

.ql-container {
  display: flex;
  flex-direction: column-reverse; 
}

Upvotes: 7

Mosh Feu
Mosh Feu

Reputation: 29347

I can't see why not use only css.

Something like this:

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{
        header: [1, 2, false]
      }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});
#editor-container {
  height: 375px;
}

.editor-wrapper {
  position: relative;
}

.ql-toolbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(100%);
}
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet"/>
<div class="editor-wrapper">
  <div id="editor-container">
  </div>
</div>

https://codepen.io/moshfeu/pen/wXwqmg

Upvotes: 1

Related Questions