Related
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 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.
TYPO3 adds these links at the start of almost every element:
<a id="c1427"></a>
where number is, I guess, UID of the element.
How TYPO3 render this link and is it possible to disable it for a specific FCE?
It depends on your TYPO3 Version. In 4.5 it is defined via:
tt_content.stdWrap.innerWrap.cObject.default.10.value = <div id="c{field:uid}"
If you use the TS-Objectbrowser, you should find it somewhere in tt_content.stdWrap.*
Depending on the rendering you are using, you could be able to add an if statement like:
tt_content.stdWrap.innerWrap.cObject.default.10 {
# check the uid of the content element which is rendered
if.isInList.field = uid
# do not render if content element uid is 1,2 or 44
if.value = 1,2,44
}
For sure, it depends on your configuration, so you cannot copy & paste. And i did not test this code! But it should show the way to go:)
I think your problem is in tt_content.stdWrap.prepend that is different for any languages different from default language.
Try to put this typoscript in your template:
tt_content.stdWrap.prepend >
tt_content.stdWrap.wrap = <div class="content-element">|</div>
How can I add attributes to the current Insert Image dialogue box on umbraco Richtext Editor?
What I really want is to let content editor choose images and set their class, and maybe choose if this is lightbox image or not. If user choose lighbox option, then a hyper link is added with some extra attributes, like data-rel. I even want to be able to modify the image url added by the content editor, if possible.
The output should look like this
<a href="/media/2813/DSC_2615.JPG" data-rel="prettyPhoto[gal-3-col]" >
<img src="http://domain.com/imageGen.ashx?
image=%2fmedia%2f2813%2fDSC_2615.JPG&width=420" alt="DSC_2615" title="DSC_2615"
class="alignright">
</a>
I found this very useful link http://forum.umbraco.org/yaf_postst8163_TinyMCE--insert-image-dialog.aspx which solve half of my issue, but I can't figure out how to continue
Default umbraco tinymce add image interface is
<plugin loadOnFrontend="false">umbracoimg</plugin>
I was able to modify it to show additional field in the image selection interface, then render markup I want.
I edited \umbraco\plugins\tinymce3\insertImage.aspx, added my field there and some jquery logic:
<ui:PropertyPanel id="pp_desc" runat="server" Text="Description">
<input type="text" id="title" style="width: 300px"/>
</ui:PropertyPanel>
...
Then if you are adding custom attributes, you might want to add them to \config\umbracoSettings.config
<!-- what attributes that are allowed in the editor on an img tag -->
<allowedAttributes>src,alt,title,border,class,style,align,id,name,onclick,usemap</allowedAttributes>
and \config\tinyMceConfig.config
<validElements>
<![CDATA[+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|
ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],
-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],
img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel],
-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],
-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],
thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],
-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],
-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align],-h2[id|dir|class|align],
-h3[id|dir|class|align],-h4[id|dir|class|align],-h5[id|dir|class|align],-h6[id|style|dir|class|align],hr[class|style],
dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],
param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],code[*]]]>
</validElements>
Then I modified the .js that is in charge of rendering html that will be added to tinymce editor:
\umbraco_client\tinymce3\plugins\umbracoimg\js\image.js
ed.execCommand('mceInsertContent', false, '<div id="__dimps_width" class="img-with-text"><img id="__mce_tmp" /><p id="__dimps_desc">description</p></div>', { skip_undo: 1 });
ed.dom.setAttribs('__mce_tmp', args);
ed.dom.setAttrib('__mce_tmp', 'id', '');
ed.dom.setAttribs('__dimps_width', {style: 'width: ' + nl.width.value + 'px;'});
...
One important thing: everything is cached and bundled, so to make sure your changes was applied remove all files from \app_data\TEMP\ClientDependency\ and use new instance of incognito browser. You probably can disable it somewhere, but I just removed the cache.
There is no magic in Umbraco TinyMCE. Just a bunch of .aspx and .js code. Modify it to your needs.
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!