ForEach and rich text editor

Hi! I’m trying to create multiple instances of an squire rich text editor… it seems my code only runs correctly on the last iteration. Please help.

//HTML
<div id="editor" class="doc ui_qtext_rendered_qtext" contenteditable="true" data-kind="doc" placeholder="" style="min-height: 500px;"> </div>
        <br>
<div id="editor1" class="doc ui_qtext_rendered_qtext" contenteditable="true" data-kind="doc" placeholder="" style="min-height: 500px;background:green;"> </div>


//JS
// Get all the instances of the doc
var divs = Array.from(document.getElementsByClassName( 'doc' ));

//Initialize editor in each div
var editor;

divs.forEach(function(div){
    editor = new Squire(div, {
      blockTag: "p",
      blockAttributes: { class: "ui_qtext_para" },
      tagAttributes: {
        a: {
          class: "external_link",
          target: "_blank",
          rel: "noopener nofollow",
          "data-qt-tooltip": ""
        }
      }
    });
})

I made a JSFiddle with your code and it seems to work fine.

http://jsfiddle.net/4d5Lghsj/

Thanks! I don’t know how to say it. But say I want to bold a certain area in #editor, the bold command is applied in the last instance, in the example above #editor1… when it should be separate for each editable content.

If I select a word in the top editor where I have typed something I can bold it. Also, I can go to the bottom editor and bold something else.

1 Like