Consider allowing multiple editors on the same page & to use the same toolbar.

u12206050 commented 8 years ago

When having more than one editor on a page, each one currently seems to require their own toolbar. If I try to assign a previously assigned toolbar then the events don't work for the second editor.

Steps for Reproduction

Create one toolbar
Create two editors
Assign both editors the same toolbar.

Expected behavior: Would be easy enough to simply keep track of which editor was last active and apply and changes to that editor eg. Changing font size etc.

Actual behavior: The tool bar seems broken as soon as the second editor is attached to it. Only the second editor is actually usable, because when trying to type in the first one, the cursor jumps to the second one.

Gnanavel76 commented 3 years ago

I found a another solution. But don't know whether it will be a efficient one.

So basically I am wrapping all the quill editors. Then I applied CSS property position:absolute to all the toolbar. Then through JavaScript I am getting the focused editor and making the corresponding toolbar visible and hiding all the remaining toolbar.

.editor-container{
  position: relative;
  padding-top: 50px;
}
.editor-container .ql-toolbar{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
}
.ql-container{
  border: 1px solid #000!important;
  margin-bottom: 1rem;
}
.d-none{
  display: none;
}

<div class="editor-container">
      <div id="editor" class="editor"></div>
      <div id="editor1" class="editor"></div>
</div>

let quill = new Quill("#editor", {
  theme: "snow",
});
let quill1 = new Quill("#editor1", {
  theme: "snow",
});

document.querySelectorAll(".editor .ql-editor").forEach((item)=>{
  item.addEventListener("click",(e)=>{
    // Getting the focused editor
    let selectedEditor = e.currentTarget.parentElement;
    let selectedEditorToolbar = selectedEditor.previousElementSibling;
    // Making the toolbar visible if already hidden.
    selectedEditorToolbar.classList.remove("d-none");
    // Hiding Toolbar of all non focused editor.
    document.querySelectorAll(".ql-toolbar").forEach((toolbar)=>{
      if(!toolbar.isEqualNode(selectedEditorToolbar)){
        toolbar.classList.add("d-none");
      }
    })
  })
})

aghontpi commented 3 years ago

Woah, this is open for a long time now.

Can somebody pin the official solution to this?

maxfahl commented 3 years ago

Don't think such a solution exists.

maxfahl commented 3 years ago

I found a another solution. But don't know whether it will be a efficient one. ...

It's a nice solution, but you're using two toolbars instead of one for both editable areas. But if they're in the same container, it would still appear as one. Though it would be a hassle doing it this way with an unknown amount of editable areas that are all placed at diffent places.

vishalvora commented 2 years ago

I have achieve the functionality with angular.

I have created the editor class without toolbar
I have created one common editor with toolbar and hide the text editor. This toolbar will be common for all editors.
From main tool bar I have attached custom handler for all buttons.
When any toolbar button clicked it will broadcast event to all editors with type of format and its value.
In editor class event will be subscribed and when event received it will apply the formatting to selected text.

TonyYu2015 commented 2 years ago

i have created a quill module about this issue, maybe it helps; https://github.com/TonyYu2015/quill-free-container

asagaonkarsumit commented 2 years ago

`<!DOCTYPE html>

Document

Editor #1

Hello World!

Some initial bold text

Some lorem ipsum text

Editor #2

Hello World! 2

Some initial bold text

Some lorem ipsum text

Editor #3

Hello World! 3

Some initial bold text

Some lorem ipsum text

Editor #4

Hello World! 4

Some initial bold text

Some lorem ipsum text

` dynamically created toolbar and hide the other toolbar and visible active tollbar

Jayeshkarma commented 1 year ago

it's working fine for my code example is here

https://codesandbox.io/embed/blazing-river-8s9vsl?fontsize=14&hidenavigation=1&theme=dark

slab / quill