New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

In case of Multiple divs Alloy Editor doesn't focus on currently selected div in case of Dropdown #515

Closed
qasid opened this Issue May 2, 2016 · 8 comments

Comments

Projects
None yet
3 participants
@qasid

qasid commented May 2, 2016

I have a sample code that creates a new div on click and appends or should I say bind it with an Alloyeditor instance. Problem I am having is that instance created this way works fine for first selected and created div, but when second div is selected "bold" "underline" etc buttons work properly. except in case of Dropdown list item selection, it doesn't work properly, i.e on click of dropdown list item in second div, first div remains selected and selection is applied on selected text but in previous instance. As more instances are created bold and Underline etc. buttons also don't work properly.

Here is my code:

//HTML
<div id="container">
      // divs added here
</div>
<button id="btnAddDiv" type="button">Add Address</button>

//Script

AlloyEditor.Selections[3].buttons = ['FontSize'].concat(AlloyEditor.Selections[3].buttons.concat([ 'Font' ]));

var editor=null; 
var element=null;
var count= 1;

//  on click new div is created and added to main div container.

$("btnAddAddress").addEventListener("click", function () {

          element = document.createElement("div");

          var prevId=element.id || null;
          element.id="NewDiv"+ count++; 

         element.setAttribute("contenteditable", "true");

         element.innerHTML = count +"). Test Data ";

         element.onclick = function () {

           if (editor == null || prevId== null){

              editor = AlloyEditor.editable(element.id,{
              extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + ',ae_richcombobridge,font',});

            } else if( prevId == element.id) {

                  // also tried to destroy previous instance

                   editor.destroy();
                  element.id =null;
            }
      };
       $("container").appendChild(element);
});

1). Does Alloyeditor provide multiple instance support.?
2). Is there a better way to do this to avoid creation of a new variable for each instance?
3). How to unbind an element ID from Alloyeditor?

Thanks,

@ipeychev

This comment has been minimized.

Contributor

ipeychev commented May 2, 2016

Hey @qasid,

Let me answer to these questions one by one:

1). Does Alloyeditor provide multiple instance support.?

Yes, it does.

  1. Is there a better way to do this to avoid creation of a new variable for each instance?
    3). How to unbind an element ID from Alloyeditor?

About these two questions, please see the code below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Advanced Editing Demo</title>
        <link href="alloy-editor/assets/alloy-editor-ocean.css" rel="stylesheet">
        <script src="alloy-editor/alloy-editor-all.js"></script>
    </head>
    <body>
        <div id="container"></div>
        <button id="btnAddDiv" type="button">Add Address</button>

        <script type="text/javascript">
            AlloyEditor.Selections[3].buttons = ['Font', 'FontSize'].concat(AlloyEditor.Selections[3].buttons);

            var alloyEditorInstances = Object.create(null);

            function creteAlloyEditorInstance(element) {
                var instance = AlloyEditor.editable(element.id, {
                    extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + ',ae_richcombobridge,font'
                });

                alloyEditorInstances[element.id] = instance;
            }

            var count = 1;

            document.getElementById('btnAddDiv').addEventListener('click', function () {
                var element = document.createElement('div');
                element.id = 'id' + count++;
                element.innerHTML = count + '). Test Data ';
                document.getElementById('container').appendChild(element);

                element.addEventListener('click', function() {
                    var existingInstance = alloyEditorInstances[element.id];

                    if (existingInstance) {
                        existingInstance.destroy();
                        alloyEditorInstances[element.id] = null;
                    } else {
                        creteAlloyEditorInstance(element);
                    }
                });
            });
        </script>
    </body>
</html>

This should do what you want - the instances are created and deleted on the fly.

@ipeychev

This comment has been minimized.

Contributor

ipeychev commented May 2, 2016

Now, about the issue with the duplicated status of Fonts and FontSize buttons:
I checked and it is indeed like this. These are not AlloyEditor's buttons, these are CKEditor ones and maybe in this case there is something wrong. Hey @jbalsas, could you please check this? You can use the code from the previous comment, just comment these two lines:

existingInstance.destroy();
alloyEditorInstances[element.id] = null;

and download the FontSize plugin, as it is shown in our guides.

Here is the issue:

duplicate

Thanks,

@jbalsas

This comment has been minimized.

Member

jbalsas commented May 3, 2016

Looks like we may be intializing the plugins with the wrong editor instance... I'll take a look

@jbalsas

This comment has been minimized.

Member

jbalsas commented May 3, 2016

From what I'm seeing, we assumed the CKEditor plugins wouldn't have state, but unfortunately, they do :(

The methods we invoke: init, onClick, onRender rely on the editor value being defined in their closure. Since we are reusing the first definition, they all point to the same editor instance. I'll need to think about this to see what we can do.

@ipeychev ipeychev added bug and removed help wanted question labels May 5, 2016

@qasid

This comment has been minimized.

qasid commented May 6, 2016

Hello @ipeychev & @jbalsas,

Any update on the issue? I'm waiting for a fix, as it would effect release time.

Thanks,

@jbalsas

This comment has been minimized.

Member

jbalsas commented May 6, 2016

Hey @qasid I successfully identified the issue, but haven't had time to work on a fix yet 😢

I think we should be able to start working on this some time next week.

@ipeychev ipeychev added this to the 1.5.1 milestone May 6, 2016

antoniopol06 added a commit to antoniopol06/alloy-editor that referenced this issue May 10, 2016

antoniopol06 added a commit to antoniopol06/alloy-editor that referenced this issue May 10, 2016

antoniopol06 added a commit to antoniopol06/alloy-editor that referenced this issue May 10, 2016

antoniopol06 added a commit to antoniopol06/alloy-editor that referenced this issue May 12, 2016

antoniopol06 added a commit to antoniopol06/alloy-editor that referenced this issue May 12, 2016

antoniopol06 added a commit to antoniopol06/alloy-editor that referenced this issue May 12, 2016

antoniopol06 added a commit to antoniopol06/alloy-editor that referenced this issue May 12, 2016

@ipeychev ipeychev closed this in 2b68150 May 12, 2016

ipeychev added a commit that referenced this issue May 12, 2016

ipeychev added a commit that referenced this issue May 12, 2016

@qasid

This comment has been minimized.

qasid commented May 13, 2016

Hello @ipeychev @jbalsas

Thanks a lot !
works like a charm.. 👍

@jbalsas

This comment has been minimized.

Member

jbalsas commented May 13, 2016

Cool, glad it's working for you now, @qasid!

Thanks for reporting and helping us improve!☺️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment