Edit Image/Image Details - Replace button missing - javascript

I have a strange problem. I am dynamically populating content into Wordpress' tinyMCE editor. Part of this content is a placeholder image, that the user can then replace. The issue is when I click the 'pencil' icon to edit, I am not given the "Replace" button like I would any other images.
This is what I see: http://imgur.com/Bjoencj
This is what I expect, and works on images imported from the media library: http://imgur.com/fra3PfX
Notice, the replace button is present in the second example. I guess because the image is hard-linked and wordpress has no way of knowing if the image exists in the media library. How can I dynamically import an image so this functionality is present?

Are you inserting the placeholder image with the setContent function?
http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent
Perhaps you can try adding the placeholder image to your media library.

Related

Custom self closing tag in Tinymce

Has anyone created custom self-closing non-html tags with attributes in tinymce?
I have tried the same on the lines of tinymce's pagebreak feature.
I went ahead and unminified the plugin.min.js associated with pagebreak.
I started tweaking the code by adding a pop-up to accept attributes for the custom tag.
I'm inserting my custom tag which is displayed to the user on UI as a logo image.
On clicking 'source code'(<>) from toolbar of tinymce, we must see only :
<mycustom attr1='value1' attr2='value2'/>
To the end user its meaning will only be an image, similar to how page break works.In page break, a tag is inserted in tinymce on viewing src, but actually on UI of tinymce editor we see dotted lines image.
----------------------
----------------------
This is achieved using 'Resolvename' function in pagebreak plugin.min.js
I am able to create the desired tag and pass attributes inside it, however when I click 'source code'(<>) plugin,
I see the tag:
<mycustom attr1='value1' attr2='value2'/>
in code view of tinymce, but on clicking 'OK', everything becomes empty!!
I read in many places that configuration in tinymce plugin using:
extended_valid_elements : "mycustom[*]"
&
closed: /^(mycustom)$/
does the magic, but this did not work for me :(
I am not able to put screenshots because of low reputation:(.
Anybody has solution for this?
Thanks in advance.

Paste Image Into TinyMCE Editor

I am looking at ways to Paste an Image into TinyMCE editor, I have been googling it for a while, but couldn't find any related answer.
I can append an <img> with src content to the Editor(when i paste the image on the page other than inside the editor).
I am not able to paste it inside the Editor. I am using Javascript and jquery. Has anyone got an idea, how i could do this.
Enable paste_data_images
Setting paste_data_images to "true" will allow the pasted images,
while setting it to "false" will disallow pasted images.
You can't do that. TinyMCE and any other editor out there are giving you the functionality of creating rich text content. Displaying an image requires an URL and there is no URL to the image on your machine.
You need to upload the image to a server. You need to be able to access that image through a link. That link is what you insert into TinyMCE.

Adding images to JavaScript image viewer without <a> or <img> tags?

SHORT VERSION
Can anyone offer me a JS image viewer which supports mechanism of passing image array on construction?
LONGER VERSION
I'm using Colorbox to view some images on a page.
The situation I desire is:
I add an image to viewer from <a> tag on a thumbnail (using class name, for example)
I add more images passing image hrefs to viewer object (thumbnails of these images aren't shown)
When I click on my first (and only) thumbnail, a viewer opens with big version of thumbnail PLUS added images via viewer object.
The situation I got:
- I put empty <a> tags (which I also make invisible in CSS) pointing to additional images I want to add (which don't have thumbnails).
Can anyone offer me a JS image viewer which supports such mechanism of passing image array on construction?
You're almost there.
In Colorbox, you create groups of things using the rel option. For example:
$('.thumbnail').colorbox({rel: 'colorboxImg'})
The above code means that when you click something with a class of thumbnail, the image viewer will open up and load all of the items that have a class of colorboxImg.
So, the "situation you got" (as you put it) is pretty close. Add a bunch of your hidden <a> tags and make sure the hrefs point to the right images. Give those <a> tags a class of colorboxImg (or whatever you decide to name your group) and you're done. Keep in mind that the .thumbnail also needs to have a class of colorboxImg.
Let me know if you have any other cases you need to satisfy and we can edit this answer.

CKeditor with a url-prefix for image tags

I am using CKeditor to allow users to add images to their textboxes in a CMS.
A possible scenario is this: I develop a new site for a customer at http://developer.com/customer/a. The base url is "/customer/a". But when I ship the finished site to their domain www.customer-a.com, base url is changed to "/" and all image links are broken.
I would like to CKEditor to save something like {base_url}/media/my-image.jpg, but still keep all the WYSIWYG-features of CKeditor. Is there a hook or event in CKeditor where I could replace for e g {base_url} before the html i viewed?
I would appreciate any hints.
The hard way would be to use CKEditor's html parser and traverse whole html text when its loaded into editor and check/correct url of img tags.
Second option, although im not sure if it can be applied on your case, would be to make all images dependant on CKEDITOR.basePath and determine just that when CKEDITOR is initializing.
Or just develop on http://developer.com/customer/a, but let images be placed on www.customer-a.com even for development :)

Adding images to a javascript plugin

I'm creating an image gallery using the Galleria plugin.
I'm customised the styling of the gallery, editing css within the .js file, but there's one task that's got me stumpted:
I'm trying to replace the arrows that appear on either side of the image lightbox. They are currently created using type, but I need to replace these using images to be consistent with the rest of the site.
I've tried adding the images as I normally would using CSS, but it failed to display.
I'm not very experienced with Javascript so any tips on how to call images in CSS contained within Javascript would be gratefully received.
Here's a link to the code from the Javascript:
http://jsfiddle.net/tomperkins/TQDU7/
And here's a link to the plugin site if that helps:
http://galleria.aino.se/
Thanks in advance,
Tom Perkins
You just have to edit the "classic-map.png".. just make sure you map them in the same way ( put your button images at the same spot as the once already there )

Categories

Resources