Dear all, I save formatted text (bold, changed in font, style...etc) in an nvarchar(max) field, its for some Description field, on another stage, I want to be able to edit this description, so in the Editing Page, I read the original inoformation, fill it in the fields and wait for the user to change it and save, this is working for all kinds of normal text fields, and also with normal text displayed in a text area, but when I fill the text area with the styled text, it shows the HTML code and not it result, so for instance, it shows:
<span style="font-weight: bold; text-decoration: line-through;">SM</span><span style="background-color: rgb(51, 102, 255);">ART</span><br>
Instead of a what it should look like, any suggestions on how I can make the textArea (normal asp.net textbox with the mode set to multiline) display the HTML as it should look and not the code??
You can not display HTML result in TextArea/TextBox control. But to display HTML result you have many options.
As Schnalle said, best and the easy way to use an editor. Like tinyMCE or FCKEditor.
In a project I used a div to display and edit HTML content. It allows users to edit, copy, paste, make bold, make italic, .. etc. :
<div runat="server" ID="divContent" contenteditable="true">
Editable Area, set your content here...
</div>
Maybe you can combine textarea and div to do what you want.
you need a wysiwyg-editor like tinyMCE http://tinymce.moxiecode.com/
If you just want it to display the code, use < as <, and > as >.
Eg:
<textarea>
<html>
<body>
</body>
</html>
</textarea>
Related
I have this:
<asp:localize id="locPopupInfo" runat="server" meta:resourcekey="locPopupInfoRc1"
text="Select up to 8 cameras to include." enableviewstate="false"></asp:localize>
I want to make the text be italic.
I tried adding style="font-style:italic" and style="font:italic". I also tried adding a css:
.italic-text{
font-style:italic;
}
Then doing cssclass="italic-text" and class="italic-text".
None of these worked. Is there any way to do this with asp:Localize?
Localize control inherits from Literal control. It does not output any markup itself, just the content in localized manner. Here is what MSDN says about it:
Although the Label control allows you to apply a style to the displayed text, the Localize control does not.
If you want to apply the style nevertheless, here are the options:
Switch to Label or similar control
Wrap in some server-side control, say Panel, and apply styling to it
Or wrap Localize in a client side tag with style applied. If you are very specific about italic style, you can just do <i><asp:Localize ...></i>
Put your localize into a span and then apply style class onto the span
<span class="italic-text">
Your localze stuff ....
</span>
To understand localize see this
The H1 tag (for Title field) output of a view for the Dexterity type, typically looks like:
<h1 id="parent-fieldname-title" class="documentFirstHeading">
My Title
</h1>
I want to add some customized tag for the text in H1 tag, says:
<h1 id="parent-fieldname-title" class="documentFirstHeading">
<span style="text-decoration: line-through;">My</span> Title
</h1>
This will make My a strikethrough text. As already known, if I add <span ...> in the title field, they are literally displayed. Is there an easy way for such customization?
The Title field is a plain-text field, so any text is escaped when the page renders. This is by design.
If you explicitly want to allow HTML to be entered, you'll need to customize the title display for your type and add structure to the <h1> element:
<h1 tal:content="structure context/title">Title</h1>
The structure TALES keyword disables HTML escaping. This allows the editor to insert arbitrary HTML.
You may want to switch to using a RichText field instead of the default TextLine, so you can apply the automatic safe-HTML transformations on it. See the Rich text, markup and transformations chapter in the Dexterity developer manual.
Textareas are great because of some built in functionality (scrollbars). How can I format <spans> of text inside of the <textarea>?
If you need to customize your textarea, reproduce its behavior using another element (like a DIV) with the contenteditable attribute.
It's more customizable, and a more modern approach, textarea is just for plain text content, not for rich content.
<div id="fake_textarea" contenteditable></div>
The scrollbars can be reproduced with the CSS overflow property.
You can use this fake textarea in a form normally, i.e: if you have to submit its content through POST method, you could do something like(with jQuery):
<input type="hidden" id="fake_textarea_content" name="foobar">
...
$('#your_form').submit(function()
{
$('#fake_textarea_content').val($('#fake_textarea').html());
});
You Can't style the content of a text area separately, you have to use <div>s, or something similar.
Do you Want Something like this:?
http://jsfiddle.net/mekwall/XNkDx/
$('.editable').each(function(){
this.contentEditable = true;
});
This allows you to edit the content of a div, and it will still look like a textarea,
Bold will now Work.
You cannot use HTML inside TEXTAREA.
Scrolling can be applied to any element by adding overflow: auto and fixed width and/or height.
You can user html editors for web like CKEditor to be able to format the data in text area. Check this http://ckeditor.com/
Another way to submit the "fake" text area is including the following lines inside the form tag
<form onsubmit=" $('#fake_textarea_content').val($('#fake_textarea').html());">
</form>
Let's say I typed in a <textarea>:
I
Love
You
Then I save it to phpMyAdmin database. Then I use MySQL to retrieve it from database and display it onto a <div>. Now the output that show in the <div> is :
I Love You
How do I make the <div> show exactly like the database field and textarea which has multiple rows?
If the text is stored exactly as it was entered into the <textarea> (i.e. it still contains the newline; check this by viewing the source of your page), you can use the CSS property white-space: pre on your <div>.
See this jsFiddle example; note how the content of both <div> tags are the same, but produce different output, due to the use of the white-space property in the second <div>.
Replace line returns with <br> tags.
If the textarea supports use of HTML tags (similar to the Stack Overflow answer box that I'm typing in now), then you could type:
I <br>
love <br>
you
and it would render in the way you want it to.
I'm using an editor control of ajaxcontroltoolkit.
<cc1:Editor ID="EditNews" runat="server" NoUnicode="true"/>
My problem is that when I try to get the content of Editor by:
Literal1.Text = EditNews.Content;
if in the editor there are breakLine for example "If I write"
Text Text
Text
Text
In Literal I get:
Text Text
Text
Text
Whitout breakLine.
I don't know if this problem depends by an attribute that I haven't set in Editor or I have to control this "" in Code Behind.
Thanks for help
I believe to understand the problem.
In effect is not a problem,but if you use the alignment (center,right, or left) and then directly you try to do breakline it doesn't work because in html it generate:
<p style="text-align: center; margin: 0px"></p>
If you don't use alignment and try to do breakline then it generate in html
<br/>
and so work correctly!
Now, I have another problem with my editor, in fact If I try to write very hard text, my editor cut text!
If you want WYSWYG editor then just use FCK/CK Editor, those are really best ones.