openWYSIWYG File Upload Addon

openWYSIWYG File Upload Addon
This addon, called openLinkLibrary, is for the free web-based WYSISYG editor called openWYSIWYG. It allowing you to upload files, view a list of past uploaded files and insert links pointing to these files plus it retains the original insert link features. It's written and works basically the same as the existing openImageLibary addon that comes with openWYSIWYG version 1.4.7.

You can find more scripts that we offer on our web scripts main page.

download Download this addon

Install/Setup

  1. To use this addon first you'll need to download and setup openWYSIWYG. Follow this link to download the latest version of openWYSIWYG. You must have at least version 1.4.7 to use this addon.
  2. Next download the openLinkLibrary zip file from us and upzip it. Now on your web server place the linklibrary folder into your addon folder that came with the openWYSIWYG editor.
  3. Open up the wysiwyg.js file in a text editor so you can edit it - this is the file that came with your openWYSIWYG editor (should be in the scripts folder). Add the following to the very bottom of that file (you will not need to insert the first line of the below code if you have already added/setup the openImageLibary addon for your editor):

    var mysettings = new WYSIWYG.Settings();
    // define the location of the openLinkLibrary addon
    mysettings.LinkPopupFile = "addons/linklibrary/insert_hyperlink.php";
    // define the width of the insert link popup
    mysettings.LinkPopupWidth = 600;
    // define the height of the insert link popup
    mysettings.LinkPopupHeight = 245;

  4. Now make sure the line in the above code mysettings.LinkPopupFile is actually equal to the location of the openLinkLibrary addon. And you can change the popup window's dimensions from the above inserted code too.
  5. Next in the wysiwyg.js file replace the following lines of code (somewhere around line number 519). All this does is make the link that's inserted not have any extra tags unless they are actually needed - so replacing this is actually optional.

    Replace this:

    // set the attributes
    WYSIWYG_Core.setAttribute(lin, "href", href);
    WYSIWYG_Core.setAttribute(lin, "class", styleClass);
    WYSIWYG_Core.setAttribute(lin, "className", styleClass);
    WYSIWYG_Core.setAttribute(lin, "target", target);
    WYSIWYG_Core.setAttribute(lin, "name", name);
    WYSIWYG_Core.setAttribute(lin, "style", style);

    With the following code:

    // set the attributes
    WYSIWYG_Core.setAttribute(lin, "href", href);
    if(styleClass) { WYSIWYG_Core.setAttribute(lin, "class", styleClass); }
    //WYSIWYG_Core.setAttribute(lin, "className", styleClass);
    if(target) { WYSIWYG_Core.setAttribute(lin, "target", target); }
    if(name) { WYSIWYG_Core.setAttribute(lin, "name", name); }
    if(style) { WYSIWYG_Core.setAttribute(lin, "style", style); }

  6. Now in the wysiwyg.js file add the following lines of code at line number 1105 (should be after the code for the insert image popup implementation):

    // Check the insert link popup implementation
    var linkPopupFile = this.config[n].PopupsDir + 'insert_hyperlink.html';
    var linkPopupWidth = 350;
    var linkPopupHeight = 160;
    if(typeof this.config[n].LinkPopupFile != "undefined" && this.config[n].LinkPopupFile != "") {
    linkPopupFile = this.config[n].LinkPopupFile;
    }
    if(typeof this.config[n].LinkPopupWidth && this.config[n].LinkPopupWidth > 0) {
    linkPopupWidth = this.config[n].LinkPopupWidth;
    }
    if(typeof this.config[n].LinkPopupHeight && this.config[n].LinkPopupHeight > 0) {
    linkPopupHeight = this.config[n].LinkPopupHeight;
    }

  7. Next in the wysiwyg.js file replace the following code around line 1159:

    // Create Link
    case "CreateLink":
    window.open(this.config[n].PopupsDir + 'insert_hyperlink.html?wysiwyg=' + n, 'popup', 'location=0,status=0,scrollbars=0,resizable=0,width=350,height=160,top=' + popupPosition.top + ',left=' + popupPosition.left).focus();
    break;

    With the following:

    // Create Link
    case "CreateLink":
    window.open(linkPopupFile + '?wysiwyg=' + n, 'popup', 'location=0,status=0,scrollbars=0,resizable=0,width=' + linkPopupWidth + ',height=' + linkPopupHeight + ',top=' + popupPosition.top + ',left=' + popupPosition.left).focus();
    break;

  8. Now on your web page that you're inserting the wysiwyg editor remove the following line in the javascript for that page:

    WYSIWYG.attach('textarea_id');

    And replace it for with the following:

    WYSIWYG.attach('textarea_id', mysettings);

    Make sure you also replace textarea_id in the above code you just inserted with your actual textarea id

  9. Finally in the config.inc.php file, which is located in the linklibrary folder (the addon you downloaded from us) edit the following lines to reflect the location of your upload folder for the files.

    $linkbasedir = '../../uploads';

    and

    $linkbaseurl = 'wysiwyg/uploads';