I second the motion, iwould like to know as well

Prehaps there's another to do this, if you set a related stylesheet and add a class named "PrettyPhoto" you can then use the RTE to set this class on each image you want to launch.

You could then use jQuery to add the relative link to each image with this class, or even better change the PrettyPhoto code to use the css class or jQuery.

Rich

Thanks for the response, great idea, simple is often always the best. I wanted to allow the user to specify groups but instead i just added a new style "Show Gallery" in settings>stylesheets with the alias "PrettyPhoto" and then changed the jquery selector for the prettyphoto plugin to:

                    $("span[class^='PrettyPhoto'] a").prettyPhoto({
                        animationSpeed: 'normal', /* fast/slow/normal */
                        opacity: 0.80, /* Value between 0 and 1 */
                        showTitle: true, /* true/false */
                        allowresize: true, /* true/false */
                        default_width: 500,
                        default_height: 344,
                        counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
                        theme: 'light_rounded', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
                        hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
                        wmode: 'opaque', /* Set the flash wmode attribute */
                        autoplay: true, /* Automatically start videos: True/False */
                        modal: false /* If set to true, only the close button will close the window */
                    });

When you add a style in the  RTE it seems to add a span around the image once a link has been inserted, that is why span is used as the main selector. Thanks for the help.

Hi all,

I'd like to resurect this old thread.

I'm using Umbraco 7, and like the above guys would like to add a field to the Link Dialog that displays.

I've located the unsertLink.aspx file, however it doesn't seem 100% the same as the dialog! Also, changes (even with full rebuilds and empty TEMP's) don't seem to propogate to the dialog. I've loaded it up in cacheless browser and all sorts, I started by adding a simple

Hello Link Dialog

So, I am using Umbraco 7, VS 2013, SQL Server 2008. The basic question is how can I add a field to the Insert Link Dialog on the TinyMCE Editor in the Umbraco admin area?

Ideally, just a plain old text box so I can enter a class name would be grand! If anyone can help by just pointing out the relivant files to edit (I've experiance with editing CKEditor and TinyMCE stand alones so I will be good to go after the right files are mapped out to me!), and the relivant cache's/temp files to update/delete I'd appriciate it!!!

Thanks in advance!

Danny "Blatant"

Anyone following this?

If anyone else is, I've discovered that in Umbraco 7 the UmbracoLink obeject is a red herring. Seems to be left over from the TinyMCE advlink pop up handling. Instead you need to look here to find the pop-up template in U7:

~\umbraco\Views\common\dialogs\linkpicker.html

What I can not determin however, is where the darn submit handling code is! I've found the reference to a LinkPickerController in ~\umbraco\Js\umbraco.controllers.js however there does not seem to be submission handling here, and no obvious 'inheritance'... I'm looking at the MainController now but if anyone can hint as to where the code is that handles the link building into the WYSIWYG I'd appriciate it!

Kind Regards,

Danny "Blatant"

Partial Solution!!!

Ok, so first you can add the field in this template:

~\umbraco\Views\common\dialogs\linkpicker.html

Like so :

    <umb-control-group label="Link Classes">
        <input type="text"
               localize="placeholder"
               placeholder="Enter CSS Classes..."
               class="umb-editor umb-textstring"
               ng-model="target.style" />
    </umb-control-group>

Then, I dug through and ended up modifying :

~\umbraco\lib\tinymce\plugins\umbracolink\plugin.min.js

Line 180 onwards defines the linkPicker service, the callback has the submit handler in it, line 186, I modified like so :

      function insertLink() {
    +     if (data.style) {
    +         //validate the class string here
    +         var clslist = data.style.split(" ");
    +         var clsstr = "";
    +         var x;
    +         for (x in clslist) {
    +             if (clslist[x].match(/(^-)?^-[a-z_]{1}[a-z0-9_-]*$|^[a-z_]{1}[a-z0-9_-]+$/gi)) {
    +                 clsstr += clslist[x] + " ";
    +             }
    +         }
    +         data.style = clsstr.trim();
    +     }

          if (anchorElm) {
              dom.setAttribs(anchorElm, {
                  href: href,
                  title: data.name, 
                  target: data.target ? data.target : null,
                  rel: data.rel ? data.rel : null,
    +              "class": data.style ? data.style : null
              });

              selection.select(anchorElm);
          } else {
              editor.execCommand('mceInsertLink', false, {
                  href: href,
                  title: data.name, 
                  target: data.target ? data.target : null,
                  rel: data.rel ? data.rel : null,
    +             "class": data.style ? data.style : null
              });
           }
      }

I've run out of time looking into this for now, but this is only a partial solution, for the following reasons :

• No Validation, you will see I silently clean the class string above, but this is not the same as on form validation
• The method for cleaning the CSS class names is not quite complete (dash as 1st char can only be followed by another dash of a-z
• Selecting an existing link for edit does not re-populate the new class box (might try cracking this one a bit later) [See Below Response]

If anyone can contribute any more to the above issues that would be awesome, in the meantime I hope this helps someone with a similar challange off to a decent start.

Some caveats before I go, when working with these files, be sure to completely clear your browsers caching as these changes don't survive! Also, sometimes worth clearing the App_Data/TEMP folder or restart/recompile. Also, both the files above are deep in the umbraco folder, so as always core updates will overwrite these changes.

Kind Regards,

Danny "Blatant"

Edit: Imporved Regular Expression to match W3C CSS 2.1 Spec for class names.

No, I will not let this one die!!

Getting the applied classes bakc into the dialog was actually quite easy, again in ~\umbraco\lib\tinymce\plugins\umbracolink\plugin.min.js

Line 124      data.text = initialText = anchorElm ? (anchorElm.innerText || anchorElm.textContent) 
                : selection.getContent({format: 'text'});
Line 125      data.href = anchorElm ? dom.getAttrib(anchorElm, 'href') : '';
Line 126      data.target = anchorElm ? dom.getAttrib(anchorElm, 'target') : '';
Line 127      data.rel = anchorElm ? dom.getAttrib(anchorElm, 'rel') : '';
Line 128 +    data.style = anchorElm ? dom.getAttrib(anchorElm, 'class') : '';
...

And...

Line 168      currentTarget = {
Line 169          name: anchor.attr("title"),
Line 170          url: anchor.attr("href"),
Line 171          target: anchor.attr("target"),
Line 172 +        style: anchor.attr("class")
Line 173      };

Thats it :)

Danny "Blatant"

is working on a reply...