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

Re: [ydn-javascript] RTE Icon Insertion, dont display custom image

Expand Messages
  • Dav Glass
    geronimox1986 -- Your problem is that you are loading your CSS file (estilos.css), then you are using YUILoader to load the Editor and it s CDD file. Which
    Message 1 of 5 , Jan 1, 2009
    View Source
    • 0 Attachment
      geronimox1986 --

      Your problem is that you are loading your CSS file (estilos.css), then you are using YUILoader to load the Editor and it's CDD file.

      Which means that the Editor's CSS file is over-writing your CSS. Your CSS file needs to be loaded after YUILoader loads the Editor's CSS..

      Does that make sense?
      Dav

      --
      Dav Glass
      davglass@...
      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  +


      On Thu, Jan 1, 2009 at 4:09 PM, geronimox1986 <geronimox@...> wrote:

      Hi. Im implementing an RTE and after adding a custom icon, i cant make
      it load a custom image.
      If someone could help me, =)
      Here is the application
      http://onativia.dynalias.com:8080/webgolf/admin/index.php?sb=0&op=noticia&sop=nueva

      /////My Code/////
      //RICH TEXT EDITOR
      YAHOO.namespace("editor");
      YAHOO.editor.crear = function(){
      var miConfig = {
      height: '300px',
      width: '700px',
      dompath: true,
      focusAtStart: false
      };
      var miEditor = new YAHOO.widget.Editor('editor1', miConfig);
      miEditor.on('toolbarLoaded', function() {
      var imgConfig = {
      type: 'push',
      label: 'Subir Imagen',
      value: 'subirimagenicon'
      };
      miEditor.toolbar.addButtonToGroup(imgConfig,
      'insertitem');

      miEditor.toolbar.on('subirimageniconClick', function() {
      this.execCommand('inserthtml', 'cant see the image
      on the push button<br> even it is wel referenciated');
      }, miEditor, true);
      });
      miEditor._defaultToolbar.titlebar="<b>Desarrollo de la
      Noticia</b>";
      miEditor._defaultToolbar.grouplabels=false;
      miEditor.render();
      }
      YAHOO.util.Event.onDOMReady(YAHOO.editor.crear);

      /////MY CSS/////
      .yui-skin-sam .yui-toolbar-container
      .yui-toolbar-subirimagenicon span.yui-toolbar-icon {
      background-image:url(./images/imageupload.gif);
      background-position: 1px 0px;
      }
      .yui-skin-sam .yui-toolbar-container
      .yui-button-subirimagenicon-selected span.yui-toolbar-icon {
      background-image:url(./images/imageupload.gif);
      background-position: 1px 0px;
      }
      #subirimagenicon {
      background-color:#F2F2F2;
      border:1px solid #808080;
      padding:5px;
      }
      #subirimagenicon a {
      border:1px solid #F2F2F2;
      display:block;
      float:left;
      }
      #subirimagenicon a:hover {
      border:1px solid #808080;
      }

      Thanks!


    • Gero Oñativia
      Thanks for your answer. I first thought it was that. I tryed but still not loading the custom image. I search the web looking for a web wich uses icon
      Message 2 of 5 , Jan 1, 2009
      View Source
      • 0 Attachment
        Thanks for your answer.
        I first thought it was that.
        I tryed but still not loading the custom image.
        I search the web looking for a web wich uses icon insertion and yui loader, but couldn't find one.
        I think the problem is yui loader. It's loading Editors CDD file after the navigator loads my custom css. Wherever i insert my css file, its loading faster than the dynamic load of yui loader. May be?
        Still trying to solve it.
        Any idea is welcome.

        Gero.


        2009/1/2 Dav Glass <davglass@...>
        geronimox1986 --

        Your problem is that you are loading your CSS file (estilos.css), then you are using YUILoader to load the Editor and it's CDD file.

        Which means that the Editor's CSS file is over-writing your CSS. Your CSS file needs to be loaded after YUILoader loads the Editor's CSS..

        Does that make sense?
        Dav

        --
        Dav Glass
        davglass@...
        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  +


        On Thu, Jan 1, 2009 at 4:09 PM, geronimox1986 <geronimox@...> wrote:

        Hi. Im implementing an RTE and after adding a custom icon, i cant make
        it load a custom image.
        If someone could help me, =)
        Here is the application
        http://onativia.dynalias.com:8080/webgolf/admin/index.php?sb=0&op=noticia&sop=nueva

        /////My Code/////
        //RICH TEXT EDITOR
        YAHOO.namespace("editor");
        YAHOO.editor.crear = function(){
        var miConfig = {
        height: '300px',
        width: '700px',
        dompath: true,
        focusAtStart: false
        };
        var miEditor = new YAHOO.widget.Editor('editor1', miConfig);
        miEditor.on('toolbarLoaded', function() {
        var imgConfig = {
        type: 'push',
        label: 'Subir Imagen',
        value: 'subirimagenicon'
        };
        miEditor.toolbar.addButtonToGroup(imgConfig,
        'insertitem');

        miEditor.toolbar.on('subirimageniconClick', function() {
        this.execCommand('inserthtml', 'cant see the image
        on the push button<br> even it is wel referenciated');
        }, miEditor, true);
        });
        miEditor._defaultToolbar.titlebar="<b>Desarrollo de la
        Noticia</b>";
        miEditor._defaultToolbar.grouplabels=false;
        miEditor.render();
        }
        YAHOO.util.Event.onDOMReady(YAHOO.editor.crear);

        /////MY CSS/////
        .yui-skin-sam .yui-toolbar-container
        .yui-toolbar-subirimagenicon span.yui-toolbar-icon {
        background-image:url(./images/imageupload.gif);
        background-position: 1px 0px;
        }
        .yui-skin-sam .yui-toolbar-container
        .yui-button-subirimagenicon-selected span.yui-toolbar-icon {
        background-image:url(./images/imageupload.gif);
        background-position: 1px 0px;
        }
        #subirimagenicon {
        background-color:#F2F2F2;
        border:1px solid #808080;
        padding:5px;
        }
        #subirimagenicon a {
        border:1px solid #F2F2F2;
        display:block;
        float:left;
        }
        #subirimagenicon a:hover {
        border:1px solid #808080;
        }

        Thanks!





        --
        .::Gero::.
      • Dav Glass
        Put the loading of your css file inside the Loaders onSuccess callback.. Dav -- Dav Glass davglass@gmail.com blog.davglass.com + Windows: n. - The most
        Message 3 of 5 , Jan 2, 2009
        View Source
        • 0 Attachment
          Put the loading of your css file inside the Loaders onSuccess callback..

          Dav

          --
          Dav Glass
          davglass@...
          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  +


          On Thu, Jan 1, 2009 at 11:23 PM, Gero Oñativia <geronimox@...> wrote:

          Thanks for your answer.
          I first thought it was that.
          I tryed but still not loading the custom image.
          I search the web looking for a web wich uses icon insertion and yui loader, but couldn't find one.
          I think the problem is yui loader. It's loading Editors CDD file after the navigator loads my custom css. Wherever i insert my css file, its loading faster than the dynamic load of yui loader. May be?
          Still trying to solve it.
          Any idea is welcome.

          Gero.


          2009/1/2 Dav Glass <davglass@...>

          geronimox1986 --

          Your problem is that you are loading your CSS file (estilos.css), then you are using YUILoader to load the Editor and it's CDD file.

          Which means that the Editor's CSS file is over-writing your CSS. Your CSS file needs to be loaded after YUILoader loads the Editor's CSS..

          Does that make sense?
          Dav

          --
          Dav Glass
          davglass@...
          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  +


          On Thu, Jan 1, 2009 at 4:09 PM, geronimox1986 <geronimox@...> wrote:

          Hi. Im implementing an RTE and after adding a custom icon, i cant make
          it load a custom image.
          If someone could help me, =)
          Here is the application
          http://onativia.dynalias.com:8080/webgolf/admin/index.php?sb=0&op=noticia&sop=nueva

          /////My Code/////
          //RICH TEXT EDITOR
          YAHOO.namespace("editor");
          YAHOO.editor.crear = function(){
          var miConfig = {
          height: '300px',
          width: '700px',
          dompath: true,
          focusAtStart: false
          };
          var miEditor = new YAHOO.widget.Editor('editor1', miConfig);
          miEditor.on('toolbarLoaded', function() {
          var imgConfig = {
          type: 'push',
          label: 'Subir Imagen',
          value: 'subirimagenicon'
          };
          miEditor.toolbar.addButtonToGroup(imgConfig,
          'insertitem');

          miEditor.toolbar.on('subirimageniconClick', function() {
          this.execCommand('inserthtml', 'cant see the image
          on the push button<br> even it is wel referenciated');
          }, miEditor, true);
          });
          miEditor._defaultToolbar.titlebar="<b>Desarrollo de la
          Noticia</b>";
          miEditor._defaultToolbar.grouplabels=false;
          miEditor.render();
          }
          YAHOO.util.Event.onDOMReady(YAHOO.editor.crear);

          /////MY CSS/////
          .yui-skin-sam .yui-toolbar-container
          .yui-toolbar-subirimagenicon span.yui-toolbar-icon {
          background-image:url(./images/imageupload.gif);
          background-position: 1px 0px;
          }
          .yui-skin-sam .yui-toolbar-container
          .yui-button-subirimagenicon-selected span.yui-toolbar-icon {
          background-image:url(./images/imageupload.gif);
          background-position: 1px 0px;
          }
          #subirimagenicon {
          background-color:#F2F2F2;
          border:1px solid #808080;
          padding:5px;
          }
          #subirimagenicon a {
          border:1px solid #F2F2F2;
          display:block;
          float:left;
          }
          #subirimagenicon a:hover {
          border:1px solid #808080;
          }

          Thanks!





          --
          .::Gero::.

        • Gero Oñativia
          Hi! Solved! I tryed loading custom css using yui loader as stated in examples, but the image still wasn t loading. I solved it adding the custom style
          Message 4 of 5 , Jan 2, 2009
          View Source
          • 0 Attachment
            Hi! Solved!
            I tryed loading custom css using yui loader as stated in examples, but the image still wasn't loading.
            I solved it adding the custom style <style> of the new icon just before the form <form> where the editor is.
            This took me a complete day. I can go on by now.
            Thanks a lot Dav for helping.

            Gero.

            2009/1/2 Dav Glass <davglass@...>
            Put the loading of your css file inside the Loaders onSuccess callback..


            Dav

            --
            Dav Glass
            davglass@...
            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  +


            On Thu, Jan 1, 2009 at 11:23 PM, Gero Oñativia <geronimox@...> wrote:

            Thanks for your answer.
            I first thought it was that.
            I tryed but still not loading the custom image.
            I search the web looking for a web wich uses icon insertion and yui loader, but couldn't find one.
            I think the problem is yui loader. It's loading Editors CDD file after the navigator loads my custom css. Wherever i insert my css file, its loading faster than the dynamic load of yui loader. May be?
            Still trying to solve it.
            Any idea is welcome.

            Gero.


            2009/1/2 Dav Glass <davglass@...>

            geronimox1986 --

            Your problem is that you are loading your CSS file (estilos.css), then you are using YUILoader to load the Editor and it's CDD file.

            Which means that the Editor's CSS file is over-writing your CSS. Your CSS file needs to be loaded after YUILoader loads the Editor's CSS..

            Does that make sense?
            Dav

            --
            Dav Glass
            davglass@...
            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  +


            On Thu, Jan 1, 2009 at 4:09 PM, geronimox1986 <geronimox@...> wrote:

            Hi. Im implementing an RTE and after adding a custom icon, i cant make
            it load a custom image.
            If someone could help me, =)
            Here is the application
            http://onativia.dynalias.com:8080/webgolf/admin/index.php?sb=0&op=noticia&sop=nueva

            /////My Code/////
            //RICH TEXT EDITOR
            YAHOO.namespace("editor");
            YAHOO.editor.crear = function(){
            var miConfig = {
            height: '300px',
            width: '700px',
            dompath: true,
            focusAtStart: false
            };
            var miEditor = new YAHOO.widget.Editor('editor1', miConfig);
            miEditor.on('toolbarLoaded', function() {
            var imgConfig = {
            type: 'push',
            label: 'Subir Imagen',
            value: 'subirimagenicon'
            };
            miEditor.toolbar.addButtonToGroup(imgConfig,
            'insertitem');

            miEditor.toolbar.on('subirimageniconClick', function() {
            this.execCommand('inserthtml', 'cant see the image
            on the push button<br> even it is wel referenciated');
            }, miEditor, true);
            });
            miEditor._defaultToolbar.titlebar="<b>Desarrollo de la
            Noticia</b>";
            miEditor._defaultToolbar.grouplabels=false;
            miEditor.render();
            }
            YAHOO.util.Event.onDOMReady(YAHOO.editor.crear);

            /////MY CSS/////
            .yui-skin-sam .yui-toolbar-container
            .yui-toolbar-subirimagenicon span.yui-toolbar-icon {
            background-image:url(./images/imageupload.gif);
            background-position: 1px 0px;
            }
            .yui-skin-sam .yui-toolbar-container
            .yui-button-subirimagenicon-selected span.yui-toolbar-icon {
            background-image:url(./images/imageupload.gif);
            background-position: 1px 0px;
            }
            #subirimagenicon {
            background-color:#F2F2F2;
            border:1px solid #808080;
            padding:5px;
            }
            #subirimagenicon a {
            border:1px solid #F2F2F2;
            display:block;
            float:left;
            }
            #subirimagenicon a:hover {
            border:1px solid #808080;
            }

            Thanks!





            --
            .::Gero::.




            --
            .::Gero::.
          Your message has been successfully submitted and would be delivered to recipients shortly.