PDA

View Full Version : Rendering HTML in editable form field



JoshS
15 Oct 2010, 9:29 AM
Read this post: http://www.sencha.com/forum/showthread.php?112686-Rendering-HTML-in-editable-form-field&p=526037#post526037

Hello,

I'm new to ext and I cannot for the life of me work out how to render HTML into a textarea, or other suitable xtype.

Here is what I am trying to do:

1. User inputs text (regex to be exact) into a field on an ext window.
2. Grab text from field.
3. Text is parsed and highlighted appropriately (div tags, css, etc...), returns string.
4. String, something like: <div class="matchedbrace">[</div>Stuff<div class="matchedbrace">]</div> is lobbed back into the textarea, now all rendered and highlighted, etc.

This highlighting updates on keyup. Note that this has to be an editable, dynamic field - not a panel or label as covered in the FAQ.

What exactly would be the best way of doing this? All of the ways I've tried to do this have resulted in having raw HTML in the field, or '[Stuff]' with no highlighting.

Any help would be hugely appreciated!

Edit:

I wonder if its something to do with adding an html node with the domhelper? I did try that, but it didn't seem to work...

JoshS
15 Oct 2010, 5:15 PM
Updated with a bit more info.

I'd really appreciate your help, even if its just pointing me in a possible direction.

Animal
15 Oct 2010, 11:02 PM
I don't really understand the problem.

If you want to edit text, you use an Ext.form.TextArea

JoshS
16 Oct 2010, 2:24 AM
Thanks for your reply - let me explain in a less verbose way.

I have a TextArea in which the user types Regex.

I then have a script which gets that text, highlights it - i.e. wraps div tags around it to colour it. e.g. [A-Za-z] would be returned as:

<div class="matchedbracket">[</div>A-Za-z<div class="matchedbracket">]</div>
...highlighting the brackets. The highlighter processes the string stored in the textbox on KeyUp while the user is typing.

I now want to put this string from the highlighter script back into the TextBox, so that the divs are rendered, thus highlighting the brackets. However, what happens is either the div tags are stripped (setValue) resulting in [A-Za-z] again, or the text - including the non-rendered div tags is set back into the TextBox (e.g. <div class="matchedbracket">[</div>A-Za-z<div class="matchedbracket">]</div> as a raw string, rather than actually applying the CSS and colouring it.)

How do I get div tags to apply in an editable TextBox?

Animal
16 Oct 2010, 4:50 AM
I do not understand that at all.

JoshS
16 Oct 2010, 4:55 AM
I need to display HTML in a textbox, or other editable element!

Can I do that?

Animal
16 Oct 2010, 4:56 AM
As I said, that is what an Ext.form.TextArea is for!

JoshS
16 Oct 2010, 4:59 AM
But it doesn't render divs!

I either get the actual source in the textarea, i.e. '<div class="superbrightcolour">foobar</div>' or just 'foobar' with no CSS style applied.

It has to be dynamic, too. I can't just use 'html:...'

:(

Animal
16 Oct 2010, 5:17 AM
"either"??? What do you mean?

I'm going to have to quit. I cannot understand what you need.

JoshS
16 Oct 2010, 8:52 AM
Say I have a css class called 'matchingbracket' that makes text colour red.

If I use .setRawValue('<div class="matchingbracket">[</div> TEXT <div class="matchingbracket">]</div>') or .update('<div class="matchingbracket">[</div> TEXT <div class="matching bracket">]</div>')

The textarea shows this (<div>s aren't rendered):


<div class="matchingbracket">[</div> TEXT <div class="matchingbracket">]</div>If I use .setValue, the text area shows this without the CSS being applied (The <div>s are stripped):


[TEXT]All I need is CSS applied within a textarea. It is exactly the same effect as on this site: http://regexpal.com/. Type [TEXT] in the top textbox. Notice how it's being highlighted as you type? There's a script which is adding div tags around what you type, highlighting it on keyUp. Those <divs> aren't working (i.e. changing the highlight colour) in an ext textarea.

That's it. That's all I am looking for. Colour text in textareas (or other suitable element) with <div> tags.

Thank you for your help. :)

JoshS
18 Oct 2010, 12:11 AM
Still looking for a little bit of help for this - it really can't be that complicated.

mcadirci
18 Oct 2010, 1:07 AM
No you can't do that,
My suggestion is to add a validator to your field and return the html based response. If your input should not contain [ then validators return should be

Hello [ this is sample text

validator return:
Hello <b>[</b> this is sample text

But when you do that you need to replace html chars like < > to their code to prevent errors.

Hope it helps.