Accessing CKEditor Dialog HTML Elements

Question

I'm having a tough time figuring out what I must do to access certain UI Elements in the CKEditor in a plugin I am modifying.

Essentially I am adding internal links to their link dialog where links I split up between sections and publications. When a user picks a section from a select drop down the publications from that section are populated in a different drop down.

The following code is being modified from the link.js file in the plugin folder. I cut out all the unnecessary bits and left out what I thought was relevant. As you can see in the code below I am defining a select dropdown with the id of 'section' followed by the 'item' dropdown. How do I access the 'item' dropdown, to populate it, in the onChange function of the section dropdown?

I have my ajax code all figured out and working if I hardcode the IDs that end up getting populated in the ID tag on runtime but this changes from editor to editor so I can't rely on hardcoded values.

{
 type :  'vbox',
 id : 'internalOptions',
 children :
 [
  {
   id : 'section',
   type : 'select',
   items :
   [
   ],
   setup : function( data )
   {
    //populate sections here
   },
   onChange : function (data)
   {
    //populate items here
   },
  },
  {
   id : 'item',
   type : 'select',
   items :
   [
   ],
   setup : function( data )
   {
   },
  }

 ]
}

EDIT: The problem I have is that the CKEditor will change every ID so they are unqiue. Though I name the dropdown "section" CKEditor calls it 176_section but it isn't always the same INT hence why I need to figure out how to grab it during the setup phase.

AlfonsoML · Accepted Answer · 2010-11-12 21:46:47Z

6

If you want to get the DOM object of an element in a CKEditor dialog you can use getElement on the CKEditor element.

And to get the CKEditor element, use getContentElement on the dialog

answered Nov 12, 2010 at 21:46

AlfonsoML

12.7k2 gold badges49 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gazillion Over a year ago

This set me on the right track so I'm giving you the correct answer. What I ended up doing was setup a global variable inside the scope of each editor that held the UI element that I grabbed with that method. I don't really like my implementation but this problem has been dragging on too long, guess sometimes you have to do with what you've got :) Thanks for the help.

bpbhat77 Over a year ago

How can we get currently focused element inside dialog ??

Andy Ford · Accepted Answer · 2011-02-03 18:23:09Z

The 'id' property is for internal reference in your javascript. It does not apply an id to the generated html element.

I've used a very hacky workaround that may or may not work in all situations, but the idea is you store a reference to the id that ckeditor automagically applies.

{
    id : 'txtCredit', /* not CSS ID attribute! */
    type : 'text',
    label : 'Credit',
    className : 'imageCredit',

    elemId : null, /* to store a reference to ckeditor's automagically generated id */

    setup : function() {

        // get the id that ckeditor generated for this element and store as an object property
        this.elemId = this.getInputElement().getAttribute('id');

        // now we can reference the element by the id we stored above. Hacky? Yeah probably
        var inputElem = document.getElementById(this.elemId);

    }
}

Erik Melkersson · Accepted Answer · 2013-04-03 10:55:23Z

1

As AlfonsoML pointed to, the getContentElement is what you are looking for.

I'm adding some more code to complete it

You must know the id of the dialog page too. (It's outside your example code) I.e. the id of the "top" element in the relevant dialog page (your field may be on another page than the first if you have several pages in the dialog).

For example if the contents of the dialog js-file are:

...
contents : [
  {
    id : 'info',
    label : 'blabla',
    elements :
      ...

Then you use "info" as the dialog name.

In the local functions you may use the code:

var dialog = this.getDialog();
var sectionElement = dialog.getContentElement( 'info', 'section' );

The getContentElement in CKEditor is handling the translation between the names the the actual id.

answered Apr 3, 2013 at 10:55

Erik Melkersson

1,01711 silver badges19 bronze badges

1 Comment

bpbhat77 Over a year ago

How can we get currently focused element inside dialog ??

Community · Accepted Answer · 2017-05-23 12:08:57Z

0

I know how you can grab #176_section using jQuery. If you only know section and not the prefix, try this selector:

Assuming the element is a select box:

$('select[id*="_section"]')

That will grab all select boxes that have an id that contains "_section".

Have a look at this: http://api.jquery.com/attribute-contains-selector/

If you aren't using jQuery, the vanilla javascript is a bit more verbose, but not too hard to grasp:

var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
    if(selects[i].id.indexOf("_section")) {
        // Your select box is here.  Do something with it.
    }
}

The latter method was modified from this answer: Getting elements by a partial id string in javascript

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Nov 11, 2010 at 18:44

Stephen

19k10 gold badges62 silver badges98 bronze badges

2 Comments

Gazillion Over a year ago

Thank you, I didn't actually know about partial id strings and it'll come in really handy in future projects :)

Raphael Schweikert Over a year ago

If you only search a suffix, use the ends-with selector ($=) instead of the contains selector. Likewise, if you’re searching for a prefix, use ^=. These should also work with document.querySelector and querySelectorAll.

simon · Accepted Answer · 2011-01-21 13:53:51Z

I also find a solution. I changed the conctructor of the element type in /_source/core/dom/element.js

    CKEDITOR.dom.element = function( element, ownerDocument )
    {
        if ( typeof element == 'string' )
        element = ( ownerDocument ? ownerDocument.$ : document ).createElement(element );
    this.real_dom_element = element;
    // Call the base constructor (we must not call CKEDITOR.dom.node).
    CKEDITOR.dom.domObject.call( this, element );
};

Now, if you get a hold on the CKEDITOR.dom.element object you can just get the domElement by accessing object.real_dom_element

In the defenition of the UI elements you can add a onLoad function, you get the object.real_dom_element and add an attribute like this:

onLoad : function()
{
   $(this.getElement().blicsm_element).attr("myID", "link_url");
}

Later you can access the field like this (example with jQuery)

$('div[myID="link_url"]').find("input");

So you have 3 steps: 1. Change the CKEDITOR.dom.element constructor so you can access the real dom element 2. Add a onLoad event to the field you want to access later on and ad a custom attribute 3. Access the element by the custum attribute you've set in the onLoad

I did it like this and it works. Maybe there are simpler solutions, but I had a stuggle finding a solution, so I'm happy I found this.

Cheers

Why are you doing through jquery element? This never have sense!

Collectives™ on Stack Overflow

Accessing CKEditor Dialog HTML Elements

5 Answers 5

2 Comments

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related