Forum closed. New forum available at http://community.wymeditor.org/

JS newbie needs some help - custom containers and so on

Support forum for WYMeditor.

JS newbie needs some help - custom containers and so on

Postby lamy on Wed Aug 27, 2008 2:44 pm

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.
lamy
 
Posts: 9
Joined: Wed Aug 27, 2008 2:34 pm

Re: JS newbie needs some help - custom containers and so on

Postby mr_lundis on Sun Aug 31, 2008 7:04 pm

lamy wrote: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.


lamy wrote: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! :wink:
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: JS newbie needs some help - custom containers and so on

Postby lamy on Thu Sep 04, 2008 4:07 pm

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 :)
lamy
 
Posts: 9
Joined: Wed Aug 27, 2008 2:34 pm

Re: JS newbie needs some help - custom containers and so on

Postby mr_lundis on Thu Sep 04, 2008 5:13 pm

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.
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: JS newbie needs some help - custom containers and so on

Postby lamy on Sun Oct 12, 2008 11:21 am

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 :D

Can you help me again?
lamy
 
Posts: 9
Joined: Wed Aug 27, 2008 2:34 pm

Re: JS newbie needs some help - custom containers and so on

Postby mr_lundis on Sun Oct 12, 2008 11:32 am

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! ;)
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: JS newbie needs some help - custom containers and so on

Postby lamy on Sun Oct 12, 2008 1:28 pm

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
lamy
 
Posts: 9
Joined: Wed Aug 27, 2008 2:34 pm

Re: JS newbie needs some help - custom containers and so on

Postby mr_lundis on Sun Oct 12, 2008 1:45 pm

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.
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: JS newbie needs some help - custom containers and so on

Postby lamy on Sun Oct 12, 2008 2:09 pm

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");
});
lamy
 
Posts: 9
Joined: Wed Aug 27, 2008 2:34 pm

Re: JS newbie needs some help - custom containers and so on

Postby mr_lundis on Sun Oct 12, 2008 2:19 pm

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.
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: JS newbie needs some help - custom containers and so on

Postby lamy on Sun Oct 12, 2008 2:21 pm

Didn't I reference it by typing
Code: Select all
var wym = jQuery.wymeditors(0);

?
lamy
 
Posts: 9
Joined: Wed Aug 27, 2008 2:34 pm

Re: JS newbie needs some help - custom containers and so on

Postby mr_lundis on Sun Oct 12, 2008 2:30 pm

Correct - I've haven't had the time to check you site.
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: JS newbie needs some help - custom containers and so on

Postby lamy on Sun Oct 12, 2008 2:34 pm

no worries mate :D

Take your time ;)
lamy
 
Posts: 9
Joined: Wed Aug 27, 2008 2:34 pm

Re: JS newbie needs some help - custom containers and so on

Postby mr_lundis on Sun Oct 12, 2008 3:21 pm

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!
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: JS newbie needs some help - custom containers and so on

Postby lamy on Sun Oct 12, 2008 4:23 pm

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.
lamy
 
Posts: 9
Joined: Wed Aug 27, 2008 2:34 pm

Next

Return to Support

Who is online

Users browsing this forum: No registered users and 1 guest