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
Related
I'm trying to find a solution to avoid CKEditor, but also the older FCKeditor strips out any
<i> tag from previously inserted content to the db.
Case:
I insert html content to the db, some content contain the <i> elements.
I do this with the CKEditor.
Everything works perfect and the content shows up on the webpage.
But when i want to edit the previously inserted content, the <i> elements are missing.
In my specific case i use:
<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>
Of course if i disable the editor, the content shows up just fine in the textarea.
When the protectedSource solution is used, i tags are no longer stripped, but img tags stop showing up in the WYSIWIG mode of CKEditor (I'm using 4.3.1). The solution that worked better for me is to disable removing empty i tags using CKEDITOR.dtd.$removeEmpty
For example, I added the following to the config.js
// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;
Note: This should be placed outside the CKEDITOR.editorConfig = function( config ) function.
I found the solution for this specific problem i ran into with the <i> tag
The original answer i got from drupal forum
The fix or tweak (you name it) for it is to set the following into the ckeditors config.js:
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);
Thanks to Spasticdonkey for pointing me to the link.
Here is what works for me
add the 3 lines of code below in the same order in the drupal ckeditor profile setting
admin/config/content/ckeditor/edit/Full
ADVANCED OPTIONS >> Custom JavaScript configuration
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
First line is pretty much turning off the advanced filtering
Second line is allowing ALL class (), any style {} and any attribute [*] for the p,div, li and ul.
The last line is for the empty tag...this line works with images...I have found that if you use
config.protectedSource.push(/]*></i>/g);
it strips out the tag while editing.
for 4.3 version ckeditor
in config.js (after config section) paste
CKEDITOR.dtd.$removeEmpty['b'] = false;
and write widget with code
CKEDITOR.plugins.add( 'bwcaret', {
requires: ['widget'/*, 'richcombo'*/],
icons: 'bwcaret',
init: function( editor ) {
editor.widgets.add( 'bwcaret', {
button: 'Create a caret',
template: '<b class="caret"></b>',
allowedContent: 'b(!caret)',
requiredContent: 'b(!caret)',
upcast: function( element ) {
return element.name == 'b' && element.hasClass( 'caret' );
},
});
}
});
There are two possible problems:
Read about Advanced Content Filter. CKEditor is removing elements which are not allowed, but you can extend filter's rules.
However, if the problem is that CKEditor removes empty <i> elements, then you need to find other way of using it. CKEditor is not a WYSIWYG website builder. It is a document editor, so the loaded content must have a meaning. Empty inline element does not have any meaning, therefore it is removed, because otherwise editor would not know what to do with it.
One of the possible solutions in the (near) future, will be to use Widgets system, to handle those empty elements. But for now I advice you to check the CKEDITOR.htmlDataProcessor and short guide how to use it.
i found a permanent solution for it.actually what happened ckeditor removing only blank tag.whatever the tag is, may b <i> tag or <span> tag
if you are using any icon like font-awesome,maeterlize icon etc ...
you can stop it by using below code in your config.js file
CKEDITOR.dtd.$removeEmpty.span = false;
CKEDITOR.dtd.$removeEmpty.i = false;
if you are using more blank tag then you need to add the tag name after $removeEmpty
CKEditor 4 removes emtpy tags, so here you can do trick without changing any config settings.
Replace
<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>
With
<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"> </i>
Now <i></i> tag have content i.e. so CKEditor will not remove that tag.
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>
I am using Typo3 and tt_news in my page, I have two views to display news, one is a ###TEMPLATE_LATEST### and one is ###TEMPLATE_SINGLE###. I edited my tt_news_v3_template so it displays as I want
Both have the same code in the template, but the ###NEWS_CONTENT### is having diferent behaviours, in the single display, the content is displayed good, with all his <p> tags generated in the editor, but the latest new view is having a problem, it deletes all the <p> tags, so my text is not being correctly formated
Somabody have an idea about how to solve it?
Use the below typoscript:
plugin.tt_news.general_stdWrap.parseFunc < lib.parseFunc_RTE
add following lines in template script of root
In Constants :
content.RTE_compliant = 0
In Setup :
tt_content.stdWrap.dataWrap >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines>
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!
actually the title is the whole question.
I just want to modify the template so that the current page title is automatically shown (i'm working with html templates so I just need the bit of typoscript to get the page title out of the database)
I hope that's possible
It is. It's pretty simple to do. I'll assume you're using TemplaVoilà, because if you're not, you should be :-D
Start off by putting some HTML in your template with a dummy page title. Give it an ID attribute so it's easy to map. Like:
<h1 id="page-title">Page Title Here</h1>
Next, go into TemplaVoilà and map that <h1> element to the content type "TypoScript Object Path". When it prompts you for the object path, you can put in anything you want -- convention is that dynamic content is added in the "lib" namespace, so let's call it lib.pagetitle. When it asks you if you want to map this to "INNER" or "OUTER", choose "INNER" -- that will mean you're just mapping the space BETWEEN the <h1>...</h1> tags. ("OUTER" means you're replacing the whole element, including the tags, which we don't want here because we want this to stay an H1.) Save your template mapping.
Now go into your site's TypoScript template. Here you're going to insert the logic that fills in that space we just mapped with actual content. To insert the page title is a matter of a couple of lines of TypoScript:
lib.pagetitle = TEXT
lib.pagetitle.data = page : title
What this says is "take the space in the template that I mapped to lib.pagetitle. Create a content object in that space of type TEXT. Then fill that content object with the title of the page."
Save your TypoScript template. Now you're done!
This probably sounds complicated at first glance, and it is, but the nice thing about this system is that it's amazingly flexible. Inserting text dynamically is just the beginning. The TypoScript Reference (a.k.a. the "TSRef") has all the details -- look up "getText" to get a flavor, that's the function that makes the "page : title" call in your TypoScript template drop in the page title.
TSRef is your friend. I keep a printed copy of it at my desk -- if you want to make TYPO3 sing, it is your songbook.
I prefer the vhs solution:
{v:page.info(field:'title')}
https://fluidtypo3.org/viewhelpers/vhs/master/Page/InfoViewHelper.html
lib.pagetitle = RECORDS
lib.pagetitle {
source.data = page:uid
tables = pages
conf.pages = TEXT
conf.pages.field = nav_title
}
To get current page title:
lib.pagetitle = TEXT
lib.pagetitle.field=title
For meta data :
Its very important to place meta after header tag when we are gone through mobile compatible website
In order to prevent quirks mode in IE9 I need to add this lines at the very top of every HTML page:
You can write the whole header by yourself, by adding disableAllHeaderCode = 1 to your typoscript or you can hack it by adding your meta tag directly to the head tag:
page.headTag = <head><meta http-equiv="X-UA-Compatible" content="IE=edge" />
Place this at your typoscript
meta.X-UA-Compatible = IE=edge,chrome=1
httpEquivalent: (Since TYPO3 4.7) If set to 1, the http-equiv attribute is used in the meta tag instead of the “name” attribute. Default: 0.
For more information about TYPO3 stuff you may visit my blog
https://jainishsenjaliya.wordpress.com/2013/10/10/put-meta-tag-on-top-of-header-section-in-typo3/
If you want to use this in a fluid page template, you can also simple use:
{data.title}
to access the page title.
You can current page title by following typoscript:
lib.pagetitle = TEXT
lib.pagetitle.data = page : title
and then use this object to your page using typoscriptObjectPath like following way:
<f:cObject typoscriptObjectPath="lib.pagetitle"/>
If you want to use a fluid only solution, install the VHS extension and you can output the page title without using any TypoScript at all like this:
Tag Example:
<v:page.header.title title="NULL" whitespaceString="' '" setIndexedDocTitle="1">
<!-- tag content - may be ignored! -->
</v:page.header.title>
Inline Example:
{v:page.header.title(title: 'NULL', whitespaceString: '' '', setIndexedDocTitle: 1)}
lib.page_title = CONTENT
lib.page_title {
table = pages
select {
where = uid = 2
}
renderObj = COA
renderObj {
10 = TEXT
10 {
field = title
wrap = <h1 class="page_title">|</h1>
}
20 = TEXT
20 {
field = subtitle
stdWrap.required = 1
stdWrap.wrap = <h5>|</h5>
}
}
}
call the lib.page_title where want to render typoscript with this lines
<f:cObject typoscriptObjectPath='lib.page_title' />
I hope this helps !!!
The question is quite old but I still want to add something I never read here.
TYPO3 offers many things concerning the header, and it's right that it's also possible to render it completely individual. Nevertheless all the nice options of TYPO3 are more or less disabled by the individual solution.
So first the direct answer on the question:
The default page title can be overridden like this
config.pageTitle.stdWrap.override.cObject < lib.pagetitle
If several page types are defined and the title shall be set individually for each type, the configuration can be noted inside the page-definitions:
page = PAGE
page {
typeNum = 0
config.pageTitle.stdWrap.override.cObject < lib.pagetitle_1
...
}
anotherPage = PAGE
anotherPage {
typeNum = 1
config.pageTitle.stdWrap.override.cObject < lib.pagetitle_2
...
}
Below still a lib.pagetitle which makes a little bit more than only using title or subtitle - it uses news-title if the extension is used on a page:
lib.pagetitle = COA
lib.pagetitle {
10 = TEXT
10 {
// subtitle: used as field for title tag
value.field = subtitle // title
if.isFalse.data = GP:tx_news_pi1|news
}
20 = RECORDS
20 {
if.isTrue.data = GP:tx_news_pi1|news
dontCheckPid = 1
tables = tx_news_domain_model_news
source.data = GP:tx_news_pi1|news
source.intval = 1
conf.tx_news_domain_model_news = TEXT
conf.tx_news_domain_model_news {
field = title
htmlSpecialChars = 1
}
}
}
Now still some background why I think some individual header might not be the best solution:
TYPO3 usually adds several details to the header, that are useful and it's not required to combine those things individually new.
Scripts and stylesheets are organized and can be even by TypoScript compressed and merged. If some syntax is followed it even takes care that a library like jquery is only included once.
TYPO3 has many functions in TypoScript where everything can be defined related to the header and also it can be decided if scripts shall be perhaps never be included at all in the header but instead in the bottom of the page-source.
Metatags can be defined (and overridden by extensions or sub-templates)
Implementing this whole logic manually again in an own template in my opinion is not useful and I think headers should be only disabled for special page-types like AJAX or dynamic PDF-files. This is the primary reason that I consider that option as useful.
Her still the current link for the most recent documentation about the config-options in TypoScript (anchor pagetitle):
https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Config/Index.html#pagetitle