Loading ...
Sorry, an error occurred while loading the content.

RichEditor Toolbar config question

Expand Messages
  • farrartd
    Ok guys... I have another question. Dav showed me how to add a button group to an existing toolbar config, and it works well. One more question though... I am
    Message 1 of 4 , Mar 4, 2008
    • 0 Attachment
      Ok guys... I have another question.
      Dav showed me how to add a button group to an existing toolbar config,
      and it works well. One more question though... I am needing to be able
      to add a button with a custom menu overlay to the toolbar inside of
      the editor's initial toolbar config. When I run my code, I get the
      following js error in fireBug.

      "Q has no properties".
      Does anyone know what I am doing wrong, or how it should be done
      correctly?
      Any help would be appreciated.
      Here is the js I am using if that will help

      var myTextEditor_editor = new YAHOO.widget.Editor('myTextEditor', {
      toolbar: {
      titlebar: '',
      buttons: [
      {
      group: 'MyNewGroup',
      label: 'This will help!',
      buttons: [

      //Setup the config for the new "test label" button
      {
      type: 'menu', //Using a standard push button
      label: 'test label', //The name/title of the button
      value: 'inserticon', //The "Command" for the button

      menu: function() {
      //Create the Overlay instance we are going to use for
      the menu
      var menu = new YAHOO.widget.Overlay('inserticon', {
      width: '150px',
      height: '150px',
      visible: false
      });
      menu.setBody(document.getElementById('testYUIButton'));
      menu.beforeShowEvent.subscribe(function() {
      // set the display and visiblity of the button content

      document.getElementById('testYUIButton').style.display = 'block';

      toggleVisibility(document.getElementById('testYUIButton'));

      //Set the context to the bottom left corner of
      the Insert Icon button
      menu.cfg.setProperty('context', [

      myTextEditor_editor.toolbar.getButtonByValue('inserticon').get('element'),
      'tl',
      'bl'
      ]);
      });
      menu.render(document.body);
      menu.element.style.visibility = 'hidden';
      //return the Overlay instance here
      return menu;
      }() //This fires the function right now to return the
      Overlay Instance to the menu property.
      }
      ]
      }
      ]}});


      myTextEditor_editor.render();

      Thanks,

      Timothy
    • Dav Glass
      Can you post a link to an example? Dav Dav Glass dav.glass@yahoo.com blog.davglass.com + Windows: n. - The most successful computer virus, ever. + + A computer
      Message 2 of 4 , Mar 4, 2008
      • 0 Attachment
        Can you post a link to an example?
        Dav

        Dav Glass
        dav.glass@...
        blog.davglass.com



        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +

        ----- Original Message ----
        From: farrartd <timothyfarrar@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Tuesday, March 4, 2008 8:00:19 AM
        Subject: [ydn-javascript] RichEditor Toolbar config question

        Ok guys... I have another question.
        Dav showed me how to add a button group to an existing toolbar config,
        and it works well. One more question though... I am needing to be able
        to add a button with a custom menu overlay to the toolbar inside of
        the editor's initial toolbar config. When I run my code, I get the
        following js error in fireBug.

        "Q has no properties".
        Does anyone know what I am doing wrong, or how it should be done
        correctly?
        Any help would be appreciated.
        Here is the js I am using if that will help

        var myTextEditor_editor = new YAHOO.widget.Editor('myTextEditor', {
        toolbar: {
        titlebar: '',
        buttons: [
        {
        group: 'MyNewGroup',
        label: 'This will help!',
        buttons: [

        //Setup the config for the new "test label" button
        {
        type: 'menu', //Using a standard push button
        label: 'test label', //The name/title of the button
        value: 'inserticon', //The "Command" for the button

        menu: function() {
        //Create the Overlay instance we are going to use for
        the menu
        var menu = new YAHOO.widget.Overlay('inserticon', {
        width: '150px',
        height: '150px',
        visible: false
        });
        menu.setBody(document.getElementById('testYUIButton'));
        menu.beforeShowEvent.subscribe(function() {
        // set the display and visiblity of the button content

        document.getElementById('testYUIButton').style.display = 'block';

        toggleVisibility(document.getElementById('testYUIButton'));

        //Set the context to the bottom left corner of
        the Insert Icon button
        menu.cfg.setProperty('context', [

        myTextEditor_editor.toolbar.getButtonByValue('inserticon').get('element'),
        'tl',
        'bl'
        ]);
        });
        menu.render(document.body);
        menu.element.style.visibility = 'hidden';
        //return the Overlay instance here
        return menu;
        }() //This fires the function right now to return the
        Overlay Instance to the menu property.
        }
        ]
        }
        ]}});


        myTextEditor_editor.render();

        Thanks,

        Timothy




        Yahoo! Groups Links
      • Timothy Farrar
        Dav, Sorry... I m not set up to be able to do that right now, but if it will help, here is the full page content that I am working with. Thanks again, TImothy
        Message 3 of 4 , Mar 4, 2008
        • 0 Attachment
          Dav,

          Sorry... I'm not set up to be able to do that right now, but if it will
          help, here is the full page content that I am working with.

          Thanks again,

          TImothy



          <html>
          <head>
          <title>YUI Editor</title>


          <link href="/sos5/share/js/yui/build/assets/skins/sam/skin.css" rel="stylesheet" type="text/css" /><style>
          .yui-skin-sam .yui-toolbar-container .yui-toolbar-inserticon
          span.yui-toolbar-icon {
          background-image: url( icon-info.gif );
          background-position: 1px 0px;
          }
          .yui-skin-sam .yui-toolbar-container .yui-button-inserticon-selected
          span.yui-toolbar-icon {
          background-image: url( icon-info.gif );
          background-position: 1px 0px;
          }
          #testYUIButton {
          border: thick groove;
          height: 150;
          width: 150;
          background-color:grey;
          }
          </style>
          <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/yahoo/yahoo-min.js"></script>
          <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/event/event-min.js"></script>
          <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/dom/dom-min.js"></script>

          <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
          <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/element/element-beta-min.js"></script>
          <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/container/container_core-min.js"></script>
          <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/menu/menu-min.js"></script>
          <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/button/button-min.js"></script>
          <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/animation/animation-min.js"></script>
          <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/editor/editor-beta-min.js"></script>
          <script type="text/javascript" language="javascript">
          var myTextEditor_editor = new YAHOO.widget.Editor('myTextEditor', { toolbar: {
          titlebar: '',
          buttons: [
          {
          group: 'MyNewGroup',
          label: 'This will help!',
          buttons: [

          //Setup the config for the new "test label" button
          {
          type: 'menu', //Using a standard push button
          label: 'test label', //The name/title of the button
          value: 'inserticon', //The "Command" for the button
          menu: function() {
          //Create the Overlay instance we are going to use for the menu
          var menu = new YAHOO.widget.Overlay('inserticon', {
          width: '150px',
          height: '150px',
          visible: false
          });
          menu.setBody(document.getElementById('testYUIButton'));
          menu.beforeShowEvent.subscribe(function() {
          // set the display and visiblity of the button content
          document.getElementById('testYUIButton').style.display = 'block';
          toggleVisibility(document.getElementById('testYUIButton'));

          //Set the context to the bottom left corner of the Insert Icon button
          menu.cfg.setProperty('context', [
          myTextEditor_editor.toolbar.getButtonByValue('inserticon').get('element'),
          'tl',
          'bl'
          ]);
          });
          menu.render(document.body);
          menu.element.style.visibility = 'hidden';
          //return the Overlay instance here
          return menu;
          }() //This fires the function right now to return the Overlay Instance to the menu property.
          }
          ]
          }
          ]}});


          myTextEditor_editor.render();
          </script>
          <script type="text/javascript" language="javascript" src="/sos5/share/js/jquery/jquery.js"></script>

          <script language="javascript" type="text/javascript">

          function doInsert() {
          buttonValue = $('#test').val();
          myTextEditor_editor.execCommand('insertHTML',$('#test').val());
          $('#test').val('');
          toggleVisibility(document.getElementById('testYUIButton'));
          }
          </script>

          </head>
          <body>


          <form name="myForm" id="myForm" action="" class="_coop_" method="post">

          <div class="yui-skin-sam">
          <textarea name="msgpost" id="myTextEditor" cols="50" rows="10">






          </textarea>
          <!-- ToolBar buttons markup -->

          <div id="testYUIButton" style="display:none"> <input type="text" value="testing" name="test" id="test" /> <input type="button" value="insert" onClick="doInsert()" name="testButton" id="testButton"> </div>

          </div>

          <input type="hidden" name="_postBack" value="true">
          <input type="hidden" name="_postForm" value="myForm">
          </form>

          </body>
          </html>
        • Dav Glass
          Timothy -- Change this line: type: menu , //Using a standard push button To this: type: push, //Using a standard push button On a side note, you don t need
          Message 4 of 4 , Mar 4, 2008
          • 0 Attachment
            Timothy --

            Change this line:
            type: 'menu', //Using a standard push button

            To this:
            type: 'push, //Using a standard push button

            On a side note, you don't need to include these:
            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/yahoo/yahoo-min.js"></script>
            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/event/event-min.js"></script>
            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/dom/dom-min.js"></script>

            If you include this:
            <script type="text/javascript" language="javascript"src="/sos5/share/js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>

            Hope that helps :)
            Dav


            Dav Glass
            dav.glass@...
            blog.davglass.com



            + Windows: n. - The most successful computer virus, ever. +
            + A computer without a Microsoft operating system is like a dog
            without bricks tied to its head +
            + A Microsoft Certified Systems Engineer is to computing what a
            McDonalds Certified Food Specialist is to fine cuisine +

            ----- Original Message ----
            From: Timothy Farrar <timothyfarrar@...>
            To: ydn-javascript@yahoogroups.com
            Sent: Tuesday, March 4, 2008 8:35:45 AM
            Subject: Re: [ydn-javascript] RichEditor Toolbar config question

            Dav,

            Sorry... I'm not set up to be able to do that right now, but if it will
            help, here is the full page content that I am working with.

            Thanks again,

            TImothy



            <html>
            <head>
            <title>YUI Editor</title>


            <link href="/sos5/share/js/yui/build/assets/skins/sam/skin.css" rel="stylesheet" type="text/css" /><style>
            .yui-skin-sam .yui-toolbar-container .yui-toolbar-inserticon
            span.yui-toolbar-icon {
            background-image: url( icon-info.gif );
            background-position: 1px 0px;
            }
            .yui-skin-sam .yui-toolbar-container .yui-button-inserticon-selected
            span.yui-toolbar-icon {
            background-image: url( icon-info.gif );
            background-position: 1px 0px;
            }
            #testYUIButton {
            border: thick groove;
            height: 150;
            width: 150;
            background-color:grey;
            }
            </style>
            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/yahoo/yahoo-min.js"></script>
            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/event/event-min.js"></script>
            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/dom/dom-min.js"></script>

            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/element/element-beta-min.js"></script>
            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/container/container_core-min.js"></script>
            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/menu/menu-min.js"></script>
            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/button/button-min.js"></script>
            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/animation/animation-min.js"></script>
            <script type="text/javascript" language="javascript" src="/sos5/share/js/yui/build/editor/editor-beta-min.js"></script>
            <script type="text/javascript" language="javascript">
            var myTextEditor_editor = new YAHOO.widget.Editor('myTextEditor', { toolbar: {
            titlebar: '',
            buttons: [
            {
            group: 'MyNewGroup',
            label: 'This will help!',
            buttons: [

            //Setup the config for the new "test label" button
            {
            type: 'menu', //Using a standard push button
            label: 'test label', //The name/title of the button
            value: 'inserticon', //The "Command" for the button
            menu: function() {
            //Create the Overlay instance we are going to use for the menu
            var menu = new YAHOO.widget.Overlay('inserticon', {
            width: '150px',
            height: '150px',
            visible: false
            });
            menu.setBody(document.getElementById('testYUIButton'));
            menu.beforeShowEvent.subscribe(function() {
            // set the display and visiblity of the button content
            document.getElementById('testYUIButton').style.display = 'block';
            toggleVisibility(document.getElementById('testYUIButton'));

            //Set the context to the bottom left corner of the Insert Icon button
            menu.cfg.setProperty('context', [
            myTextEditor_editor.toolbar.getButtonByValue('inserticon').get('element'),
            'tl',
            'bl'
            ]);
            });
            menu.render(document.body);
            menu.element.style.visibility = 'hidden';
            //return the Overlay instance here
            return menu;
            }() //This fires the function right now to return the Overlay Instance to the menu property.
            }
            ]
            }
            ]}});


            myTextEditor_editor.render();
            </script>
            <script type="text/javascript" language="javascript" src="/sos5/share/js/jquery/jquery.js"></script>

            <script language="javascript" type="text/javascript">

            function doInsert() {
            buttonValue = $('#test').val();
            myTextEditor_editor.execCommand('insertHTML',$('#test').val());
            $('#test').val('');
            toggleVisibility(document.getElementById('testYUIButton'));
            }
            </script>

            </head>
            <body>


            <form name="myForm" id="myForm" action="" class="_coop_" method="post">

            <div class="yui-skin-sam">
            <textarea name="msgpost" id="myTextEditor" cols="50" rows="10">






            </textarea>
            <!-- ToolBar buttons markup -->

            <div id="testYUIButton" style="display:none"> <input type="text" value="testing" name="test" id="test" /> <input type="button" value="insert" onClick="doInsert()" name="testButton" id="testButton"> </div>

            </div>

            <input type="hidden" name="_postBack" value="true">
            <input type="hidden" name="_postForm" value="myForm">
            </form>

            </body>
            </html>







            Yahoo! Groups Links
          Your message has been successfully submitted and would be delivered to recipients shortly.