/** * pwimage plugin for TinyMCE * * @param editor * */ function pwTinyMCE_image(editor) { var $ = jQuery; var modalUrl = ProcessWire.config.urls.admin + 'page/image/'; var $link = null; // if img is wrapped in link, this is it var $figcaption = null; //
element when applicable, null otherwise var $figure = null; //
element when applicable, null otherwise var selection = editor.selection; var node = selection.getNode(); // or if inserting new image var nodeParent = node.parentNode; //

, or

var nodeParentName = nodeParent.nodeName.toUpperCase(); // P, A, or FIGURE var nodeGrandparent = nodeParent.parentNode; //
or or

,

only if nodeParent is var nodeGrandparentName = nodeGrandparent ? nodeGrandparent.nodeName.toUpperCase() : ''; // FIGURE or BODY or P var labels = { captionText: 'Caption text', savingImage: 'Saving', insertImage: 'Insert', selectImage: 'Select', selectAnotherImage: 'Select another', cancel: 'Cancel' }; if(typeof ProcessWire.config.InputfieldTinyMCE.labels !== 'undefined') { labels = ProcessWire.config.InputfieldTinyMCE.labels; // translated text labels } /** * Insert image * * @param src The src attribute for the image to insert * @param $i iframe contents from ProcessPageEditImageSelect to obtain image settings from * */ function insertImage(src, $i) { var $img = $('#selected_image', $i); var width = $img.attr('width'); var alt = $("#selected_image_description", $i).val(); var caption = $("#selected_image_caption", $i).is(":checked"); var $hidpi = $("#selected_image_hidpi", $i); var hidpi = $hidpi.is(":checked") && !$hidpi.is(":disabled"); var cls = $img .removeClass('ui-resizable No Alignment resizable_setup') .removeClass('rotate90 rotate180 rotate270 rotate-90 rotate-180 rotate-270') .removeClass('flip_vertical flip_horizontal') .attr('class'); var $linkToLarger = $('#selected_image_link', $i); var linkToLargerHref = $linkToLarger.is(":checked") ? $linkToLarger.val() : ''; // link to larger version var $insertElement = $('').attr('src', src).attr('alt', alt); if(hidpi) $insertElement.addClass('hidpi'); // note: class is added to $figure (rather than ) when this is a caption if(caption === false && cls.length) $insertElement.addClass(cls); if(width > 0 && $img.attr('data-nosize') != '1') $insertElement.attr('width', width); if($link) { // img was wrapped in an ... and/or
if(linkToLargerHref) { // @todo verify this works and doesn't need similar solution to CKE // $link.attr('href', link).attr('data-cke-saved-href', link); // populate existing link with new href } else if($linkToLarger.attr('data-was-checked') == 1) { // box was checked but no longer is $link = null; } if($link !== null) { $link.append($insertElement); $insertElement = $link; } } else if(linkToLargerHref) { $insertElement = $("").attr('href', linkToLargerHref).append($insertElement); } if(caption) { var $figure = $('
'); // $figure.css('width', width + 'px'); if(cls.length) $figure.addClass(cls); if(!$figcaption) { $figcaption = $('
'); if(alt.length > 1) { $figcaption.append(alt); } else { $figcaption.append(labels.captionText); } } $figure.append($figcaption); $figure.prepend($insertElement); $insertElement = $figure; } // select the entire element surrounding the image so that we replace it all if(nodeGrandparentName === 'FIGURE') { // nodeParent is while nodeGrandparent is
selection.select(nodeGrandparent); } else if(nodeParentName === 'A' || nodeParentName === 'FIGURE') { // @todo check if this works in inline mode selection.select(nodeParent); } var html = $insertElement[0].outerHTML; // if(figureNodeSafari) figureNodeSafari.remove(); // Safari inserts an extra
, so remove the original selection.setContent(html); // editor.insertContent(html); // editor.fire('change'); } /** * Click of the "Insert image" button * * @param $iframe The