GWT Label widgets iterprets everything as text, not as html tags - that's good, but I would like it to interpret \n as a <br /> how do i do that.
I would make subclass, but I cant find what to override to achieve this behaviour
(I could use HTML widget, but it would interpret all tags - and all I need is an line brak)
Use an HTML widget and set its value using a SafeHtml constructed with SafeHtmlBuilder.appendEscapedLines:
HTML label = new HTML(new SafeHtmlBuilder().appendEscapedLines("foo<bar\nbaz>quux").toSafeHtml());
(alternatively, you can split("\n", -1) your text, call SafeHtml.htmlEscape on each part and join them back with a <br>, that's what appendEscapedLines does)
Another option is to use CSS, which may be sufficient in some cases where this problem emerges.
Add the CSS attribute white-space: pre or pre-wrap in the area where you display the text. It will ensure that line breaks are respected when rendering the document.
This approach has the potential to reduce some complexity, e.g. the processing of input where \n is replaced with <br/>.
You can use com.google.gwt.user.client.ui.HTML class to achieve this or simply write,
Label label = new HTML("// html code you wnat to write");
The problem to display multi-line text with HTML in XML files is that we are not allowed to use character < in the content. For example the below code cannot be compiled:
<g:HTML HTML="Line 1<br />Line2<br />Line 3" />
In my case, I declare that text as a i18n string then use in html
<ui:with field='ln' type='com.mycompany.i18n.LocalizableStrings'/>
<g:HTML HTML="{ln.EXPLAINATION}" />
Related
I have the following variable: "hello↵↵world". (the value is coming from a textarea)
The problem is when I ask Meteor to display it with {{content}}, everything appears on the same line and the line break are not taken into account.
{{content}}
# renders
hello world
# should render
hello
world
If you're using bootstrap using the <pre> tag will come with some style that you probably don't want... If you want to avoid that you can solve this with some simple CSS:
.pre {
white-space: pre;
}
and then just wrap your content with that class:
<span class="pre">{{content}}</span>
<pre> worked fine for me until I had long lines of text. By default it disables line wrapping and long lines break the page layout or are cut off.
You could probably get around it with white-space: pre-wrap; but what I ended up doing was create a Spacebars-Helper that escapes the text first and then replaces all breaks with <br/>
UI.registerHelper('breaklines', function(text, options) {
text = s.escapeHTML(text);
text = text.replace(/(\r\n|\n|\r)/gm, '<br/>');
return new Spacebars.SafeString(text);
});
I would then use the helper in my templates in the following way:
{{breaklines title}}
escapeHTML is part of Underscore.string, a collection of string manipulation extensions that you can pull in with meteor add underscorestring:underscore.string, but any other way of escaping html should work fine as well.
Wrap with
<pre>
Any
amount of
formatting.
</pre>
One way is to create a handlebar helper:
Handlebars.registerHelper 'breaklines', (text) ->
text = text.replace /(\r\n|\n|\r)/gm, '<br>'
return text
and then to do so: (do not forget the three brackets!)
{{{breaklines content}}}
just use <br> it is enough no more troubles.
In my mark-up I want to add a space ( ) between elements without always having to use CSS to do so. If I put in my markup, GWT throws errors. Is there a way around it?
For example:
<g:Label>One </g:Label><g:Label>Two</g:Label>
Should show:
One Two
And not:
OneTwo
As documented here, you just have to add this to the top of your XML file and it will work!
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
Note that the GWT compiler won't actually visit this URL to fetch the file, because a copy of it is baked into the compiler. However, your IDE may fetch it.
Rather than use a Label, which to me shouldn't allow character entities at all, I use an HTML widget. In order to set the content, though, I find I have to do it as the HTML attribute, not the body content (note that the uppercase HTML is important here, since the set method is setHTML, not setHtml)
<g:HTML HTML="One " />
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'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 would like to break a long line of text assigned to the standard Label widget in GWT.
I was experimenting with inline <br /> elements but with no success.
Something like this:
label = "My very very very long<br />long long text"
You need to use the HTML widget, which extends the standard Label widget, and adds support for interpreting HTML tags.
See the JavaDoc.
I would use CSS to style the label to fit a given with and drop the <br/> all together.