3 Replies Latest reply on Jul 19, 2010 3:09 PM by rtalton

    Rich Text Editor with image

    universos_ideas

      Hello everybody,

      I have a big problem, I need to put in a Rich Text Editor insert a picture and my user needs to control the position of placing  the image at the beginning of the text in  the middle or end without damaging the text already entered. Could anyone help me, have some example?


      Many thanks for any attention!

        • 1. Re: Rich Text Editor with image
          rtalton Level 4

          This is a tricky one. Below is an example to get you started.

          Using images in the htmlText can be buggy and exact placement is weird sometimes, so be forewarned.

          You will need to tweak things a bit to make it fit your purpose. Good luck.

           

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              creationComplete="initApp()"
              layout="vertical">

           

              <mx:Script>
                  <![CDATA[
                      import mx.containers.ControlBar;
                      import mx.controls.Button;

           

                      private function initApp():void {
                          //adds the "Add Image" button to the
                          //RTE's toolbar.
                          var btn:Button = new Button;
                          btn.label = "Add Image";
                          btn.addEventListener(MouseEvent.CLICK, insertImage);
                          rte.toolbar.addChild(btn);
                      }

           

                      public function calculateHtmlPosition(htmlstr:String, pos:int):int {
                          //calculateHtmlPosition() is courtesy of Andrei Ionescu.
                          //see http://www.flexer.info/2008/03/26/find-cursor-position-in-a-htmltext-object-richtexteditor -textarea-textfield-update/
                          //
                          // we return -1 (not found) if the position is bad
                          if (pos <= -1)
                              return -1;

           

                          // characters that appears when a tag starts
                          var openTags:Array = ["<", "&"];
                          // characters that appears when a tag ends
                          var closeTags:Array = [">", ";"];
                          // the tag should be replaced with
                          // ex: &amp; is & and has 1 as length but normal
                          // tags have 0 length
                          var tagReplaceLength:Array = [0, 1];
                          // flag to know when we are inside a tag
                          var isInsideTag:Boolean = false;
                          var cnt:int = 0;
                          // the id of the tag opening found
                          var tagId:int = -1;
                          var tagContent:String = "";

           

                          for (var i:int = 0; i < htmlstr.length; i++) {
                              // if the counter passes the position specified
                              // means that we reach the text position
                              if (cnt >= pos)
                                  break;
                              // current char
                              var currentChar:String = htmlstr.charAt(i);
                              // checking if the current char is in the open tag array
                              for (var j:int = 0; j < openTags.length; j++) {
                                  if (currentChar == openTags[j]) {
                                      // set flag
                                      isInsideTag = true;
                                      // store the tag open id
                                      tagId = j;
                                  }
                              }
                              if (!isInsideTag) {
                                  // increment the counter
                                  cnt++;
                              } else {
                                  // store the tag content
                                  // needed afterwards to find new lines
                                  tagContent += currentChar;
                              }
                              if (currentChar == closeTags[tagId]) {
                                  // we add the replace length
                                  if (tagId > -1)
                                      cnt += tagReplaceLength[tagId];
                                  // if we encounter the </P> tag we increment the counter
                                  // because of new line character
                                  if (tagContent == "</P>")
                                      cnt++;
                                  // set flag
                                  isInsideTag = false;
                                  // reset tag content
                                  tagContent = "";
                              }
                          }
                          // return the position in html text
                          return i;
                      }

           

                      private function insertImage(event:MouseEvent):void {
                          //the new image tag to be inserted:
                          var theImageTag:String = "<img src='accept.png' width='16' height='16' hspace='0' vspace='0'>";
                          var htmlPos:int;
                          var origTextFirstPart:String;
                          var origTextSecondPart:String;

           

                          if (rte.selection.beginIndex != 0) {
                              //Find the text position within htmlText:
                              htmlPos = calculateHtmlPosition(rte.htmlText, rte.selection.beginIndex);
                          } else {
                              //We are at the first char position; just use zero as value:
                              htmlPos = 0;
                          }
                          //Split the string up:
                          origTextFirstPart = rte.htmlText.substring(0, htmlPos);
                          origTextSecondPart = rte.htmlText.substr(htmlPos, rte.htmlText.length - 1);

           

                          //Insert the new image tag between first & second string sections:
                          var newText:String = origTextFirstPart + theImageTag + origTextSecondPart;
                          rte.htmlText = newText;
                      }
                  ]]>
              </mx:Script>

           

              <mx:RichTextEditor
                  id="rte"
                  title="Insert an Image" width="400">
              </mx:RichTextEditor>
          </mx:Application>

          • 2. Re: Rich Text Editor with image
            universos_ideas Level 1

            I agree that this way  will work to insert the image, however when trying to align the image to  center or right, that possibility is not possible. And I must also insert  the image is possible to change the alignment of the image: <img  scr="image.jpg" align="LEFT, CENTER or RIGHT" />

            Thank you for your  contribution! See if you can help me  with this problem anymore.

            • 3. Re: Rich Text Editor with image
              rtalton Level 4

              Search the help docs for "Using the htmlText  property" to see what image attributes are supported.

              Good luck!