CKEditor 4
Thu, 07/29/2010 - 08:33
#1
mister
mister's picture
Joined: 27/07/2010
Posts: 6

All dialog inputs are locked / disabled

G'day,

It seems that all of the popup dialog's text inputs (& dropdowns in Safari), are locked (or disabled). They don't look disabled, and they don't have the attribute of disabled in the generated DOM - I can't even right click on them in Firefox. (sounds similar to this: viewtopic.php?f=6&t=6957&p=35839)

What my set up is:
I'm using JQuery (1.4.2) UI (1.8.2) .dialog() to launch a popup with the CKEditor in it, and I'm using the FileBrowser from FCKEditor to provide the on-the-spot uploads with Image & link functionality.

What I'm doing:
Really simple, I click on Image, link, flash, table... anything where you have to type into an input, or select a dropdown, and I can't use the fields! *sigh*

Help!
Mister

Ps: The code from the div that holds the Link popup content is here (In case that is relevant):

<div lang="en-au" aria-labelledby="cke_dialog_title_313" role="dialog" dir="ltr" class="cke_editor_page_content_dialog cke_skin_kama">
 <table role="presentation" style="position: fixed; top: 48px; left: 822.5px; z-index: 10010;" class="cke_dialog cke_browser_gecko cke_ltr cke_single_page">
  <tbody>
   <tr>
    <td role="presentation"><div role="presentation" class="cke_dialog_body">
      <div role="presentation" class="cke_dialog_title" id="cke_dialog_title_313" style="-moz-user-select: none;">Table Properties</div>
      <a role="button" title="Close" href="javascript:void(0)" class="cke_dialog_close_button" id="cke_dialog_close_button_313" style="-moz-user-select: none;"><span class="cke_label">X</span></a>
      <div role="tablist" class="cke_dialog_tabs" id="cke_dialog_tabs_313"><a role="tab" hidefocus="true" tabindex="-1" id="info_363" title="Table Properties" cke_first="" class="cke_dialog_tab cke_dialog_tab_selected" style="-moz-user-select: none;">Table Properties</a></div>
      <table role="presentation" class="cke_dialog_contents">
       <tbody>
        <tr>
         <td role="presentation" class="cke_dialog_contents" id="cke_dialog_contents_313" style="width: 310px; height: 280px;"><div style="width: 100%; height: 100%;" class="cke_dialog_ui_vbox cke_dialog_page_contents" id="362_uiElement" role="tabpanel" aria-labelledby="info_363" name="info" aria-hidden="false">
           <table cellspacing="0" border="0" align="left" style="width: 100%;" role="presentation">
            <tbody>
             <tr>
              <td class="cke_dialog_ui_vbox_child" role="presentation"><table class="cke_dialog_ui_hbox" id="353_uiElement" role="presentation">
                <tbody>
                 <tr class="cke_dialog_ui_hbox">
                  <td role="presentation" class="cke_dialog_ui_hbox_first"><div class="cke_dialog_ui_vbox" id="332_uiElement" role="presentation">
                    <table cellspacing="0" border="0" align="left" style="width: 100%;" role="presentation">
                     <tbody>
                      <tr>
                       <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><div style="width: 5em;" class="cke_dialog_ui_text" id="318_uiElement" role="presentation">
                         <label style="" for="316_textInput" id="317_label" class="cke_dialog_ui_labeled_label">Rows</label>
                         <div role="presentation" class="cke_dialog_ui_labeled_content">
                          <div role="presentation" class="cke_dialog_ui_input_text">
                           <input type="text" aria-labelledby="317_label" id="316_textInput" class="cke_dialog_ui_input_text">
                          </div>
                         </div>
                        </div></td>
                      </tr>
                      <tr>
                       <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><div style="width: 5em;" class="cke_dialog_ui_text" id="321_uiElement" role="presentation">
                         <label style="" for="319_textInput" id="320_label" class="cke_dialog_ui_labeled_label">Columns</label>
                         <div role="presentation" class="cke_dialog_ui_labeled_content">
                          <div role="presentation" class="cke_dialog_ui_input_text">
                           <input type="text" aria-labelledby="320_label" id="319_textInput" class="cke_dialog_ui_input_text">
                          </div>
                         </div>
                        </div></td>
                      </tr>
                      <tr>
                       <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><span class="cke_dialog_ui_html" id="322_uiElement">&nbsp;</span></td>
                      </tr>
                      <tr>
                       <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><div class="cke_dialog_ui_select" id="325_uiElement" role="presentation">
                         <label style="" for="323_select" id="324_label" class="cke_dialog_ui_labeled_label">Headers</label>
                         <div role="presentation" class="cke_dialog_ui_labeled_content">
                          <select aria-labelledby="324_label" class="cke_dialog_ui_input_select" id="323_select">
                           <option value=""> None</option>
                           <option value="row"> First Row</option>
                           <option value="col"> First column</option>
                           <option value="both"> Both</option>
                          </select>
                         </div>
                        </div></td>
                      </tr>
                      <tr>
                       <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><div style="width: 3em;" class="cke_dialog_ui_text" id="328_uiElement" role="presentation">
                         <label style="" for="326_textInput" id="327_label" class="cke_dialog_ui_labeled_label">Border size</label>
                         <div role="presentation" class="cke_dialog_ui_labeled_content">
                          <div role="presentation" class="cke_dialog_ui_input_text">
                           <input type="text" aria-labelledby="327_label" id="326_textInput" class="cke_dialog_ui_input_text">
                          </div>
                         </div>
                        </div></td>
                      </tr>
                      <tr>
                       <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><div class="cke_dialog_ui_select" id="331_uiElement" role="presentation">
                         <label style="" for="329_select" id="330_label" class="cke_dialog_ui_labeled_label">Alignment</label>
                         <div role="presentation" class="cke_dialog_ui_labeled_content">
                          <select aria-labelledby="330_label" class="cke_dialog_ui_input_select" id="329_select">
                           <option value=""> &lt;not set&gt;</option>
                           <option value="left"> Left</option>
                           <option value="center"> Centre</option>
                           <option value="right"> Right</option>
                          </select>
                         </div>
                        </div></td>
                      </tr>
                     </tbody>
                    </table>
                   </div></td>
                  <td role="presentation" class="cke_dialog_ui_hbox_last"><div class="cke_dialog_ui_vbox" id="352_uiElement" role="presentation">
                    <table cellspacing="0" border="0" align="left" style="width: 100%;" role="presentation">
                     <tbody>
                      <tr>
                       <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><table class="cke_dialog_ui_hbox" id="339_uiElement" role="presentation">
                         <tbody>
                          <tr class="cke_dialog_ui_hbox">
                           <td style="width: 5em;" role="presentation" class="cke_dialog_ui_hbox_first"><div style="width: 5em;" class="cke_dialog_ui_text" id="335_uiElement" role="presentation">
                             <label style="" for="333_textInput" id="334_label" class="cke_dialog_ui_labeled_label">Width</label>
                             <div role="presentation" class="cke_dialog_ui_labeled_content">
                              <div role="presentation" class="cke_dialog_ui_input_text">
                               <input type="text" aria-labelledby="334_label 338_uiElement" id="333_textInput" class="cke_dialog_ui_input_text">
                              </div>
                             </div>
                            </div></td>
                           <td role="presentation" class="cke_dialog_ui_hbox_last"><div class="cke_dialog_ui_select" id="338_uiElement" role="presentation">
                             <label style="visibility: hidden;" for="336_select" id="337_label" class="cke_dialog_ui_labeled_label">width unit</label>
                             <div role="presentation" class="cke_dialog_ui_labeled_content">
                              <select aria-labelledby="337_label" class="cke_dialog_ui_input_select" id="336_select">
                               <option value="pixels"> pixels</option>
                               <option value="percents"> percent</option>
                              </select>
                             </div>
                            </div></td>
                          </tr>
                         </tbody>
                        </table></td>
                      </tr>
                      <tr>
                       <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><table class="cke_dialog_ui_hbox" id="344_uiElement" role="presentation">
                         <tbody>
                          <tr class="cke_dialog_ui_hbox">
                           <td style="width: 5em;" role="presentation" class="cke_dialog_ui_hbox_first"><div style="width: 5em;" class="cke_dialog_ui_text" id="342_uiElement" role="presentation">
                             <label style="" for="340_textInput" id="341_label" class="cke_dialog_ui_labeled_label">Height</label>
                             <div role="presentation" class="cke_dialog_ui_labeled_content">
                              <div role="presentation" class="cke_dialog_ui_input_text">
                               <input type="text" aria-labelledby="341_label 343_uiElement" id="340_textInput" class="cke_dialog_ui_input_text">
                              </div>
                             </div>
                            </div></td>
                           <td role="presentation" class="cke_dialog_ui_hbox_last"><div class="cke_dialog_ui_html" id="343_uiElement"><br>
                             pixels</div></td>
                          </tr>
                         </tbody>
                        </table></td>
                      </tr>
                      <tr>
                       <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><span class="cke_dialog_ui_html" id="345_uiElement">&nbsp;</span></td>
                      </tr>
                      <tr>
                       <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><div style="width: 3em;" class="cke_dialog_ui_text" id="348_uiElement" role="presentation">
                         <label style="" for="346_textInput" id="347_label" class="cke_dialog_ui_labeled_label">Cell spacing</label>
                         <div role="presentation" class="cke_dialog_ui_labeled_content">
                          <div role="presentation" class="cke_dialog_ui_input_text">
                           <input type="text" aria-labelledby="347_label" id="346_textInput" class="cke_dialog_ui_input_text">
                          </div>
                         </div>
                        </div></td>
                      </tr>
                      <tr>
                       <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><div style="width: 3em;" class="cke_dialog_ui_text" id="351_uiElement" role="presentation">
                         <label style="" for="349_textInput" id="350_label" class="cke_dialog_ui_labeled_label">Cell padding</label>
                         <div role="presentation" class="cke_dialog_ui_labeled_content">
                          <div role="presentation" class="cke_dialog_ui_input_text">
                           <input type="text" aria-labelledby="350_label" id="349_textInput" class="cke_dialog_ui_input_text">
                          </div>
                         </div>
                        </div></td>
                      </tr>
                     </tbody>
                    </table>
                   </div></td>
                 </tr>
                </tbody>
               </table></td>
             </tr>
             <tr>
              <td class="cke_dialog_ui_vbox_child" role="presentation"><span class="cke_dialog_ui_html" id="354_uiElement"></span></td>
             </tr>
             <tr>
              <td class="cke_dialog_ui_vbox_child" role="presentation"><div class="cke_dialog_ui_vbox" id="361_uiElement" role="presentation">
                <table cellspacing="0" border="0" align="left" style="width: 100%;" role="presentation">
                 <tbody>
                  <tr>
                   <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><div class="cke_dialog_ui_text" id="357_uiElement" role="presentation">
                     <label style="" for="355_textInput" id="356_label" class="cke_dialog_ui_labeled_label">Caption</label>
                     <div role="presentation" class="cke_dialog_ui_labeled_content">
                      <div role="presentation" class="cke_dialog_ui_input_text">
                       <input type="text" aria-labelledby="356_label" id="355_textInput" class="cke_dialog_ui_input_text">
                      </div>
                     </div>
                    </div></td>
                  </tr>
                  <tr>
                   <td class="cke_dialog_ui_vbox_child" style="padding: 0px;" role="presentation"><div class="cke_dialog_ui_text" id="360_uiElement" role="presentation">
                     <label style="" for="358_textInput" id="359_label" class="cke_dialog_ui_labeled_label">Summary</label>
                     <div role="presentation" class="cke_dialog_ui_labeled_content">
                      <div role="presentation" class="cke_dialog_ui_input_text">
                       <input type="text" aria-labelledby="359_label" id="358_textInput" class="cke_dialog_ui_input_text">
                      </div>
                     </div>
                    </div></td>
                  </tr>
                 </tbody>
                </table>
               </div></td>
             </tr>
            </tbody>
           </table>
          </div></td>
        </tr>
       </tbody>
      </table>
      <div role="presentation" class="cke_dialog_footer" id="cke_dialog_footer_313">
       <table class="cke_dialog_ui_hbox cke_dialog_footer_buttons" id="369_uiElement" role="presentation">
        <tbody>
         <tr class="cke_dialog_ui_hbox">
          <td role="presentation" class="cke_dialog_ui_hbox_first"><a id="366_uiElement" aria-labelledby="365_label" role="button" class="cke_dialog_ui_button cke_dialog_ui_button_ok" hidefocus="true" title="OK" href="javascript:void(0)" style="-moz-user-select: none;"><span class="cke_dialog_ui_button" id="365_label">OK</span></a></td>
          <td role="presentation" class="cke_dialog_ui_hbox_last"><a id="368_uiElement" aria-labelledby="367_label" role="button" class="cke_dialog_ui_button cke_dialog_ui_button_cancel" hidefocus="true" title="Cancel" href="javascript:void(0)" style="-moz-user-select: none;"><span class="cke_dialog_ui_button" id="367_label">Cancel</span></a></td>
         </tr>
        </tbody>
       </table>
      </div>
     </div>
     <div class="cke_dialog_tl" id="cke_dialog_tl_313"></div>
     <div class="cke_dialog_tc" id="cke_dialog_tc_313" style="width: 344px;"></div>
     <div class="cke_dialog_tr" id="cke_dialog_tr_313"></div>
     <div class="cke_dialog_ml" id="cke_dialog_ml_313" style="height: 330px;"></div>
     <div class="cke_dialog_mr" id="cke_dialog_mr_313" style="height: 330px;"></div>
     <div class="cke_dialog_bl" id="cke_dialog_bl_313"></div>
     <div class="cke_dialog_bc" id="cke_dialog_bc_313" style="width: 316px;"></div>
     <div class="cke_dialog_br" id="cke_dialog_br_313"></div></td>
   </tr>
  </tbody>
 </table>
</div>
Top
Thu, 07/29/2010 - 12:22
comp615
comp615's picture
Joined: 02/07/2010
Posts: 295

Re: All dialog inputs are locked / disabled

I don't think it's a CKEditor bug, so can you give us the config info and method of calling ckeditor which you are using?
Top
Fri, 07/30/2010 - 05:30
mister
mister's picture
Joined: 27/07/2010
Posts: 6

Re: All dialog inputs are locked / disabled

Hi,

Ok, I'm calling CKE via ASP (classic), and the config.js is as follows:

CKEDITOR.editorConfig = function( config )
{
   config.language = 'en-au';
   config.uiColor = '#DEEDF7';
   config.baseHref = CKEDITOR_BASEHREF;
   config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
   config.scayt_autoStartup = false;
   config.removePlugins = 'scayt';
   config.disableNativeSpellChecker = false;
   config.disableObjectResizing = true;
   config.resize_enabled = false;
   config.resize_maxHeight = jqMaxHeight;
   config.resize_maxWidth = jqReasonableWidth;
   config.resize_minHeight = jqMaxHeight;
   config.resize_minWidth = jqReasonableWidth;

   config.toolbar_Full = [ 
      ['Source','-','Templates','-','Find','Replace'],
      ['Cut','Copy','Paste','PasteText','PasteFromWord'], 
      ['Undo','Redo','-','SelectAll','RemoveFormat','-','Maximize', 'ShowBlocks'],
      '/',
      ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
      ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','NumberedList','BulletedList'],
      ['Outdent','Indent','Blockquote','CreateDiv','PageBreak'],
      ['Link','Unlink','Anchor'],
      '/',
      ['Styles','Format','Font','FontSize'],
      ['TextColor','BGColor'],
      ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar']
   ];
   
   config.toolbar_Basic = [
      ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink']
   ];
   
   config.filebrowserUploadUrl = CKEDITOR_BASEPATH+'filemanager/connectors/asp/upload.asp?Type=File';
   config.filebrowserImageUploadUrl = CKEDITOR_BASEPATH+'filemanager/connectors/asp/upload.asp?Type=Image';
   config.filebrowserFlashUploadUrl = CKEDITOR_BASEPATH+'filemanager/connectors/asp/upload.asp?Type=Flash';
};

Top
Fri, 07/30/2010 - 09:34
comp615
comp615's picture
Joined: 02/07/2010
Posts: 295

Re: All dialog inputs are locked / disabled

Try loading the editor with the same settings without using AJAX/JQuery, that will help isolate the problem
Top
Mon, 08/02/2010 - 07:36
mister
mister's picture
Joined: 27/07/2010
Posts: 6

Re: All dialog inputs are locked / disabled

Awww man. :(

If I remove the loading via AJAX in the JQuery UI dialog (popup-y-dialog thing), it works.
If I load it via AJAX, and don't put it in the JQuery UI dialog, it works.

I'm sensing a pattern here. *sigh*

Did FckEditor have some similar issue that required any after-load process to be done in an iFrame?

I guess I'll try loading a dialog with an iFrame within it. And if that doesn't work, I'll try ... something else?
I'll post back when I find out something else.

Mister

Top
Mon, 08/02/2010 - 07:56
mister
mister's picture
Joined: 27/07/2010
Posts: 6

Re: All dialog inputs are locked / disabled

Preliminary results are in...
... And the winner is, "put it in an iFrame within the JQuery UI dialog".

In the set up I have, I have to AJAX the content in. So I now have:


  • Calling page

  • JQuery UI dialog with AJAX'd page content

  • iFrame from that page calling the page with the CKEditor on it


Top
Sun, 08/29/2010 - 16:44
mcbenny
mcbenny's picture
Joined: 29/08/2010
Posts: 2

Re: All dialog inputs are locked / disabled

Hello,

I'm experiencing exactly the same problem but I don't understand how you fixed it...

I have a page with a link that call a UI.dialog() with a content (form) loaded in ajax. The editor is initialized and works fine till I call a link dialog or image dialog or else : all the inputs and textareas are "disabled" in practice.

I use the jQuery plugin to load the editor.

What do I have to do to make it work ?

Thanks in advance.
Top
Sun, 08/29/2010 - 18:09
mcbenny
mcbenny's picture
Joined: 29/08/2010
Posts: 2

Re: All dialog inputs are locked / disabled

Well, I found someone that has fixed the problem by adding a small script. It seems that the problem is due to a conflict between zIndexes of the overlays.

Find everiything here : http://www.adamstacey.co.uk/2010/07/09/initiating-ckeditor-with-jquery-and-using-jquery-ui-dialog/comment-page-1/.

Just add the first script provided into your general script file (after loading jQuery, jQueryUI and CKEditor.js but before initializing the editor, even before the loading of the form if your in an ajax situation (as I am).

Hope this helps.
McBenny

Top
Wed, 02/25/2015 - 19:01
(Reply to #8)
ray.loveless@kl...
ray.loveless@klasresearch.com's picture
Joined: 25/02/2015
Posts: 1

your url is no longer working.

@mcbenny,

Can you paste the script you used to do the fix?  The blog url you shared is no-longer working.

THANK YOU!!!  This would make my day.

Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check