Skip to content

Loading…

Add support for images with external URL #40

Merged
merged 1 commit into from

3 participants

@domenkozar
Plone Foundation member

Adds "External" tab to image browser. Commits files directly to skins folder, until someone syncs again to collective/tinymce (or even better, sets up git externals instead of using mr.developer)

@jonstahl
Plone Foundation member

Awesome!

@domenkozar
Plone Foundation member

If there are no objections until end of next week, I'll merge this :)

@domenkozar
Plone Foundation member

I'll just merge this week, complain if needed :)

@domenkozar domenkozar merged commit 50658b3 into master
@garbas
Plone Foundation member

@iElectric can we delete your feature branch?

@domenkozar
Plone Foundation member
@garbas garbas deleted the feature/external_image branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 31, 2012
  1. @domenkozar
This page is out of date. Refresh to see the latest.
View
3 HISTORY.rst
@@ -5,6 +5,9 @@ HISTORY
1.3b8 (unreleased)
------------------
+- Added support for images with external URL
+ [iElectric]
+
- Support passing a maxlength attribute to tinymce_wysiwyg_support.
[davisagli]
View
2 Products/TinyMCE/skins/tinymce/plugins/plonebrowser/css/plonebrowser.css
@@ -5,6 +5,8 @@
#plonebrowser .formHelp { background: #F5F5F5; height: 2em; clear: both; margin: 0; padding-left: 5px; font-size: 10px; }
#plonebrowser .formHelp img { position: absolute; margin-top: 4px; }
#plonebrowser .formHelp #internalpath span, #plonebrowser .formHelp #internalpath a { padding-left: 13px; }
+#externalimage_panel .field { margin-bottom: 10px; }
+#imgpreview { text-align: center; }
#details_panel, #addimage_panel { border-left: 1px solid #CCC; padding-left: 6px; margin-left: -24.87%; }
#details_panel h2 { color: #CCC; line-height: 1; margin-bottom: 10px; margin-left: 4px; }
#details_panel .field { padding-bottom: 5px; }
View
178 Products/TinyMCE/skins/tinymce/plugins/plonebrowser/js/plonebrowser.js
@@ -77,7 +77,7 @@ BrowserDialog.prototype.init = function () {
this.shortcuts_html = this.is_link_plugin ? self.editor.settings.link_shortcuts_html : self.editor.settings.image_shortcuts_html;
// Setup events
- jq('#insert-selection', document).click( function (e) {
+ jq('#insert-selection', document).click(function (e) {
e.preventDefault();
if (self.is_link_plugin === true) {
self.insertLink();
@@ -114,7 +114,7 @@ BrowserDialog.prototype.init = function () {
self.checkSearch(e);
});
// handle shortcuts button
- jq("#shortcutsicon", document).click(function(e) {
+ jq("#shortcutsicon", document).click(function (e) {
e.preventDefault();
jq(this).toggleClass('selected');
jq('#shortcutsview', document).toggle();
@@ -147,7 +147,6 @@ BrowserDialog.prototype.init = function () {
selected_node = selected_node.closest('a');
jq('#browseimage_panel h2', document).text(this.labels.label_browselink);
jq('#addimage_panel h2', document).text(this.labels.label_addnewfile);
- jq('#linktype_panel', document).removeClass('hide');
jq('#plonebrowser', document).removeClass('image-browser').addClass('link-browser');
this.populateAnchorList();
@@ -240,7 +239,7 @@ BrowserDialog.prototype.init = function () {
url: this.editor.settings.portal_url + '/portal_tinymce/tinymce-getpathbyuid?uid=' + current_uid,
dataType: 'text',
type: 'GET',
- success: function(text) {
+ success: function (text) {
self.current_url = self.getAbsoluteUrl(self.editor.settings.document_base_url, text);
self.current_link = self.editor.settings.link_using_uids ? href : self.current_url;
self.getFolderListing(self.getParentUrl(self.current_url), 'tinymce-jsonlinkablefolderlisting');
@@ -273,6 +272,29 @@ BrowserDialog.prototype.init = function () {
jq('#plonebrowser', document).removeClass('link-browser').addClass('image-browser');
jq('#linktarget', document).hide();
+ // setup panel buttons acions
+ jq('#email_link, #anchor_link', document).hide();
+ jq('#linktype a', document).click(function (e) {
+ e.preventDefault();
+ jq('#linktype_panel div', document).removeClass('current');
+ jq(this, document).parent('div').addClass('current');
+ switch (jq(this).attr('href')) {
+ case "#internal":
+ self.displayPanel('browse');
+ self.getCurrentFolderListing();
+ break;
+ case "#external":
+ self.displayPanel('externalimage');
+ break;
+ }
+ });
+
+ jq('#previewimagebutton', document).click(function (e) {
+ var url = jq('#imageurl', document).val();
+ e.preventDefault();
+ jq('#imgpreview', document).html('<img src="' + url + '" />');
+ });
+
if (selected_node.get(0).tagName && selected_node.get(0).tagName.toUpperCase() === 'IMG') {
/** The image dialog was opened to edit an existing image element. **/
this.editing_existing_image = true;
@@ -309,34 +331,42 @@ BrowserDialog.prototype.init = function () {
}
});
- scaled_image = this.parseImageScale(selected_node.attr("src"));
+ if (selected_node.get(0).classList.contains('external-image')) {
+ self.displayPanel('externalimage');
+ jq('#linktype_panel div', document).removeClass('current');
+ jq('#external_link', document).addClass('current');
+ jq('#imagetitle', document).val(selected_node.get(0).alt);
+ jq('#imageurl', document).val(selected_node.get(0).src);
+ } else {
+ scaled_image = this.parseImageScale(selected_node.attr("src"));
- // Update the dimensions <select> with the corresponding value.
- jq('#dimensions', document).val(scaled_image.scale);
+ // Update the dimensions <select> with the corresponding value.
+ jq('#dimensions', document).val(scaled_image.scale);
- if (scaled_image.url.indexOf('resolveuid/') > -1) {
- /** Handle UID linked image **/
+ if (scaled_image.url.indexOf('resolveuid/') > -1) {
+ /** Handle UID linked image **/
- current_uid = scaled_image.url.split('resolveuid/')[1];
+ current_uid = scaled_image.url.split('resolveuid/')[1];
- // Fetch the information about the UID linked image.
- jq.ajax({
- 'url': this.editor.settings.portal_url + '/portal_tinymce/tinymce-getpathbyuid?uid=' + current_uid,
- 'dataType': 'text',
- 'type': 'GET',
- 'success': function (text) {
- // Store the absolute URL to the UID referenced image
- self.current_url = self.getAbsoluteUrl(self.editor.settings.document_base_url, text);
- // Store the image link as UID or full URL based on policy
- self.current_link = self.editor.settings.link_using_uids ? scaled_image.url : self.current_url;
+ // Fetch the information about the UID linked image.
+ jq.ajax({
+ 'url': this.editor.settings.portal_url + '/portal_tinymce/tinymce-getpathbyuid?uid=' + current_uid,
+ 'dataType': 'text',
+ 'type': 'GET',
+ 'success': function (text) {
+ // Store the absolute URL to the UID referenced image
+ self.current_url = self.getAbsoluteUrl(self.editor.settings.document_base_url, text);
+ // Store the image link as UID or full URL based on policy
+ self.current_link = self.editor.settings.link_using_uids ? scaled_image.url : self.current_url;
- self.getFolderListing(self.getParentUrl(self.current_url), 'tinymce-jsonimagefolderlisting');
- }
- });
- } else {
- /** Handle directly linked image **/
- this.current_link = this.getAbsoluteUrl(this.editor.settings.document_base_url, scaled_image.url);
- this.getFolderListing(this.getParentUrl(this.current_link), 'tinymce-jsonimagefolderlisting');
+ self.getFolderListing(self.getParentUrl(self.current_url), 'tinymce-jsonimagefolderlisting');
+ }
+ });
+ } else {
+ /** Handle directly linked image **/
+ this.current_link = this.getAbsoluteUrl(this.editor.settings.document_base_url, scaled_image.url);
+ this.getFolderListing(this.getParentUrl(this.current_link), 'tinymce-jsonimagefolderlisting');
+ }
}
} else {
/** The image dialog was opened to add a new image. **/
@@ -546,43 +576,63 @@ BrowserDialog.prototype.insertLink = function () {
*
*/
BrowserDialog.prototype.insertImage = function () {
- var attrs,
+ var attrs = {},
selected_node = this.editor.selection.getNode(),
href = this.current_link,
+ active_panel = jq('#linktype .current a', document).attr('href'),
dimension,
classes;
- // if we have absolute url, make sure it's relative
- if (href.indexOf('resolveuid/') > -1) {
- href = 'resolveuid/' + href.split('resolveuid/')[1];
- }
-
- this.tinyMCEPopup.restoreSelection();
-
- // Fixes crash in Safari
- if (tinymce.isWebKit) {
- this.editor.getWin().focus();
- }
-
- // Append the image scale to the URL if a valid selection exists.
- dimension = jq('#dimensions', document).val();
- if (dimension !== "") {
- href += '/' + dimension;
- }
-
// Pass-through classes
classes = [].concat(this.current_classes);
// Alignment class
classes.push(jq.trim(jq('#classes', document).val()));
- // Image captioning
- if (this.editor.settings.allow_captioned_images && jq('#caption', document).is(':checked')) {
- classes.push('captioned');
+
+ if (active_panel === "#external") {
+ href = jq('#imageurl', document).val();
+ if (jq.inArray('external-image', classes) === -1) {
+ classes.push('external-image');
+ }
+ jq.extend(attrs, {
+ alt: jq('#imagetitle', document).val(),
+ title: jq('#imagetitle', document).val()
+ });
+ } else {
+ // we have internal image panel
+
+ // remove external-image if present
+ if (jq.inArray('external-image', classes) > -1) {
+ classes.splice(jq.inArray('external-image', classes), 1);
+ }
+
+ // Image captioning
+ if (this.editor.settings.allow_captioned_images && jq('#caption', document).is(':checked')) {
+ classes.push('captioned');
+ }
+
+ // if we have absolute url, make sure it's relative
+ if (href.indexOf('resolveuid/') > -1) {
+ href = 'resolveuid/' + href.split('resolveuid/')[1];
+ }
+
+ this.tinyMCEPopup.restoreSelection();
+
+ // Fixes crash in Safari
+ if (tinymce.isWebKit) {
+ this.editor.getWin().focus();
+ }
+
+ // Append the image scale to the URL if a valid selection exists.
+ dimension = jq('#dimensions', document).val();
+ if (dimension !== "") {
+ href += '/' + dimension;
+ }
}
- attrs = {
+ jq.extend(attrs, {
'src' : href,
'class' : classes.join(' ')
- };
+ });
if (selected_node && selected_node.nodeName.toUpperCase() === 'IMG') {
// Update an existing <img/> element
@@ -596,13 +646,15 @@ BrowserDialog.prototype.insertImage = function () {
}
// Update the Description of the image
- jq.ajax({
- 'url': jq('#description_href', document).val() + '/tinymce-setDescription',
- 'type': 'POST',
- 'data': {
- 'description': jq('#description', document).val()
- }
- });
+ if (active_panel === "#internal") {
+ jq.ajax({
+ 'url': jq('#description_href', document).val() + '/tinymce-setDescription',
+ 'type': 'POST',
+ 'data': {
+ 'description': jq('#description', document).val()
+ }
+ });
+ }
this.tinyMCEPopup.close();
};
@@ -1105,6 +1157,16 @@ BrowserDialog.prototype.displayPanel = function(panel, upload_allowed) {
} else {
jq('#addimage_panel', document).addClass('hide');
}
+
+ // handle external image
+ if (panel === "externalimage") {
+ jq('#externalimage_panel', document).removeClass('hide');
+ jq('#insert-selection', document).removeAttr('disabled');
+ jq('#imagetitle', document).parents('.field').after(jq('#classes', document).parents('.field'));
+ } else {
+ jq('#externalimage_panel', document).addClass('hide');
+ jq('#caption', document).parents('.field').after(jq('#classes', document).parents('.field'));
+ }
};
// Link type methods
View
31 Products/TinyMCE/skins/tinymce/plugins/plonebrowser/plonebrowser.htm.pt
@@ -13,7 +13,7 @@
<body id="plonebrowser">
<div class="dialog-wrapper icons-on" id="content">
- <div id="linktype_panel" class="hide">
+ <div id="linktype_panel">
<div id="linktype">
<div id="internal_link" class="current">
<img src="img/internal_link.png" />
@@ -165,6 +165,35 @@
</div>
+ <div id="externalimage_panel" class="cell width-full position-0 hide">
+ <form name="externalimage_form" id="externalimage_form">
+ <div class="field">
+ <label for="imageurl" i18n:domain="plone.tinymce" i18n:translate="">Insert image from URL</label>
+ <div class="widget">
+ <input type="text" name="imageurl" id="imageurl" value="" />
+ </div>
+ </div>
+
+ <div class="field">
+ <label for="imagetitle" i18n:domain="plone.tinymce" i18n:translate="">Title</label>
+ <div class="widget">
+ <input type="text" name="imagetitle" id="imagetitle" value="" />
+ </div>
+ </div>
+
+ <button type="previewimage"
+ id="previewimagebutton"
+ class="context plonebutton"
+ name="previewimagebutton"
+ value="Preview"
+ i18n:translate=""
+ i18n:domain="plone.tinymce">Preview</button>
+ </form>
+
+ <div id="imgpreview">
+ </div>
+ </div>
+
<!-- link panels -->
<div id="external_panel" class="hide">
<div class="row">
Something went wrong with that request. Please try again.