How to update the z-index

[parallel32]

I would like to use the editor in a Twitter Bootstrap modal but I cannot because the z-index of the editor is set too low.  I've tried to manually change the 3 places in the raw Javascript file, but when I change them to a number higher than 999 the editor fails to load.  I've implemented a hack as follows where I manually set the z-index to something higher than the Twitter Bootstrap modal by binding to the editor's .ready event:

var editor = new SnapEditor.InPlace("description", {

               toolbar: {

                 items: [

                   "styleBlock", "|",

                   "p", "|",

                   "bold", "italic", "underline", "|",

                   "alignment", "|",

                   "alignLeft", "alignCentre", "alignRight", "alignJustify", "|",

                   "orderedList", "unorderedList", "indent", "outdent", "|",

                   "link", "table", "horizontalRule" 

                 ]

               }

               ,snap: false

               ,onSave: function (e) {

                  var isSuccess = true;

                  html = e.html;

                  DoSave();

                  return isSuccess || "Error";

               }

            });

         editor.on("snapeditor.ready", function (e) {

            window.setTimeout(function(){

               $('.snapeditor_toolbar_floating').css('z-index',12000);   

               $('.snapeditor_toolbar_menu').css('z-index',12001);   

               $('.snapeditor_dialog').css('z-index',12010);   

            },200);

            

         });

...but this doesn't work for .snapeditor_dialog because a dialog isn't present in the HTML until it's activated by a button.

Any ideas how I can change the z-index of the entire editor?

[parallel32]

I was able to fix my own problem with a slightly different hack:

var editor = new SnapEditor.InPlace("description", {

               path: "/assets/snapeditor",

             toolbar: {

               items: [

                  "styleBlock", "|",

                  "bold", "italic", "underline", "|",

                  "alignLeft", "alignCentre", "alignRight", "alignJustify", "|",

                  "orderedList", "unorderedList", "indent", "outdent", "|",

                  "link", "table", "horizontalRule", "|"

                ],

               }

               ,snap: false

               ,onSave: function (e) {

                  var isSuccess = true;

                  html = e.html;

                  DoSave();

                  return isSuccess || "Error";

               }

               ,onUnsavedChanges: function (e) {

                  e.api.execAction("save");

              }

            });

         editor.on("snapeditor.ready", function (e) {

            window.setTimeout(function(){

               $('.snapeditor_toolbar_component').css('z-index',12000);   

               

               $('.snapeditor_toolbar_frame a').click(function(e){

                  $('.snapeditor_toolbar_component').css('z-index',12000);

                  $('.snapeditor_dialog').css('z-index',12000);

                  

               })

            },200);

            

         });

Although, I would still like to know if there's a native way to do this.

[Wesley Wong]

Hi,

That's a good catch. We currently don't have a dynamic way of setting the z-index, although this looks like it could be very useful as shown by your scenario. Let me see if we can figure something out that would allow you to pass in a base z-index to SnapEditor through the config.

I'll update you once we have something.

Cheers,

Wesley

[Wesley Wong]

Hi,

With the newly released SnapEditor 2.0.0, you can set SnapEditor.zIndexBase before instantiating any SnapEditors. SnapEditor will then use this to set it's own z-index when needed.

SnapEditor.zIndexBase = 100; // default

Let me know if you have any questions.

Cheers,

Wesley

[parallel32]

Thanks for this.  Works like a charm.