2 Replies Latest reply on Sep 2, 2007 11:53 PM by amsler_t

    Custom RichTextEditor

    amsler_t
      I want to create a RichTextEditor for a CMS with custom functionality but I already found some issues I really do not like from the implemented one. We are in 2007 and it still uses the deprecated font ( http://w3schools.com/tags/default.asp) tag and it uses uppercase HTML tags, which is a not conform with our coding standards.
      In a environment, where you provide authors with such an editor I want to limit its functionality. I found out how to remove certain controls but in my eyes this should not be the way to do it. So I tried to start with a simple TextArea and make the rest by myself but there I am limited with my experience with flex. That brings me to the first question:
      Is there a way to overwrite the main functionality of the RichText Editor in a custom component? I would really like to take it appart and rebuild certain elements from it by myself. I would only have menu with style definitions that result in something like <span class="redFont">Lorem Ipsum</span>. Except list items I would remove all other controls from it and add buttons to search for pictures and predefined links to insert.
      Is there a way to remove the whole <TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="10" COLOR="#0B333C" LETTERSPACING="0" KERNING="0"> and the matching closing tags without the need to strip it out before saving the html string in a CLOB or BLOB?
      Another issue is Drag and Drop. This seems to be disabled for TextArea and RichTextEditor and I did not found an attribute to enable it. What I'm trying to do here is: an author can search for a picture in a database. The result is displayed in a TileList as a thumbnails of pictures matching his query. From there he should be able to drag that element into the text and when he drops it an image tag with the correct url is created at the cursors position. Is there a switch that I did not see to enable something like that?
        • 1. Custom RichTextEditor
          kcell Level 2
          Hi,

          you can extract/remove the textformatting tags and other unwanted tags with Regular expressions (RegExp)
          ( more Infos )

          If you want to overwrite some functions you can make a AS3 class inherit from the RTE and overwrite the functions you want.

          Got no idea for your drag and drop question.

          best regards,
          kcell

          PS: maybe check also this LINK
          • 2. Custom RichTextEditor
            amsler_t Level 1
            Thanks for the links they seem interesting and will probably help me to get where I want to.


            Edit: After reading through I got an idea to solve the crappy HTML Code:
            Strip the textformat tag:
            private function cleanHTML(str:String):String
            {
            var pattern:RegExp = /<TEXTFORMAT.*?>/g;
            var str:String = str.replace(pattern, "");
            pattern = /<\/TEXTFORMAT.*?>/g;
            str = str.replace(pattern, "");
            return str;
            }

            and the map a defined set of <FONT> Tags with their attributes like size and color with a <span class=""> tag. So, I will use the deprecated tag in the RTE but translate it to a span when storing it on the db. There should be a way to do that for all other functions I still want to use but not in the way it is provided from adobe.

            There is still one thing I am not through, how to overwrite the RTE Class or its functions. I would really reuse the main functionality and only change the font type drop down to a style class drop down and strip the color picker and some other things.