/*
To make this plugin work, you must:
1) include
2) in postInit(), call: wym.imageupload_init('/path/to/your/upload/script.php', 'uploadedimage');
(the uploaded file will then be available to your script.php in $_FILES['uploadedimage'])
3) make an upload script (not necessarily PHP), which should:
1) validate (extensions, size,...), resize, watermark, save the image
2) return this HTML:
(if the upload has failed for some reason you could put a link to some error image in "url" variable)
4) include these CSS rules in the page where you want to display the entered html:
div.wym p:after, div.wym h1:after, div.wym h2:after, div.wym h3:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
div.wym p, div.wym h1, div.wym h2, div.wym h3 { clear: both; margin-bottom: 10px; margin-top: 0px;}
div.wym img.floatleft { float: left; margin: 3px 10px 5px 0px; }
div.wym img.floatright { float: right !important; margin: 3px 0px 5px 10px; }
(assumption is that all the text is included inside ...
- make them fit your needs!)
These CSS rules make sure that:
- images are floated to the left/right (note: every image has 'floatleft' CSS class, but only those that have 'floatright' too are floated to the right)
- text in block containers that follow the images doesn't flow around them
*/
window.jQuery && (function ($) {
$.extend(WYMeditor.editor.prototype, {
// Function to be called for initialisation in the skin init, or in postInit
imageupload_init:function (imageUploadUrl, imageFormName) {
var html = '';
var dialog = (function (wym) {
return function () {
wym.dialog('Upload_Image', '', html);
return false;
};
})(this);
// Insert a button for uploading images:
jQuery(this._box).find('.wym_tools ul')
.append(jQuery("").click(dialog)
);
// // Insert the buttons for aligning images left and right:
// var alignImageLeft = (function (wym) {
// return function () {
// if (wym._selected_image) {
// var container = wym._selected_image;
// // css class 'floatleft' is always set. We just toggle 'floatright'
// jQuery(container).removeClass('f-right').addClass('f-left');
// }
// return false;
// }
// })(this);
// var alignImageRight = (function (wym) {
// return function () {
// if (wym._selected_image) {
// var container = wym._selected_image;
// // css class 'floatleft' is always set. We just toggle 'floatright'
// jQuery(container).removeClass('f-left').addClass('f-right');
// }
// return false;
// }
// })(this);
// jQuery(this._box).find('.wym_tools ul').append(
// jQuery("")
// .click(alignImageLeft)
// ).append(
// jQuery("")
// .click(function (ev) {
// ev.preventDefault();
// alignImageRight();
// })
// );
// now take care of all the CSS styles we need:
var css = // clear floats in modern browsers:
'p:after, h1:after, h2:after, h3:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}\n' +
// clear floats in IE too:
'p, h1, h2, h3 { clear: both; }\n' +
// every image should float to left by default:
'img { float: left; width: auto !important; height: auto !important;}\n' +
// .floatright should float to right:
'img.f-right { float: right !important; width: auto !important; height: auto !important; }';
$(this._doc).find('head').append($(""));
},
imageinsert:function (content) {
var container = this.selected();
var sData = content;
if (container && container.tagName.toLowerCase() != WYMeditor.BODY) {
// inside :
jQuery(container).before('
' + sData + '
');
// jQuery(container).prepend('' + sData + '
');
} else {
jQuery(this._doc.body).append('' + sData + '
');
}
}
});
})(window.jQuery);