ForEach and rich text editor

ForEach and rich text editor
0

#1

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": ""
        }
      }
    });
})


#2

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

http://jsfiddle.net/4d5Lghsj/


#3

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.


#4

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.