Summernote - Custom Button on multiple Editor Instances

Question

i have a custom Button in Summernote, it's working as expected. Problem is, that it works on all instantiated Editors at the same time.

To reconstruct the issue better: I have a button, when i click it, a new Editor is initialized. I'm making 2 Editors. I click 1 of them and add Text to it via my custom button -> works.

I click the second Instance and add Text to it via my custom button: The text gets added to both editors.

var HelloButton = function (context) {
        var ui = $.summernote.ui;

        // create button
        var button = ui.button({
            contents: '<i class="fa fa-child"/> Hello',
            tooltip: 'hello',
            click: function () {
                   context.invoke('editor.insertText', myCat);
                });
            }
        });

        return button.render();   // return button as jquery object
    }

Any help appreciated, thanks!

Answer 1

How are you instantiating your summer note editors ? are you creating them by class id or name html attribute ? making each input distinct should resolve your issue.

<div class ="form-group">
<label for="inputA"> Input A </label>
<textarea class="textarea-inputA" id="inputA" name="inputA" />
<span validationfor="inputA">
</div>



<div class ="form-group">
<label for="inputB"> Input B </label>
<textarea class="textarea-inputA" id="inputB" name="inputB" />
<span validationfor="inputB">
</div>

then call summernote() on each selection how you were activating the controls previously.