Search the web
Sign In
New User? Sign Up
flexcoders · RIA Development with Adobe Flex
? Already a member? Sign in to Yahoo!

Yahoo! Groups Tips

Did you know...
Message search is now enhanced, find messages faster. Take it for a spin.

Best of Y! Groups

   Check them out and nominate your group.
Having problems with message search? Fill out this form to ensure your group is one of the first to be migrated to the new message search system.

Messages

  Messages Help
Advanced
Fw: [flexcoders] Re: insert image on richtexteditor   Message List  
Reply | Forward Message #53593 of 149550 |
Hi Jason,

Well, I found a dirty solution, but works. First of all, think that image
support is not well supported on RichTextEditor, in fact it's not well
suported on TextArea, if you change the image and play arround a little, it
runs unstable.

What I did was a new component extending RichTextEditor. The button to
insert image opens a WindowPopup to select the image and returns the path to
the component. Then:

public function addImagen(url:Object):void{
var inicio:Number=this.textArea.selectionBeginIndex;
var myTARange:TextRange = new TextRange(this, false, inicio, inicio+1);
myTARange.htmlText="##||##";

var html:String=this.htmlText;
var id:Date=new Date();
var
idlink:Number=Math.round((Math.random()*100000)*(Math.random()*100000));

var
imagen:String="##||##"+id.time.toString()+"##||##"+url.src+"##||##"+url.ancho
+

"##||##"+url.alto+"##||##"+url.vspace+"##||##"+url.hspace+"##||##"+url.align+"##\
||##"+idlink.toString();

html=html.replace("##||##", "<A HREF=\"event:IMAGEN"+imagen+"\" " +
"ID=\""+idlink.toString()+"\">" +
"<IMG " +
"SRC=\""+url.src+"\" " +
"ID=\""+id.time.toString()+"\" " +
"WIDTH=\""+url.ancho+"\" " +
"HEIGHT=\""+url.alto+"\" " +
"VSPACE=\""+url.vspace+"\" " +
"HSPACE=\""+url.hspace+"\" " +
"ALIGN=\""+url.align+"\"></IMG></A>");
this.htmlText=html;
}

This way you can change the image only clicking on it.

Later there is another problem. As I said this is a dirty and poor supported
job. When you try to save and later load the content with the image ther was
a xml exception (maybe it was solved on final version, I think I develop
this module with Beta 3).
If you look at the generated text you find that... it's not well formed
xml!!!! Although you insert a correct img tag, <img...></img> (or <img
.../>), the editor returns <img...> whithout closing whe node. So I had to
make an postprocessing before saving:

private function desProcesaTexto(texto:String):String{
XML.ignoreWhitespace = true;
XML.prettyPrinting = false;

var pattern:RegExp = /<IMG([^>]*)>/gi;
texto=texto.replace(pattern, "<IMG $1 ></IMG>");

var temp:XML=XML("<texto>"+texto+"</texto>");
var allTags: XMLList;
var item:XML;
var href:String;
var params:Array;
var protocolo:String;
var tempitem:XML;

//primero las imagenes
allTags= temp..IMG;
for each(item in allTags) {
var xlcParent:XMLListCollection = new
XMLListCollection(item.parent().parent().children());
tempitem=XML(xlcParent.toXMLString());
xlcParent.setItemAt(item, 0);
}
//ahora los links
allTags = temp..A;
for each(item in allTags) {
href=item.@HREF;

href=href.replace("event:", "");
params = href.split("##!!##");
if(params[1]=="HTTP") protocolo="http://";
if(params[1]=="MAIL") protocolo="mailto:";
item.@HREF=protocolo+params[0];
item.@TARGET=params[2];
}

texto=temp.toString();
texto=texto.replace("<IMGAGEN ", "<IMG ");
texto=texto.replace("<texto>", "");
texto=texto.replace("</texto>", "");
return texto;
}


This function also does some postprocesing with links and images. I didn't
like the add link method of ricchtexteditor and made my own, so you can edit
the link easily. This also removes links on images, those links I inserted
when adding an image. This way you can also make a change image method.


Well, maybe is not very clear, I said it was ugly and dirty, but works fine
:)

If you have doubts I can send you the component... no problem.

Regards,
Jesus



-----Mensaje original-----
De: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] En nombre
de Jason
Enviado el: miércoles, 18 de octubre de 2006 23:30
Para: flexcoders@yahoogroups.com
Asunto: [flexcoders] Re: insert image on richtexteditor

Hi Jesús,

Did you ever find a solution to this problem? I too am trying to allow
users to insert an image into a RTE (RichTextEditor) and am having problems.

--jason

--- In flexcoders@yahoogroups.com, Jesús Iglesias <jesus@...> wrote:
>
> Hi,
>
> I have added a new control to a richtexteditor to let user insert
> images.
> I'm inserting the image this way:
>
> var myTARange:TextRange = new TextRange(editor, false, 10, 10);
> myTARange.htmlText="<img src=\"url\" />";
>
> But the image is not inserted. If I do this:
>
> editor.textArea.htmlText+="<img src=\"url\" />";
>
> the image is inserted and displayed.
>
> How to insert an image in the middle of the text?
>
> Jesús Iglesias
> Alvento Soluciones Móviles
> Poeta Querol, 5 - 2
> 46002 Valencia (España)
> [tel]: (+34) 96.353.02.15
> [fax]: (+34) 96.353.08.09
> [e-mail]: <mailto:jesus@...> jesus@...
> [web]: <http://www.alvento.com/> www.alvento.com
>
> Este correo electrónico y, en su caso, cualquier fichero anexo al
> mismo, contiene información de carácter confidencial exclusivamente
> dirigida a su destinatario o destinatarios y propiedad de Alvento
Soluciones S.A.
> Queda prohibida su divulgación, copia o distribución a terceros sin la
> previa autorización escrita de Alvento Soluciones S.A., en virtud de
> la legislación vigente. En el caso de haber recibido este correo
> electrónico por error, se ruega notificar inmediatamente esta
> circunstancia mediante reenvío a la dirección electrónica del
> remitente y la destrucción del mismo.
>
>
> The information in this e-mail and in any attachments is classified as
> Alvento Soluciones S.A. Confidential and Proprietary Information and
> solely for the attention and use of the named addressee(s). You are
> hereby notified that any dissemination, distribution or copy of this
> communication is prohibited without the prior written consent of
> Alvento Soluciones S.A. and it is strictly prohibited by law. If you
> have received this communication by error, please, notify the sender
> by replying e-mail.
>





--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
Yahoo! Groups Links








Thu Oct 19, 2006 6:01 pm

jesus@...
Send Email Send Email

Forward
Message #53593 of 149550 |
Expand Messages Author Sort by Date

Hi Jason, Well, I found a dirty solution, but works. First of all, think that image support is not well supported on RichTextEditor, in fact it's not well ...
Jesús Iglesias
jesus@...
Send Email
Oct 19, 2006
6:11 pm
Advanced

Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Guidelines - Help