[Flashcoders] RE: WSIWYG HTML text editor in Flash

dave matthews Thu, 10 Aug 2006 07:23:14 -0700


maybe this post could be TRIMMED a bit girls?

------------------------------

Message: 20
Date: Thu, 10 Aug 2006 09:58:44 +0100
From: "Giles Taylor" <[EMAIL PROTECTED]>
Subject: RE: [Flashcoders] WSIWYG HTML text editor in Flash - follow
        onquestion
To: "Flashcoders mailing list" <[email protected]>
Message-ID:
        <[EMAIL PROTECTED]>
Content-Type: text/plain;       charset="us-ascii"

I did it by getting the index in the textField, as you described, then
looping through every character in the html and counting the characters
that are not in tags. When (number of characters not in tags) == (the
index in the textfield) then you have your index in the html.
Mmmmmmmmmmm, nice!

;)

Giles

-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Merrill,
Jason
Sent: 09 August 2006 19:15
To: Flashcoders mailing list
Subject: RE: [Flashcoders] WSIWYG HTML text editor in Flash - follow
onquestion

You have to take out all the html, amend it (using html) and thenre-assign it all to the textfield.


Ok, but even doing that, you would have to use something like
Selection.getCaretIndex() to know where in the Textfield you are so you
can insert the <IMG> tag in the right place, but that wouldn't seem to
work because in the tests I did it Selection.getCaretIndex() gives you
the position in the string shown as it is in the textfield, not the HTML
code.  So the index # is way off because of the hidden HTML tags are
counted.  How would you know where in the HTML code (not in the rendered
HTML) the user placed their caret so you can insert the IMG tag?

Jason Merrill
Bank of America
Learning & Organization Effectiveness - Technology Solutions

-----Original Message-----
From: [EMAIL PROTECTED] [mailto:flashcoders-[EMAIL PROTECTED] On Behalf Of Giles Taylor
Sent: Wednesday, August 09, 2006 12:25 PM
To: Flashcoders mailing list
Subject: RE: [Flashcoders] WSIWYG HTML text editor in Flash - follow

onquestion


Yes, but you should be writing to the .htmlText property not the .text

property as that will then keep all the styling in place via html

code.

You have to take out all the html, amend it (using html) and thenre-assign it all to the textfield.
Giles

-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of

Merrill,

Jason
Sent: 09 August 2006 16:36
To: Flashcoders mailing list

Subject: RE: [Flashcoders] WSIWYG HTML text editor in Flash - followonquestion

To insert an image you need to process the text as "text". So you

first

Yes, I understand that, :) but in doing that:

"since writing to the text property of a TextField object destroys any

custom formatting associated with the field (i.e. the interal styleprofiles), [you] have to use the TextField.replaceSel() function (p.

in Moock's ASDG for FlashMX)."

So with your TextFormat destroyed, you've sacrificed the user's

ability

to continue to format the text in order to add an image. At least, that'show I understand it. TextFormat does not have <IMG> as an availablestyle.
Jason Merrill
Bank of America
Learning & Organization Effectiveness - Technology Solutions
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:flashcoders-

[EMAIL PROTECTED] On Behalf Of Marcelo Volmaro
Sent: Wednesday, August 09, 2006 11:02 AM
To: Flashcoders mailing list
Subject: Re: [Flashcoders] WSIWYG HTML text editor in Flash - follow

onquestion


To insert an image you need to process the text as "text". So you

first

need to get the html text (textfield.htmlText), insert the image

using

string functions and then re-insert the text into the textfield.

Because you know where the cursor is in the textfield "text" but not

in

the "html" text, you need to insert some kind of marker at the

cursor

position, and then replace that marker inside the html text with the

img

tag. That will do the trick.
On Wed, 09 Aug 2006 11:09:37 -0300, Merrill, Jason<[EMAIL PROTECTED]> wrote:
OK - follow me here for a fun mental exercise:

I think the major issue I'm running into with this is the

TextFormat

class relies on the text field's visual formatting described by

the

Flash Players internal style profiles.  And since the TextFormat

class

does not support an <IMG> tag, I cannot use TextFormat to insert

an

image, I have to insert the <IMG> tag as a string. AND SO since
writing
to the text property of a TextField object destroys any customformatting associated with the field (i.e. the interal style
profiles),
I have to use the TextField.replaceSel() function (p. 889 in

Moock's

ASDG for FlashMX).  AND since the replaceSel() function encodes

the

<IMG> markup, you can't have it render the image!

So it seems to be a catch-22 and I'm screwed using TextFormat and
trying
to let the user also add an inline image. Unless someone knowsotherwise, I am going to have to use a movieClip container instead
of an
IMG tag.  That will not be ideal, but it might fly for this

project.


I really wish they would make the HTML editing capabilities of

Flash

better, but it doesn't look like that will happen any time soon.

Jason Merrill
Bank of America
Learning & Organization Effectiveness - Technology Solutions

-----Original Message-----
From: [EMAIL PROTECTED]

[mailto:flashcoders-

[EMAIL PROTECTED] On Behalf Of John Grden
Sent: Wednesday, August 09, 2006 9:04 AM
To: Flashcoders mailing list
Subject: Re: [Flashcoders] WSIWYG HTML text editor in Flash -

follow

onquestion


Sorry if you guys already covered this, but is it possible to

use

SWF's

instead of bitmaps?

the image tag supports loading of SWF's, and I would think you

*could*

(meaning, I've not tried it) include onRelease method that

handles

the

removal of said SWF?

On 8/9/06, Merrill, Jason <[EMAIL PROTECTED]>

wrote:


>>I would have thought (i.e. I've not tried it) that once the

image

is

in
>>the textfield that users could just select/delete it as

though

it

where
>>just another piece of text???

Nope - well, kind of, that's only partially true.  You cannot

select

the

picture itself, but if you select the space character where the

image

tag is "invisibly" located and delete that, the IMG tag gets

deleted

as

well, thus removing the picture.  So you can do it, but it's

not

intuitive to the user on how to find that space and do that,

especially

if they forgot where they put it.  But it would be really nice

if

it

were true that you could select the picture directly.  Unless

someone

knows otherwise, but this is what appears to be the case in my

tests.


Jason Merrill
Bank of America
Learning & Organization Effectiveness - Technology Solutions






>>-----Original Message-----
>>From: [EMAIL PROTECTED]

[mailto:flashcoders-

>>[EMAIL PROTECTED] On Behalf Of Giles Taylor
>>Sent: Wednesday, August 09, 2006 4:28 AM
>>To: Flashcoders mailing list
>>Subject: RE: [Flashcoders] WSIWYG HTML text editor in Flash -

follow

onquestion
>>
>>I would have thought (i.e. I've not tried it) that once the

image

is

in
>>the textfield that users could just select/delete it as

though

it

where
>>just another piece of text???
>>
>>Giles
>>
>>-----Original Message-----
>>From: [EMAIL PROTECTED]
>>[mailto:[EMAIL PROTECTED] On Behalf

Of

Merrill,
>>Jason
>>Sent: 08 August 2006 17:38
>>To: Flashcoders mailing list
>>Subject: RE: [Flashcoders] WSIWYG HTML text editor in Flash -

follow

>>onquestion
>>
>>>>You could scan through the textfield.htmlText value (i.e.

the

code)

>>and
>>>>relate the selection index in the rendered output to the

actual

index
>>in
>>>>the code, then insert your image code in the

textfield.htmlText.

>>>>I have done this previously (for a different reason) by

just

running

>>two
>>>>counters as I looped through each character in the code,

one

counter

>>>>counts every character and the other ignores characters

that

are

part
>>of
>>>>a tag.
>>>>
>>
>>Thanks Giles. That is what I was trying to avoid, especially

since

>>need to give the user editing capability - so they can add

and

remove

>>the tag at any time when editing the text.  Could get messy

real

quick

>>and be bug-prone.  I think I might opt instead for keeping

images

out

of
>>the HTML altogether, and just use a MovieClip they load

content

into

and
>>position.  It won't allow the text to wrap around the image,

but

oh

>>well.
>>
>>Thanks for the many responses!
>>
>>Jason Merrill
>>Bank of America
>>Learning & Organization Effectiveness - Technology Solutions
>>
>>
>>
>>
>>
>>
>>>>-----Original Message-----
>>>>From: [EMAIL PROTECTED]

[mailto:flashcoders-

>>>>[EMAIL PROTECTED] On Behalf Of Giles Taylor
>>>>Sent: Tuesday, August 08, 2006 4:41 AM
>>>>To: Flashcoders mailing list
>>>>Subject: RE: [Flashcoders] WSIWYG HTML text editor in Flash

follow

>>onquestion
>>>>
>>>>I think that replaceSel() acts on the rendered output

rather

than

the
>>>>code, so it thinks that you want to actually display the

text

that

you
>>
>>>>entered rather than adding it to the code (hope that makes

sense!)

>>>>
>>>>You could scan through the textfield.htmlText value (i.e.

the

code)

>>and
>>>>relate the selection index in the rendered output to the

actual

index
>>in
>>>>the code, then insert your image code in the

textfield.htmlText.

>>>>I have done this previously (for a different reason) by

just

running

>>two
>>>>counters as I looped through each character in the code,

one

counter

>>>>counts every character and the other ignores characters

that

are

part
>>of
>>>>a tag.
>>>>
>>>>Bit of a pain, but I hope it helps, Giles
>>>>
>>>>-----Original Message-----
>>>>From: [EMAIL PROTECTED]
>>>>[mailto:[EMAIL PROTECTED] On

Behalf

Of

>>Merrill,
>>>>Jason
>>>>Sent: 07 August 2006 23:25
>>>>To: Flashcoders mailing list
>>>>Subject: RE: [Flashcoders] WSIWYG HTML text editor in Flash

follow
>>>>onquestion
>>>>
>>>>Oh, and to follow up with some further information:
>>>>
>>>>It seems to only encode those HTML entities when I use>>>>TextField.replaceSel(). If I just add the <img> tag string

on

to

the
>>>>htmltext field value, it works:
>>>>
>>>>//works:
>>>>test_txt.htmlText += "<img src=\"mountains.jpg\"

width=\"350\"

>>>>height=\"120\" />";
>>>>
>>>>//fails - shows literal text, and encodes entities:
>>>>test_txt.replaceSel("<img src=\"mountains.jpg\"

width=\"350\"

>>>>height=\"120\" />");
>>>>
>>>>Am I left with splitting the string in two, inserting the

<img>

tag,

>>and
>>>>re-assembling the string?  Or is there a way to get

replaceSel()

to

>>work
>>>>with HTML tags?
>>>>
>>>>Thanks,
>>>>
>>>>Jason Merrill
>>>>Bank of America
>>>>Learning & Organization Effectiveness - Technology

Solutions

>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>>>-----Original Message-----
>>>>>>From: [EMAIL PROTECTED]
[mailto:flashcoders-
>>
>>>>>>[EMAIL PROTECTED] On Behalf Of Merrill,

Jason

>>>>>>Sent: Monday, August 07, 2006 5:55 PM
>>>>>>To: Flashcoders mailing list
>>>>>>Subject: [Flashcoders] WSIWYG HTML text editor in Flash -

follow

on
>>>>question
>>>>>>
>>>>>>Getting back to this question I had back on Aug 1, thanks

for

the

>>>>ideas.
>>>>>>I've built a basic HTML text editor in Flash using the

TextFormat

>>>>class.
>>>>>>Since I need to save the resulting HTML string back to a

database,

>>it
>>>>>>works great.
>>>>>>
>>>>>>However, now I need to insert images into the HTML -

which

isn't

>>>>>>supported by the TextFormat class.  So I was thinking I

could

just
>>>>>>insert an img tag string into the textField using>>>>>>TextField.replaceSel(), like this:
>>>>>>
>>>>>>test_txt.replaceSel("<img src=\"mountains.jpg\"

width=\"350\"

>>>>>>height=\"120\" />");
>>>>>>
>>>>>>So that part works fine, but when I re-render the

textField,

the

>>image
>>>>
>>>>>>does not show (doesn't render as HTML), it shows the

literal

<img

>>>>>>scr=...etc. characters in the textField (even though it

is

an

HTML

>>>>>>textfield).  I thought maybe I needed to re-render the

textfield,

so
>>I
>>>>
>>>>>>left the frame and then jumped back to it, and it still

shows

the

>>>>>>literal HTML.  So in testing the value of the html

TextField,

>>found
>>>>>>the <> and \" characters I inserted have been changed to

encoded

>>>>>>entities in the HTML string:
>>>>>>
>>>>>>&lt;img src=&quot;mountains.jpg&quot;

width=&quot;350&quot;

>>>>>>height=&quot;120&quot; /&gt;
>>>>>>
>>>>>>Why is that and how can I fix this?   It would be pretty

messy

to

>>use
>>>>>>the XML object to decode those entities - why are they

getting

>>>>rendered
>>>>>>that way in the first place?
>>>>>>
>>>>>>Thanks,
>>>>>>
>>>>>>
>>>>>>Jason Merrill
>>>>>>Bank of America
>>>>>>Learning & Organization Effectiveness - Technology

Solutions

>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>>>-----Original Message-----
>>>>>>>>From: [EMAIL PROTECTED]
>>[mailto:flashcoders-
>>>>
>>>>>>>>[EMAIL PROTECTED] On Behalf Of James Booth
>>>>>>>>Sent: Tuesday, August 01, 2006 10:43 AM
>>>>>>>>To: 'Flashcoders mailing list'
>>>>>>>>Subject: RE: [Flashcoders] WSIWYG HTML text editor in

Flash?

>>>>>>>>
>>>>>>>>I just did exactly this, a couple of days ago.  I

created

class
>>>>that
>>>>>>can
>>>>>>>>apply any kind of supported HTML formatting.  The idea

seemed

>>>>daunting
>>>>>>at
>>>>>>>>first, but the class is relatively small.  You can

assign/remove

>>>>>>textfields
>>>>>>>>that it should "watch". I don't have it here with me

right

now,

>>but
>>>>>>here's
>>>>>>>>the basics:
>>>>>>>>
>>>>>>>>It doesn't use replaceText at all.
>>>>>>>>
>>>>>>>>I have a switch statement for the various textformat

options

(some
>>>>are
>>>>>>>>Boolean (bold, italic, etc) and some have arguments

(leading,

>>size,
>>>>>>etc).
>>>>>>>>
>>>>>>>>When the textfield has focus use an interval to get the
beginIndex
>>>>and
>>>>>>>>endIndex.  You can clear the interval onkillFocus.
>>>>>>>>
>>>>>>>>Then in your setFormat function
>>>>>>>>
>>>>>>>>Public function setFormat (type, arg):Void {
>>>>>>>>        var temp_fmt:TextFormat =
currentField.getTextFormat(beginIndex,
>>>>>>>>endIndex);
>>>>>>>>
>>>>>>>>        switch (type)
>>>>>>>>        {
>>>>>>>>                case "bold":
>>>>>>>>                case "italic":
>>>>>>>>                case "underline":
>>>>>>>>                //etc...
>>>>>>>>                {
>>>>>>>>                        temp_fmt[type] = temp_fmt[type]

==

false

? true
>>>>>>:
>>>>>>>>false;
>>>>>>>>                        break;
>>>>>>>>                }
>>>>>>>>                case "leading":
>>>>>>>>                case "align":
>>>>>>>>                case "size":
>>>>>>>>                //etc...
>>>>>>>>                {
>>>>>>>>                        temp_fmt[type] = arg;
>>>>>>>>                        break;
>>>>>>>>                }
>>>>>>>>        }
>>>>>>>>        currentField.setTextFormat(beginIndex,

endIndex,

temp_fmt); }
>>>>>>>>
>>>>>>>>This should give you a head start.
>>>>>>>>
>>>>>>>>- James
>>>>>>>>
>>>>>>>>
>>>>>>>>-----Original Message-----
>>>>>>>>From: [EMAIL PROTECTED]
>>>>>>>>[mailto:[EMAIL PROTECTED] On

Behalf

Of

>>>>>>Merrill,
>>>>>>>>Jason
>>>>>>>>Sent: Tuesday, August 01, 2006 10:11 AM
>>>>>>>>To: Flashcoders mailing list
>>>>>>>>Subject: [Flashcoders] WSIWYG HTML text editor in

Flash?

>>>>>>>>
>>>>>>>>Two related questions.  In a nutshell, trying to make a

WSIWYG

>>HTML
>>>>>>text
>>>>>>>>editor for Flash 7.
>>>>>>>>
>>>>>>>>Question 1:
>>>>>>>>
>>>>>>>>Has anyone created an HTML text editor component or

class

of

some
>>>>kind
>>>>>>>>in Flash?  Basically, having a textfield containing a

paragraph

of
>>>>>>text
>>>>>>>>the user can apply bold, size, font, etc. to - I assume

it

would

>>use
>>>>
>>>>>>>>something like:
>>>>>>>>

textfield.replaceText(Selection.getBeginIndex(),Selection.getEnd

In
>>de
>>>>x(
>>>>>>),
>>>>>>>>theNewString)
>>>>>>>>
>>>>>>>>or something to that effect.
>>>>>>>>
>>>>>>>>So to my second question, I was able to get the above

working,

but
>>>>the
>>>>>>>>html Textfield would not apply the new HTML tags, it

would

show

>>them
>>>>
>>>>>>>>literally when replaceText was used.  Initially, I set

the

text

>>with
>>>>
>>>>>>>>textField.htmlText = myText and renders fine with the

bolding,

but
>>>>>>>>textField.replaceText() seems to not allow the

textfield

to

show

>>the
>>>>>>>>bold tags applied - it shows the literal tag.   Any

ideas?

>>>>>>>>
>>>>>>>>Basically, would like to create a WSIWYG HTML text

editor

(flash

>>7),
>>>>>>but
>>>>>>>>from what I read in the archives, it's a lot harder

than

it

sounds
>>>>and
>>>>>>>>maybe not even possible in Flash right now, but I don't

want

to

>>give
>>>>>>up
>>>>>>>>too early.  It seems that all the basic methods are

available,

>>there
>>>>>>are
>>>>>>>>just some quirks to work out with the Textfield class.
>>>>>>>>
>>>>>>>>Thanks,
>>>>>>>>
>>>>>>>>Jason Merrill
>>>>>>>>Bank of America
>>>>>>>>Learning & Organization Effectiveness - Technology

Solutions

>>>>>>>>
>>>>>>_______________________________________________
>>>>>>[email protected]
>>>>>>To change your subscription options or search the

archive:

>>>>>>http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
>>>>>>
>>>>>>Brought to you by Fig Leaf Software Premier Authorized>>>>>>Adobe Consulting and Training http://www.figleaf.com>>>>>>http://training.figleaf.com
>>>>_______________________________________________
>>>>[email protected]
>>>>To change your subscription options or search the archive:
>>>>http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
>>>>
>>>>Brought to you by Fig Leaf Software Premier Authorized

Adobe

>>>>Consulting and Training
>>http://www.figleaf.com

>>>>http://training.figleaf.com>>>>_______________________________________________

>>>>[email protected]
>>>>To change your subscription options or search the archive:
>>>>http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
>>>>
>>>>Brought to you by Fig Leaf Software Premier Authorized

Adobe

>>>>Consulting and Training http://www.figleaf.com>>>>http://training.figleaf.com
>>_______________________________________________
>>[email protected]
>>To change your subscription options or search the archive:
>>http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
>>
>>Brought to you by Fig Leaf Software Premier Authorized Adobe>>Consulting and Training
http://www.figleaf.com
>>http://training.figleaf.com
>>_______________________________________________
>>[email protected]
>>To change your subscription options or search the archive:
>>http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
>>
>>Brought to you by Fig Leaf Software Premier Authorized Adobe>>Consulting and Training http://www.figleaf.com>>http://training.figleaf.com
_______________________________________________
[email protected] To change your subscriptionoptions or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software Premier Authorized AdobeConsulting and Training http://www.figleaf.comhttp://training.figleaf.com
--
[  JPG  ]
_______________________________________________
[email protected] To change your subscription optionsor search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software Premier Authorized AdobeConsulting and Training http://www.figleaf.comhttp://training.figleaf.com
_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software Premier Authorized Adobe Consultingand Training http://www.figleaf.com http://training.figleaf.com
--
_____________
Marcelo Volmaro
_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training http://www.figleaf.comhttp://training.figleaf.com
_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training http://www.figleaf.comhttp://training.figleaf.com_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training http://www.figleaf.comhttp://training.figleaf.com

_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training http://www.figleaf.com
http://training.figleaf.com


------------------------------

_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com

End of Flashcoders Digest, Vol 19, Issue 28
*******************************************


_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com

[Flashcoders] RE: WSIWYG HTML text editor in Flash

Reply via email to