07-26-2023, 09:26 PM
I have run into this problem many times now using drupal or wordpress where my tinymce config files are a bit too cleverly abstracted.
The problem is that tinymce auto-wraps my `<img>` tags in `<p>` tags. If there is a way around this in either Wordpress or Drupal, that would be awesome.
My problem exists when I want to do something like this
<style>
img {
float: left;
}
p {
float: right;
margin-right: 20px;
width: 400px;
}
</style>
and I want my code to look like this
<img src="some_png.png" />
<p> Imagine a lot of lipsum text.</p>
but tinymce does this
<p><img src="crap_im_wrapped_in_a_paragraph.png" /></p>
<p> Imagine a lot of lipsum text.</p>
I'm trying to float an image to the left of a paragraph with a set width, without having width restraints on the image itself.
in this case the image's parent then gets a width and a float right. That is **not** what I want.
It is very possible that there is an easy clever fix for this but I still have not found one. I would prefer not hacking my config files if I don't have to.
1 caveat...
The only reason this problem exists is because I want clients to be able to easily do their own editing so **I won't just have them wrap the image in a `<div>` instead of a `<p>`. That seems to me unintuitive for my clients who are the actual users of the wysiwyg**
**Previous Solution**
I have been using a regex to remove the paragraph tags but it is always somehow problematic. I end up adding more images somewhere else then i have to keep tuning my regex to ignore them. 502 errors abound!
my question(s) is(are)
**What can I to in my CSS to make the image wrapped in the paragraph do what I want it to do?**
and if i can't
**What drupal or wordpress specific can I do to make that paragraph disappear?**
-- **Edit** --
the solution needs to be compatible with IE7+ and modern browsers. :P
Thanks!
aaron
The problem is that tinymce auto-wraps my `<img>` tags in `<p>` tags. If there is a way around this in either Wordpress or Drupal, that would be awesome.
My problem exists when I want to do something like this
<style>
img {
float: left;
}
p {
float: right;
margin-right: 20px;
width: 400px;
}
</style>
and I want my code to look like this
<img src="some_png.png" />
<p> Imagine a lot of lipsum text.</p>
but tinymce does this
<p><img src="crap_im_wrapped_in_a_paragraph.png" /></p>
<p> Imagine a lot of lipsum text.</p>
I'm trying to float an image to the left of a paragraph with a set width, without having width restraints on the image itself.
in this case the image's parent then gets a width and a float right. That is **not** what I want.
It is very possible that there is an easy clever fix for this but I still have not found one. I would prefer not hacking my config files if I don't have to.
1 caveat...
The only reason this problem exists is because I want clients to be able to easily do their own editing so **I won't just have them wrap the image in a `<div>` instead of a `<p>`. That seems to me unintuitive for my clients who are the actual users of the wysiwyg**
**Previous Solution**
I have been using a regex to remove the paragraph tags but it is always somehow problematic. I end up adding more images somewhere else then i have to keep tuning my regex to ignore them. 502 errors abound!
my question(s) is(are)
**What can I to in my CSS to make the image wrapped in the paragraph do what I want it to do?**
and if i can't
**What drupal or wordpress specific can I do to make that paragraph disappear?**
-- **Edit** --
the solution needs to be compatible with IE7+ and modern browsers. :P
Thanks!
aaron