JS newbie needs some help - custom containers and so on

[lamy]

Hey there!

A couple of days ago I fell in love with WYM-editor. However, it would be great to have pre-written elements you can insert. For instance, one image with text floating around it. And another element that has 3 images next to each other and so on. But how could I do that?

I would have to add elements to one of the containers. No problem so far as I can use classesItems to do that.

Now, I have got some new Elements in my list. But how can I trigger an action when someone clicks on it? I don't see a way to easily add a class to that element in the list so that I can just access it with $(".listItem1").click().

Next thing is that I would like to trigger an event when someone clicks on an image, for instance. How could I do that?

Thank you in advance! And keep up the good work!

Cheers, lamy.

[mr_lundis]

However, it would be great to have pre-written elements you can insert. For instance, one image with text floating around it. And another element that has 3 images next to each other and so on. But how could I do that?

To insert the html snippet in to the editor you will (at least for now) do so by manually manipulating the content of the iframe. You can access it using the _doc property of your current WYM instance.

Now, I have got some new Elements in my list. But how can I trigger an action when someone clicks on it? I don't see a way to easily add a class to that element in the list so that I can just access it with $(".listItem1").click().

Next thing is that I would like to trigger an event when someone clicks on an image, for instance. How could I do that?

It's the same thing here, you will need to apply this event listeners directly to the iframe document.

Hope this helps, and thanks!

[lamy]

Hey! Thanks for your reply!

But what is the _doc property? How can I work with it? Can't find anything in the documentation about it.

Cheers,
lamy

[mr_lundis]

The _doc property is an internal shorthand used in WYMeditor, so you won't find it in the documentation. I'd recommend you to install an use Firebug, if you haven't done so already. It's a great way to explore the WYMeditor source, and to do debugging when needed.

Anyhow, you can access the _doc property from the outside by typing:

Code: Select all

$.wymeditors(<insert the id of your editor instance>)._doc

An example:

Code: Select all

var myDoc = $.wymeditors(0)._doc;

This will get a reference to the _doc property of the first WYMeditor instance.


And one more thing, you might also want to check out this thread as well.

Hope this helps! Cheers.

[lamy]

This helped indeed - thanks a lot
Once you've figured out how it works it's actually quite easy

Now, next problem: I would like to fire an event when someone clicks on an image within the wymeditor's iFrame: A popup is supposed to show up and the User should be able to choose another image as a replacement - I think I know how to do the popup stuff, but how do I catch the event?

should be something like
$("wym._box img").click();
But it ain't working, of course

Can you help me again?

[mr_lundis]

Hi!

You'll have to do it like this:

Code: Select all

jQuery(wym._doc.body).find('img').click(function () {
    [You callback here]
});

This is because the editor content is contained inside an iframe, as it's necessary for the editor to work in all browsers.

Over and out!

[lamy]

Thanks, but that doesn't work for me...

And I am afraid my Javascript Knowledge is far from the level it takes to determine the error

I also seem to get random error messages, at every 4th or 5th reload. The site is http://inaustralia.de/fcms/admin.php?site=entry

username / password: operator

I am pretty shure it's just a minor matter but I simply can't find it :X

[mr_lundis]

I'm sorry, but I can't access the test page even with the credentials you provided. Do you think that you cold post the error message you get alternately send me some new credentials in an PM or something.

[lamy]

Hey, That's because there were some js errors, which are fixed by now. You should be able to access the test page now .

I got rid of some of the WYM errors occurring with the wym.html() function simply by putting the code into the postInit-function.
However the following error keeps occurring every now and then; I can not determine on which occasions it does - it seems to be totally random:

[Break on this error] $(wym._doc.body).find('img').click(function () {
ajax.design.js (Linie 82)

The function around that line is

$(wym._doc.body).find('img').click(function () {
alert("bla");
});

[mr_lundis]

Ohh, one thing that I forgot to mention is that the wym variable is supposed to be a reference to you current wym instance, otherwise the code won't work.

[lamy]

Didn't I reference it by typing

Code: Select all

var wym = jQuery.wymeditors(0);


?

[mr_lundis]

Correct - I've haven't had the time to check you site.

[lamy]

no worries mate

Take your time

[mr_lundis]

I've done some thinking, and here's some new code:

Code: Select all

jQuery(wym._doc.body).click(function (e) {
    if ($(e.target).is('img')) {
        // Your code here
    }
});

This is basically the same thing as before, except that here we're using event delegation. By doing so we avoid having to (re)bind the events on images added after editor initialization (i.e. images added by the user).

And that random error you get comes up because the editor still hasn't loaded completely. Why this even happens I'll have to look in to.

Cheers!

[lamy]

Wow, this works like a charm!

But now I feel really stupid - how can I get the element's ID from within the parent's frame?
I know that this ain't a WYM-Editor related question, but you can probably help me anyway (again), so I have to ask.
I want to pass it on to a function that eventually replaces the image:

replace_image();

So, theoretically, the Element is $(e.target). But it does not return anything.