Hiya,
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
You call tinyMCE with tinyMCE.init function, don't you?
So add this string to it:
forced_root_block : false,
Also you can change tiny_mce_src.js. Find
forced_root_block : 'p',
and change it to
forced_root_block : false,
P.S. Don't forger to clear the cache.
If you don't want it to wrap image tags, look in the Tinymce source for a function called "isBlock". There is a regular expression white list test that determines whether or not an element is a block element. If you need image tags to be treated as block elements then add "IMG" to the list of node names it looks for. I just had to do this myself, am still looking for negative side effects right now but it does solve the immediate problem at hand.
EDIT:
That was more or less a temporary solution, if you just need to stop the root level block wrapping of image tags, there's a function called "forceRoots" where you'll actually want to perform your image tag check. I did it by modifying this line of code:
if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8)) {
to look like this:
if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8) && nx.nodeName.toLowerCase() != "img") {
This solves the problem quite well for me.
If we're talking about a WordPress site, there's an annoying filter that will automatically wrap some elements within the content with a <p> tag called wpautop. It's actually handled by wordpress at runtime and not by TinyMCE.
Add this to the top of your template or functions.php file:
<?php remove_filter('the_content', 'wpautop'); ?>
source:
http://wordpress.org/support/topic/stop-wordpress-from-adding-p-tags-and-removing-line-break
In Drupal, one sort of "klugey" way of doing this would be to use hook_nodeapi() or the d7 equivalent(s) for displaying nodes, and using a regular expression to replace p-wrapped images occurring at the beginning of the field. You would have to inform your client that they wouldn't look right when editing, but that on display, they would appear properly.
If you're looking for a css option:
In css2 you have the :first-child selector, and in css3 there is also the :only-child selector. p:first-child img could be used with negative margins to offset margins you've declared for p elements. A downside would be that this would also impose the same negative margins on any images the client might put in a first paragraph. css3 might not be supported in all the browsers you aim to cover, but if you can use it - you could use the :only-child selector for images which are the sole children of p elements, offsetting the parent p's margins with negative margins.
If Javascript is an option, then you can use jQuery to reparent the img to be a sibling of the p. Something like this (untested)
$("p > img").each(function () {
var $this = $(this);
var $p= $this.parent();
$p.before($this);
});
Add logic to only the paragraphs/images you really need.
Ugly, yes, but a viable solution as a last resort.
Add this line:
theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp"
When you want to insert a img select div:
<div>
<img src="my_img.jpg>
</div>
No need to modify anything with css.
TinyMCE 4 wraps everything in block elements. The default wrapper is P. Click on the image and choose another wrapping element like DIV. To add DIV to the menu add this to functions.php:
function make_mce_awesome( $init ) {
$init['block_formats'] = "Paragraph=p; Heading 1=h1; Heading 3=h3; Heading 2=h2; Preformatted=pre; Media=div";
return $init;
}
add_filter('tiny_mce_before_init', __NAMESPACE__ . "\\make_mce_awesome");
There is option "valid_children" https://www.tiny.cloud/docs/configure/content-filtering/#valid_children. It controls which elements you disallow (-) or allow (+) img tag to be wrapped in.
This example is for
- not letting img tag to be child of p and h1-4
- letting img tag to be child of div and span
tinymce.init({
valid_children : '-p[img],h1[img],h2[img],h3[img],h4[img],+div[img],span[img]'
});
I fear this is not possible due to the fact that img is an inline element. Tinymce wraps everything a user enters into block elements (divs or p-tags), but img is not a block element.
Related
Is it possible to add custom formatting markup to MediaWiki?
Say, for example, I have a div style I use quite often and I'd like to make markup to apply it more quickly than using <div id="frequentlyusedstyle">Title</div> -- like surrounding the text with ##Title## instead of typing out the div id. Is that possible?
(I realize that there is already heading markup; that's just an example. Thank you in advance!)
Just create a new page named "Template:name", where 'name' is whatever you want to name it, with the following text (as per your example):
< div id="frequentlyusedstyle">{{{1|}}}< /div>
(minus the extra spaces, since I don't know how to keep html from
parsing here.)
You would then use it by adding {{template name|Title}} to an article, and it will invoke the style.
You will need to have a style defined in MediaWiki:Common.css or similar, in order to style that div, such as:
#frequentlyusedstyle {
color: red;
}
Hope that helps.
I am working with Magento which doesn't allow for classes on images in the visual editor; so I want to program it to automatically apply right margin to an image if the image has the property float:left ... and visa versa. Is this possible without using javascript?
If it's part of the style attribute, then sure: [style*='float:left']
No, there isn't a selector based on CSS properties, apart from scanning selecting on the style attribute - after all you set them with CSS.
The easiest way would be to set the margin-right property at the same place where you set the float property.
See also:
http://www.w3.org/TR/selectors/#selectors
http://dev.w3.org/csswg/selectors4/#overview
Assuming all of your styles are placed in an external stylesheet the answer's 'not without javascript'.
If, however, you're placing that specific style on the html (inline styles, that is) then what Kolink suggested does work.
Anyway, using javascript(jQuery) here's a possible solution: http://jsfiddle.net/joplomacedo/TECWM/
If you can't see the fiddle, it goes something like this:
if (el.css('float') === 'left') {
el.css({
'margin-left': '50px'
});
}
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.
Is there a way to limit a css to only apply to what is in a content area and not the entire page?
I have an ASP.NET 4.0 app. I obtained some from someone else that I don't understand (It's javascript and uses a css). By his instructions, I put it on the page to style a list (UL). All of this occurs within a content place holder. However, now some UL's on the MasterPage are also being affected by this style.
Is the content placeholder an html element - if so you can add a class or id to that and use it to limit the css styling for your ul's to only those in the "main" section. If not, you may need to wrap your content in an extra div:
e.g.
<div id="main">
<!-- content here including the ul -->
</div>
then the css to style that is:
#main ul
{
// styling here
}
As Kris says, you can use an id selector. This is "The right way" to do it.
If that won't work due to your constraints (running impenetrable mystery code), you may need another option.
Fortunately, the kludge is pretty straightforward too: put the app in an iframe and host it from a separate, blank page.
I use CMS for client and client doesn't know CSS he use WYSIWYG editor to put content in pages. Client adds Paragraphs, images, images in paragraph (left or right floated), ordered and unordered list, Tables. Problems comes when he want to add images in paragraph (left or right floated). and without adding css class it's not possible. And i don't want to add <div> in content because WYSIWYG editor can't manage div and client works in WYSIWYG mode.
How to style content of pages without using css class?
You will need your user to add a CSS class/style attribute to the image somehow - without adding something to the image to tell it to float right or left it won't float right or left.
If your question is how the client can add the class without having to manually edit the HTML I reckon the only way is to dive into the WYSIWYG editor's javascript and write something a bit like this towards the end of the image-adding process:
var alignment = prompt("Type l to align the picture to the left, and r to align the picture to the right","l").strToLower();
if(alignment == 'r')
{
//line of code to add class "right" to the image tag
} else {
//line of code to add class "left" to the image tag
}
What the code to add the classes should depend on how the WYSIWYG editor works
You can try using element selectors or ID selectors to add styles to HTML elements without referencing CSS class in them.
Element selector would add border to all images on the page:
img { border:1px; }
ID selector would do the same only to image with ID 'image1':
img #image1 { border:1px; }
Still you will need to reference the stylesheet from your page.
There are lots of different ways you can make CSS Selectors that don't require CSS classes. For example, to make a rule that applies to all img tags inside p tags, you could write this:
p img { float: left; }
But how are you hoping to determine which images need to be right-aligned and which images need to be left aligned? Does that data exist in the document in any machine readable format?
A WYSWYG should have "align" property for an image (at least those I have seen). You can then use CSS attribute selector img [align=left] { float:left; } or img [align=right] {float:right;} This wont work on IE 6,7 though, you can use JavaScript to mimic this for those browsers.