Inserting pictures/tables/links with multiple instances

Xissi commented 8 years ago

When having multiple instances of the editor on one page, trying to insert a picture/table/link into one will sometimes insert the content into the wrong editor. Is there a fix for that?

TonyFrancis commented 8 years ago

try giving different id to the text-editors and check . If not working then please share source code

Xissi commented 8 years ago

The editors do have different ids (#editorbox, #casevalue{number}). I'm not sure what part of the source code you would need, but I might add that all the #case_value_x-editors are added to the page via Javascript when the user clicks a specific button.

TonyFrancis commented 8 years ago

please verify that issue comes to #case_value{number} ??? (number mis match ) if issue comes to those editor instances, it might be because of index ordering problem .

Mortivor commented 8 years ago

I can reproduce this. Just take the demo.html and add a second editor.

<!DOCTYPE HTML>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="editor.js"></script>
        <script>
            $(document).ready(function() {
                $("#txtEditor1").Editor();
                $("#txtEditor2").Editor();
            });
        </script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link href="editor.css" type="text/css" rel="stylesheet"/>
        <title>LineControl | v1.1.0</title>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <h2 class="demo-text">LineControl Demo</h2>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 nopadding">
                            <textarea id="txtEditor1"></textarea> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <h2 class="demo-text">LineControl Demo</h2>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 nopadding">
                            <textarea id="txtEditor2"></textarea> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid footer">
            <p class="pull-right">&copy; Suyati Technologies <script>document.write(new Date().getFullYear())</script>. All rights reserved.</p>
        </div>
    </body>
</html>

Now click on "Insert Table" in the second editor and just hit "Done". The Table will be inserted in the first editor. I´m not sure whether the "this" in createModal() has the wrong value or document.execCommand() just assumes the wrong editor as the "currenty active editable element" (https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)

Mortivor commented 8 years ago

Maybe you will have to try and insert a table more than once.

Mortivor commented 8 years ago

It seems to work again when I comment out lines 53 - 55

sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

andrewlavens commented 8 years ago

Apologies, but I can confirm the issue. I've got three textareas on the page (with different IDs) and can reproduce the problem.

Mortivor commented 8 years ago

I think I discovered the cause. Let me try to explain (referencing my example from four comments before this). I got two Editors: #txtEdtitor1 and #txtEditor2. createModal() now inserts two modal dialogs into the page, both with the ID #InsertTable (same goes for #InsertLink etc.). When clicking on the "Insert Table" Icon in either of the editors, the modal dialog with ID #InsertTable is shown. But since their are two, and according the W3C IDs have to be unique, jQuery constantly selects only the first one of a set of two (i don't know the ordering). So in my case, it always selected the #InsertTable created in context of #txtEditor1 and thus inserted the table into the wrong editor.

I will make a patch for this and submit.

suyati / line-control

Inserting pictures/tables/links with multiple instances #50