How to add multiple spaces within the ASP.NET MVC RTE content?
Problem
RTE value set from code behind with multiple spaces are not visibly shown in browser.
Reason
Within the HTML, we cannot change the output by adding extra spaces in HTML code. Since the browser will remove extra spaces when the page is displayed and any number of spaces will count as only one space. Refer this link for in detailed description.
Solution
On setting RTE value from code behind, which has multiple spaces can be handled in two ways.
- Set the string value with multiple spaces in code behind and replace the white-spaces with in client side create event. Refer the following code block,
public ActionResult RichTextEditorFeatures()
{
var model = new MyClass { RTEValue = "This is test for RTE Sample with multi spaces" };
return View(model);
}
public class MyClass
{
public string RTEValue { get; set; }
}
@{Html.EJ().RTE("rteSample").Width("100%").Locale("en-US").ContentTemplate(@<p>
</p>).ShowFooter(true).ClientSideEvents(ce => ce.Create("onCreate")).EnableXHTML(true).Value(Model.RTEValue).Render();}
function onCreate(args) {
$("#rteSample").ejRTE({ value: this._getDocument().body.textContent.replace(/ /g, " ")});
}
- Set the string value with multiple spaces in code behind and using CSS style white-space to preserve the spaces. In the client side create event, get the iframe document body in RTE and set the CSS white-space with any of the following values based on your requirement to sustain spacing in between RTE content
Value | Description |
pre | Whitespace is preserved by the browser. Text will only wrap on line breaks. |
pre-line | Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks |
pre-wrap | Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks |
public ActionResult RichTextEditorFeatures()
{
var model = new MyClass { RTEValue = "This is test for RTE Sample with multi spaces" };
return View(model);
}
public class MyClass
{
public string RTEValue { get; set; }
}
@{Html.EJ().RTE("rteSample").Width("100%").Locale("en-US").ContentTemplate(@<p>
</p>).ShowFooter(true).ClientSideEvents(ce => ce.Create("onCreate")).EnableXHTML(true).Value(Model.RTEValue).Render();}
function onCreate(args) {
$(this.getDocument().body).css({ "white-space": "pre-wrap" });
}
Figure 1: RTE Value set with multiple spaces
