Selecting multiple content-editable divs

Question

I have a list of content-editable divs on a page. I was unable to select the content of all the divs.

As every div is a separately editable one, as an alternative, on select and drag I want to highlight the divs. Like the one below:

.editable {
  height: 30px;
  line-height: 30px;
  padding: 5px;
}

<div>
  <div class="editable" contenteditable="true">Block 1</div>
  <div class="editable" contenteditable="true">Block 2</div>
  <div class="editable" contenteditable="true">Block 3</div>
  <div class="editable" contenteditable="true">Block 4</div>
</div>

Please let me know how to achieve it using jquery or javascript.

Answer 1

The simplest solution would be to make the parent div contenteditable too:

.editable {
  height: 30px;
  line-height: 30px;
  padding: 5px;
}

<div contenteditable>
  <div class="editable" contenteditable="true">Block 1</div>
  <div class="editable" contenteditable="true">Block 2</div>
  <div class="editable" contenteditable="true">Block 3</div>
  <div class="editable" contenteditable="true">Block 4</div>
</div>

Answer 2

Here is a snippet from my Angular application, maybe it will help a little:

    this.containerElement.nativeElement.addEventListener('mousedown', () => {
      document.getSelection()?.empty();
      this.containerElement.nativeElement.setAttribute('contenteditable', true);
    });

    this.containerElement.nativeElement.addEventListener('mouseup', () => {
      const selection = saveSelection(this.containerElement.nativeElement);

      this.containerElement.nativeElement.setAttribute(
        'contenteditable',
        false,
      );

      restoreSelection(this.containerElement.nativeElement, selection);
    });

Answer 3

selcting multiple div with same class name, can use jquery each function then you will get all div class name with indexes.

$('.editable').each(function(index, element) {
        $(this).text()
});