I maybe overlooking a function. In order to render text such as <div>test</div as html inside another tag, I would need several lines of code to name the outside tag, then set .innerHtml, then return the outside tag. Is there a shorter way? There are also confusing conversions with .render with this method.
ex.
val content = span(color := "blue").render
content.innerHtml = "<div>test</test>" // html is escaped
outsideTag.innerHtml = content.outerHtml
Assuming you're using Scalatags here, you may be looking for the raw() function...
I don't know scala.js that well, but as far as I understand it, a div tag is added to a span tag.
You should only add inline tags to other inline tags. So it's not a good idea to add a div to a span.
I think imho you can write:
outsideTag.innerHtml="<div color='blue'>test</div>";
Related
I want to add inline-svgs to my h1 to h6 Tags depending on the class set in the RTE.
Example:
RTE:
<h1 class="icon--clock">Header</h1>
Output:
<h1 class="icon--clock"><svg>...</svg>Header</h1>
I've done something similar with links before, using the parseFunc Config. A method like this: https://wiki.typo3.org/External_links
Is there any way to access and split the tag and class like the link parameters through TypoScript?
I also tried using a userFunc
lib.parseFunc.userFunc = ...\MyClass->MyUserFunc
but in Params I only get the tag content, not the tag or the classes that have been set themselves.
I'm using Typo8 with the ckeditor, but I don't think that makes a difference.
Can I even do this?
How do I do this?
I know that I can alternatively add different header layouts and use the tt_content header field, because it's easier to manipulate the template there. But I'd love to know if there is a way to this in the RTE.
I think you could do it in typoscript, but that would be very complicated as you need to analyze the attributes of the Hn-tags.
A simpler method which came to mind would be: use CSS and ::before. So you can use a selector to the class to insert the matching SVG.
This also can be done with javascript but as CSS can do it it would be more efficient to use CSS.
I have a richtext component, I gave input as "foo" to richtext component, and it generated
<p>foo</p>, I'm trying to pass this generated content from JSP to JS using the following code.
<script>
var jsvariable = '<%=jspvariable%>'
</script>
the above line throws "unterminated string literal" error, as the JS variable contains
ptagstarts foo ptagends
I'm using the value in JS as I need this variable in other pages as well.
May I know how we to remove this error.
From what you wrote, seems, that you have in your jspvariable string </script>. Html parser treats it as ending of the script block, and you getting invalid script block.
You can check source of your page to be sure, that I am right.
As Thomas suggested, you can escape your content. But as long as this content is provided by user, I would use XssApi, to prevent xss attack as well.
So it would be something like:
var jsvariable = '<%=xssApi.encodeForJSString(jspvariable)%>'
Or:
var jsvariable = '<%=xssApi.filterHTML(jspvariable)%>'
In first case you will get that <script> block from richtext component into your js variable. It will be encoded, and you will not get this error, but I think you do not need it.
In second case, you, should get only text value from you component.
UPDATE 1
Also, as I wrote you in comments, It would be nice to see the way you extract content from your richtext component, because I think, there is a better way of doing this, so you will get only text without anything else.
I'm parsing some HTML, and I need to get all html in the body tag. My target string will always look something like this:
<body><div><img src="" />text etc</div></body>
However, I just need:
<div><img src="" />text etc</div>
My target string will always begin and end with those body tags. However, there is the repeated warning of not use Regex to parse HTML, but I do not have any viable solutions for that available, besides Regex at the moment.
Question: Are there any safe Regex(s) to use in this case? Or should I just forget it?
You didn't show us what your regex is, but it's not as safe as using DOM parsing if it's as simple as:
<body>(.*?)</body>
...because it's possible that </body> is contained in an attribute string or comment. If you're willing to take that risk, then you'll be fine. There's no reason you shouldn't be able to use DOM parsing and just get the text of the body, though, except it would probably be less efficient.
You could also skip the regex and just find the string indices of <body> and </body> and get the substring between them. That should be even faster.
By the way, this is not parsing the HTML; you're just extracting from the HTML
It's fine to use a RegEx in this case.
Having said that there are much easier ways to get the innerHTML of the body tag.
alert(document.body.innerHTML);
should give you exactly that with no RegEx...
or if you're using jQuery
$(body).html();
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've read about wicket:message here, but can't seem to make it do everything I'd like.
Say I have a HTML page with <wicket:message key="text"/> and a properties file containing text=Blah blah: important point, foo bar. I'm wondering how to make part of the text bold (or apply arbitrary CSS to it), to achieve output like:
Blah blah: important point, foo bar
Note that none of this is actually dynamic, so I wouldn't want to do anything in Java, if that can be avoided.
I've tried nesting tags with something like the following, but no luck.
<wicket:message key="text">
<span class="bold"><wicket:message key="text2"/></span>
</wicket:message>
text=Blah blah: ${text2}, foo bar
text2=important point
Is this even possible in Wicket without 1) injecting the formatted part from Java side or 2) just splitting the text into (in this case) three different properties?
The easiest way is to put the tags inside your localization file:
text=Blah blah: <strong>text2</strong>, foo bar
You could also use a Label and a ResourceModel to replace it later:
text=Blah blah: [b]text2[/b], foo bar
And in your model getObject(), or in your Label:
string.replace("[b]", "<strong>");
string.replace("[/b]", "</strong>");
Or, even better, try to reuse a Markdown implementation in your Label.
I've managed to do this for my own application, albeit with a rather ugly hack. I did it by exposing a customized version of WicketMessageResolver.
Here's what to try:
Wholesale copy and paste org.apache.wicket.markup.resolver.WicketMessageResolver into your own class (say com.acme.CustomWicketMessageResolver) (the hack begins!)
Inside your CustomWicketMessageResolver change
WicketTagIdentifier.registerWellKnownTagName( "message" ); to something else like WicketTagIdentifier.registerWellKnownTagName( "msg" );.
Inside of
private void renderMessage(final MarkupStream markupStream, final ComponentTag openTag, final String key, final String value), you'll find the line getResponse().write( text );.
Immediately before that line you have the opportunity to screw around with the value of "text". There, I do something like text = MyLabelUtils.replaceWikiMarkup(text) which post-processes some wiki-like markup syntax used by the content authors for my application.
For example, I use this method to take a Label using a ResourceModel pointing to the key:
propertyKey=I found the answer on [acronym SO].
and a render it as
I found the answer on <acronym title="Stack Overflow">SO</acronym>.
and that method handles i18n and all that fun stuff.
You can, of course, extend that wiki syntax (or anything similar) to be as simple or complex as you'd need.
Note that you'll have to change <wicket:message key='foo'> to <wicket:msg key='foo> in all of your markup files (or at least in ones where you want this behaviour).
I'd obviously prefer a more standard way to customize the behaviour of the built-inwicket message resolver, but if you need this functionality in a pinch, like I did, this will work for now.
If you need something more standard, you could raise the issue on the Wicket mailing list. It's pretty good.
Starting from Wicket 1.4 you can nest components within a wicket:message element. For example:
<wicket:message key="myKey">
This text will be replaced with text from the properties file.
<span wicket:id="amount">[amount]</span>.
<a wicket:id="link">
<wicket:message key="linkText"/>
</a>
</wicket:message>
Then
myKey=Your balance is ${amount}. Click ${link} to view the details.
linkText=here
and
add(new Label("amount",new Model("$5.00")));
add(new BookmarkablePageLink("link",DetailsPage.class));
Results in:
Your balance is $5.00. Click here to view the details.
So maybe, nesting <wicket:message>s without a component could work as well. Not sure.
Source: https://cwiki.apache.org/confluence/display/WICKET/Wicket%27s+XHTML+tags#Wicket%27sXHTMLtags-Elementwicket%3Amessage