Here is what I need to do: For example we have paragraph with some text and also img inserted I need to delete only the text without the IMG, but I dont know how to set that kind of condition.
Here's how you could do that in jQuery if you got some kind of identifier:
$('.container p').html($('.container p img'));
http://jsfiddle.net/8xbEp/ - a fiddle example
But maybe it would be better if you just set the image to be non-editable within tinyMCE, depending on your goals.
EDIT
This is an fiddle showing how to use non-editable content inside a contenteditable field (such as tinyMCE)
http://jsfiddle.net/uUKPA/35/
You need to wrap the contenteditable="false" inside another element with contenteditable="false" to be sure it's not removable in all browsers, such as IE.
<div contenteditable="false"><img src="img.gif" contentedtitable="false"/></div>
Related
I have an HTML where inline element span which hold block element example div. I have pasted below HTML source in the source view of TinyMCE and press Ok
<span>plain text<div>test div</div></span>
Further, I have click on the source view and HTML it changes to the below HTML where span automatically gets closed and new span added to the HTML,
<p><span><span>plain text</span></span></p>
<div>test div</div>
<p></p>
I know, we can't have block element inside the inline element(i.e. HTML global rule), but I am not in position to make changes in the current system.
Update: I have tried to solution mention here but not worked well: https://stackoverflow.com/a/14603631/4420468
There is a config option to control this behavior.
valid_children
The valid_children enables you to control what child elements can exists within specified parent elements.
see docs for further information
Hello I'm getting crazy around a dummy problem: how to remove paragraph tags < p > that RTE (in Typo3 6.1.7) adds oafter saving some text contents. I wish to add some images here to better explain this funny thing but I can't since I've not (yet) enough reputation.
BTW I put the images on an external site:
http://s16.postimg.org/uqbu40fut/rte_ptags_1.jpg
http://s16.postimg.org/7q56roi11/rte_ptags_3.jpg
The first image is a text entered in RTE; the second image (not shown here for the same reputation matter) is the same text shown in the "<>" raw view; the last image is what I see in raw view AFTER saving the content element.
I think that I must do something in the template or in the Typoscritp settings to remove these < p > useless tags... But what ??
Those <p> tags are enabled by default because in most cases you want your Text wrapped in propper HTML markup. However, typing your question into google, gets me to this two lines of Typoscript, wich I just tested on a 6.1.7 and which seem to do the job:
tt_content.stdWrap.dataWrap >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines >
// Remove Class Of <p class="bodytext">
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class =
// Remove P tag
tt_content.stdWrap.innerWrap >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines >
//Remove Extra Figure Tag of Image
tt_content.image.20.renderMethod = figure
tt_content.image.20.rendering.figure
I'm working on a site in EPiServer, and whenever I create a page property with the type set to "XHTML string" (which uses the WYSIWYG content editor in Edit mode), it wraps all content in <p> tags.
Is there any way to prevent this from happening? I can't remove the paragraph margins universally through my CSS (e.g. p {margin: 0 !important;}) since I do need the margins for actual paragraphs of text. I've even tried going to the HTML source view in the editor and manually deleting the <p> tags that it generates, but it immediately adds them back in when I save!
It doesn't happen when the property type is either a long or short string, but that's not always an option since the content might contain images, dynamic controls, etc.
This is becoming a real nuisance since it's very hard to achieve the layout I need when basically every element on the page has extra margins applied to it.
As Johan is saying, they are there for a reason - see more info here. That being said, it's not impossible to remove them. It can be done in one of two ways (taken from world.episerver.com:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
myEditor.InitOptions["force_p_newlines"] = "false";
}
or
<script type="text/javascript">
tinyMCE.init({
force_p_newlines: false
});
</script>
You can add your own custom TinyMCE-config that removes P-elements or strip them out using regular expressions either when saving the page or when rendering the property/page.
I think it's a bad idea though. P-elements are what the editors generate the most and in most cases their content is also semantically correct. Better to wrap your property in a div with a class and adjust margins using CSS like you mention.
If you're using a version of EPiServer with TinyMCE editors, you can insert <br /> elements instead of <p> elements if you type shift-enter instead of enter. This should eliminate your margin problems.
More info at the link below:
http://www.tinymce.com/wiki.php/TinyMCE_FAQ#TinyMCE_produce_P_elements_on_enter.2Freturn_instead_of_BR_elements.3F
EDIT: My comment below answers his question better.
I discovered that while I can't remove the <p> tags from the source view (because it adds them back in automatically), if I replace them with <div> tags, it'll leave things alone. It does mean that I've got an extra <div> wrapping some elements that I don't really need, but at least a <div> doesn't add margins like a <p> does, so...good enough!
I need a content element that cointains apsects from the "Textpic" and the "Media" content elements.
Basically I need the whole palette of input masks of the textpic CE (headline, rte text, images) plus the media tab (swf, mp4, mov) from the media content element.
This special requirements for our project comes from the need that we can only use one content element for our specific javascript content slieder. So I can not use like a Textpic and underneath a media CE. No it really has to be just one CE which can handle the textpic + the media CE stuff.
Generally I ask you: Is there already a extension, trick, modification or a framework which I can/should be use to achive that i can "fusionate" content elements? Like an "all-in-one"-content element, a multi content element?
Ps: I do not use Templavoila. My Typo3 version is 4.5
I think this is the tutorial you're looking for:
http://castironcoding.com/resources/our-blog/sp/view/single/post/reason-6-for-choosing-typo3-custom-content-elements-and-extbase-again-part-23.html
Follow step 2 and 3.
You'll also need to add a specific rendering config in Typoscript ie: tt_content._your-ce_
But it can be copied from out of tt_content.textpic and tt_content.media. You can find the expample typoscript of before mentioned CE's in: typo3/sysext/css_styled_content/static/setup.txt. Just don't alter it there, but make a copy and alter in your own file.
As you seem to only talk about reusing already exisiting fields, you really only need to change the backend interface (big keyword: "showitem"). You'll need the database names of the fields (peek into the tt_content table of some records where you know the contents), alternatively visit the module Admin Tools / Configuration, select TCA in top dropdown menu, open tt_content and columns.
Try http://blog.chandanweb.com/typo3/adding-new-fields-to-existing-typo3-tables-at-desired-location, you'll of course have to substitue tt_content for tt_news etc.
You might also want to make a new type (the above recipe is for changing a preexisitent), but I'm sorry, I'm currently out of time for explaining that. It's not very hard, though, and the castiron link by Koopa will help you on your way.
Perhaps you can wrap the content column in another div? You can use that outer div for your content slider. Now you actually use all content elements seperately, but combine then for usage.
I have divided form in to two sections: sec1 and sec2. Each section is part of a div named as sec1Div and sec2Div. Based upon some selection one of div is hidden. But the problem is that still fields in hidden section are submitted. Please suggest a way so that all of fields in a div are not submitted on submit.
There are several ways to do that. You can hook a function to the form submit's event, or you can remove the name attributes of the fields inside the hidden div. You can also disable the fields, by setting disabled="disabled".
If you are using jQuery, you can do those examples.
To disable all fields in the hidden div, you can do something like:
function hideDiv(el) {
$('input', el).each(function(){
$(this).attr('disabled', 'disabled');
});
$(el).hide();
}
And, the appropriate show div function:
function showDiv(el) {
$('input', el).each(function(){
$(this).removeAttr('disabled');
});
$(el).show();
}
Please remind that this is just a code example. But you can take the idea from that.
The reason this is happening is because the elements are still within the form element. Hiding a div using CSS won't change this - they're still present in the DOM.
It would likely be easiest to add a hidden input field to each div that can be used to identify server side which one you should be processing. You can then simply ignore the data from the hidden form.
If you really must stop the data from being posted, it's a little messy but you could move the hidden div's contents outside of the form element so that the fields won't be submitted. If you wanted to display the div again, you'd then need to move the fields back in. Depending on how complex your CSS is, this could cause problems in some browsers, so I'd advise using my first suggestion.