When ever I create a table in TinyMCE I get:
<table style="width: 200px; ...
How can I change this to:
<table width="200px" ...
I only ask becasue I'm passing the content on to pisa and it needs all tags to have attributes, not style values. I have set inline_styles and safeHTML both to false to little avail :(
Assuming you editor is your tinymce editor object try
$(editor.getBody()).find('table').attr('width', '200px');
Related
I'm currently suffering from TinyMCE (v=3.5.8) removing html from a customer's CMS-installation. In old versions there was cleanup:false and cleanup_on_startup but 3.4+ those are deprecated. However, I struggle to fix the behaviour. First off the code it is messing with:
Before:
<td><p align="center">
<strong><span style="color: #336600; font-family: georgia,times new roman,times,serif; font-size: x-large;">
Text<br>Text<br>Text<br>Text
</span></strong>
</p></td>
After clicking into table cell
<td>
<strong><span style="color: #336600; font-family: georgia,times new roman,times,serif; font-size: x-large;">
Text<br>Text<br>Text<br>Text
</span></strong>
</td>
So the question is, why doesn't the following init-params stop the behaviour?
// Skin options
skin : "o2k7",
skin_variant : "silver",
// custom params from attribute tinyparams
verify_html:false,
fix_table_elements:false,
schema:"html4",
valid_children: "+body[style],+td[p],+tr[p],+th[p],+tbody[p],+table[p]"
From my understanding, it is the process of validating children rules that removes my Paragraph-Tag. I was also using valid_elements with the full xhtml ruleset mentioned here http://www.tinymce.com/wiki.php/Configuration3x:valid_elements
Anybody got a clue what is going on here? I would be thankfull for any hints.
Set the below option so that it doesn't check your HTML for errors.
verify_html : false
How can I get colspan like feature in a form:textarea in spring form tag?
This is my current code:
<td><html:textarea rows="5" cols="60" path="comment" /></td>
There are total 5 columns in the table. I would like to have the label in the first column and textarea in the remaining 4 colums. How can I achieve this?
I think you don't need a "colspan-like" solution but colspan itself. Note that what you want to span is a table cell, not the textarea. Therefore, you must use the attribute on the enclosing td element.
Text areas in HTML have their own layout of rows and columns but it's completely unrelated to HTML tables. A colspan attribute on a textarea simply doesn't make sense.
Here's a piece of HTML code that does the trick.
<table>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
<tr>
<td>label</td>
<td colspan="2"><textarea cols="60" rows="3"></textarea></td>
</tr>
</table>
Here's a working example on JSFiddle, styled with CSS to make the structure more visible.
I try to map the following html (it´s a small fce)..
<div>
<div data-hero="1">
<h1>
<!-- Headline -->
</h1>
<p>
<!-- Small Text -->
</p>
<p>
<a>
<span><!-- Button Text --></span>
</a>
</p>
</div>
</div>
Mapping is ok... But when i map the <span> i get a No content found div[1] div[1] p[2] a[1] span[1] error. The <a>-Tag is mapped outter so it should work..
What I try to achieve: Set a Text that is displayed in the <a>-tag, instead of the link target itself.
It´s a TYPO3 4.7 using the latest TemplaVoilà.
Why is that? Thanks in advance!
Edit
#biesior suggested this is not possible - so no i wrap a <span> into the <a>-tag via Typoscript.
Is there a chance to display a certain fields content in this <span> - speak: replacing the linktext, so that i can have a Click here for more ... instead of pageXY?
Btw: I use a linkfield and not the Rich-Text-Editor for setting the link.
You can not map any element nested in previously mapped element.
The fastest solution is mapping the A tag, and wrapping inserted text with <span>|</span> with TypoScript.
I'm using a javascript tooltip provided by jqueryTOOLS to give tool tips within a form.
For some form elements that do not require a tool tip I want to leave the title string blank, however if I do this then it causes disruption in the subsequent elements of the form - almost as if it is treating them as a tool tip: on mouseover an element with no title string it moves the following element's position to hover next to the field, then when no longer focused it disappears permanently.
My tooltip code:
$(function() {
$("#myform :input").tooltip({
position: "center right",
offset: [-2, 10],
effect: "fade",
opacity: 0.7
});
});
As you have probably guessed this tool tip is based on the 'title' attribute of a field.
After having included
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
in the header.
Hopefully my description of events made sense!
Thanks in advance for any help
I fixed a problem giving me the same error, but in a different context:
I had a table with two columns, both colums containing tooltips (a DIV in the corresponding TD).
<table>
<tbody>
<tr>
<td><div class="tooltip"></div></td>
<td><div class="tooltip"></div></td>
</tr>
</tbody>
</table>
When opening the tooltip in the first column, the height and width of the second column TD change (as if that TD was the tooltip).
Adding an extra empty DIV element after the tooltip DIV in the TD of the first column solved the problem.
<table>
<tbody>
<tr>
<td>
<div class="tooltip"></div>
<div></div> <!-- extra empty div -->
</td>
<td><div class="tooltip"></div></td>
</tr>
</tbody>
</table>
I figured it out:
The trigger element was defined to all inputs, so it was using the next as a tooltip in the lack of a title element.
Just a bug on the party of jqueryTOOLS but an easy solution:
replace
$("#myform :input")
with
$("#myform :input[title]")
Hope this helps someone else
Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" />
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
How about this: (untested)
$('.blog-post-content img').filter(function(){
return !$(this).parents('div').hasClass('wp-caption');
}).css('border', '2px solid green');
try:
$('.blog-post-content img').parent(':not("div.wp-caption")')
Not if what Matti says abotu the a element in the hierarchy then the above wont work.
I know this question was asked a long time ago, but I would like to suggest the following:
$('.blog-post-content img').closest('div:not(".wp-caption")')
Untested, but I think that should work, and is shorter than the answer above that works. Using closest means the a is ignored.