How to insert an image _without_ being wrapped in a <p>?

[tilzinger]

I'm adding a custom image browser, and everything is working great, but when the image is inserted back into the editor, it's always wrapped with a <p> tag. Anyone know how to disable this?

[mr_lundis]

You can append or prepend it to the body or insert it before or after the element which the cursor/caret's in - the currently "selected" element:

Code: Select all

var wym = $.wymeditors(0);

// After the selected element
var elem = wym.selected();
$('<img>', wym._doc).insertAfter(elem);

// or appending to the body
$('<img>', wym._doc).appendTo(wym._doc.body);

Cheers!

[tilzinger]

Thanks. It works, but as soon as I hit Enter to go to the next line, thus creating a new <p>, it wraps the image in a <p> automatically. Anyway to avoid this?

[christracy123]

When adding an image to the page from the file browser it automatically gets wrapped in "<p>" tags. I think you cant avoid it

[mr_lundis]

Thanks. It works, but as soon as I hit Enter to go to the next line, thus creating a new <p>, it wraps the image in a <p> automatically. Anyway to avoid this?

I'll need to look into this, I don't have any obvious solution...

[tilzinger]

Is there part of the code in which this auto wrapping of <p> tags happens? I've been through the source, but I couldn't find what was causing this. If you can point me in the right direction, I can possible figure it out.

[mr_lundis]

Tilzinger, take a look at the keydown/-up handler in each of the different browser classes. It's the wym._exec(WYMeditor.FORMAT_BLOCK, WYMeditor.P)-part that wraps everything up in paragraphs.

Cheers!