5 Replies Latest reply on Sep 29, 2012 4:08 PM by stacy.hunt

    Rich Text Editor in Edge

    stacy.hunt

      Hi guys

       

      I've been trying to use a WYSIWYG rich text editor in Edge with no luck. The one I'm using is NicEdit, and it should be as simple as loading a script and then calling a function to make all of the text areas on a page into editors. The code which works with an HTML page containing one or more text areas is:

       

      1. <script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript">
      2. //<![CDATA[
      3.         bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
      4.   //]]>
      5.   </script>

       

      In Edge, I have a text area and I can load in the script from the URL OK using Ajax in Edge as follows on Stage creationComplete:

       

      getScript();

       

      function getScript() {

                $.ajax({

                            url: "http://js.nicedit.com/nicEdit-latest.js",

                            dataType: "script",

                            success: function(data) {

                                      console.log("script loaded");

                                      nicEditors.allTextAreas();

                          },

                          fail: function(){

                                    console.log("Can't find the script!")

                          }

                });

      }

       

      However the text area does not become editable like it does in the HTML page.

       

      Any suggestions? Thanks!

        • 1. Re: Rich Text Editor in Edge
          heathrowe Most Valuable Participant

          I suspect it has to do with the original text element, within Edge. By default its a <div>. Notice the little tag selector to the right of the active text id field in the Properties Panel. Even then you only have the tag selector choice range from <div>, <p> all the way down to <code>.

           

          So what you need to do is rewire thee original Text element as such

           

          // Get Text element (Text) and assign it to variable 'element'

          var element = sym.$("Text");

          // Rewire the text element as a 'textarea'

          element.html("<textarea rows='4' cols='50'>"+

          "This is now a text area" +

          "</textarea>");

           

          Hope it helps

          Darrell

          • 2. Re: Rich Text Editor in Edge
            joel_pau Level 5

            Hi,

             

            Be careful with .fail(). It's not an "Ajax Events" since 1.7 (i'm not sure).

            .error() will be better.

            • 3. Re: Rich Text Editor in Edge
              stacy.hunt Level 1

              Awesome - you nailed it! Thanks Heathrowe.

              • 4. Re: Rich Text Editor in Edge
                stacy.hunt Level 1

                I discovered another way to do it - I'm posting it here in case someone else finds it useful.

                 

                NicEdit can also turn specific divs into text areas. So I made a new Edge composition with 2 text objects on the stage called "area1" and "area2". Both are tagged as divs using the selector HeathRowe mentioned. The following code adds the editor panel to the first area and turns the second into an editable text area:

                 

                 

                getScript();

                 

                function getScript() {

                          $.ajax({

                                      url: "http://js.nicedit.com/nicEdit-latest.js",

                                      dataType: "script",

                                      success: function(data) {

                                                console.log("script loaded");

                                                makeEditor();

                                    },

                                    fail: function(){

                                              console.log("Can't find the script!")

                                    }

                          });

                }

                 

                 

                function makeEditor(){

                       var editor = new nicEditor();

                       editor.setPanel("Stage_area1");

                       editor.addInstance('Stage_area2');

                }

                • 5. Re: Rich Text Editor in Edge
                  stacy.hunt Level 1

                  It seems to work OK Joel. What's the potential problem that it can cause?