Solved

Working with tinyMCE

Posted on 2013-01-01
17
552 Views
Last Modified: 2013-11-19
I could use some tactical help or some help working with tinyMCE. So if you have experience with tinyMCE, excellent!

I'm working with tinyMCE on a page containing sets of content needing editing. Each set is its own form; and in each form instances of tinyMCE are opened as needed on a textarea.

The textareas of each form contain HTML that likely includes images.
A hidden input in each form contains the URL of an image selected from the HTML content; and should, when finished, contain the URL of whichever image the user selects. (Clicking on an image indicates you are selecting that image. There can be only one.)

The goal is two-fold:

1. after or upon initializing each instance of tinyMCE, apply a class of "selected-img" to the image in the editor with src = value of the hidden input.

2. allow a user, when working with the editor's content, to click on any image and thereby have all other instances of .selected-img removed w/i that editor, .selected-img applied to the clicked image, and the URL from the src attribute of the clicked image saved to the hidden input.

FWIW, here's the structure for each form. The pertinent textarea and hidden input are the last 2 elements.
<form>
	<input type="hidden" />
	<input type="hidden" />

	<div class="listing-header">
		<img src="..." alt="" class="listing-portrait" />
		<span class="listing-metadata">metadata</span>
		...etc...
		<ul class="listing-controls">
			<li class="listing-control">
				<label>
				<input type="checkbox" />
			</li>
			...etc...
			<li class="listing-control">
				<input type="image" value="save" />
			</li>
		</ul><!-- .listing-controls -->
	</div><!-- .listing-header -->

	<div class="listing-body">
		<input type="text" />
		<textarea id="ListingContent000" name="ListingContent" class="listing-content-area">CONTENT</textarea>
		<input type="hidden" id="ListingImgURL000" name="ListingImgURL" value="selectedImgURL" />
	</div><!-- .listing-body -->

</form>

Open in new window


I have written Javascript that successfully does what I want when applied directly (not to the textarea, but to a div containing the same content); but now I have to adapt it to actually work with tinyMCE.

// Functionality to select and denote image to display with entry:
$('div.listing-content-area img').each(function() {
// To select a reference to the textarea containing each image.
	var relTextarea = $(this).parents("div[id^='ListingContent']").first();
// ... and the URL contained within its src attribute.
	var selectedImgURL = $(this).attr('src');
	
// Checks whether each image's src matches that saved in the hidden input.
	if ( selectedImgURL == relTextarea.siblings("input[id^='ListingImgURL']").first().attr('value') ) {
		$(this).addClass('selected-img');
	}
// You can ignore this piece. It just keeps any links around an image from firing when clicked on.
	$(this).parents('a').first().click(function(event) {
		event.preventDefault();
	});
	
// Adds the desired functionality that manages .selected-img, and saves the src to the hidden input.
	$(this).click(function() {
// Next line has to be here, otherwise my variables lost context by the time the image was clicked on.
		var relContainer = relTextarea;
// Here's where I remove all existing instances of .selected-img
		if ( $('img.selected-img', relContainer).length > 0 ) 
			$('img.selected-img', relContainer).removeClass('selected-img');
// Here's where I save the clicked image's src to the hidden input.
		relContainer.siblings("input[id^='ListingImgURL']").first().attr('value', $(this).attr('src'));
// Here's where I apply the class to the chosen (clicked) image.
		$(this).addClass('selected-img');
	});
});

Open in new window


So...
I'm trying to decide:
• Should I continue trying to figure out how to create a plugin for tinyMCE?
If I do, is this going to go well as far as trying to interact w/ elements outside tinyMCE and its iFrame (the hidden input)?
• Screw plugins, and just try adapting my code to target tinyMCE's iFrame directly but from outside tinyMCE?
• Screw tinyMCE, and just devise more convoluted paths to allow editing and marking the content and saving it back to a database?

One of the hang-ups I ran into (naturally) is that HTML in a textarea is not rendered by the browser. I have to have a way to not make the user work w/ HTML, but still get the content into an input that gets saved back to the database.

Using the WYSIWYG on a textarea still seems the best option to me.
0
Comment
Question by:universalglove
  • 10
  • 5
17 Comments
 

Author Comment

by:universalglove
Comment Utility
I'm confident I could get there on my own, but I really don't want to learn all the ins and outs of tinyMCE (or any other WYSIWYG) while on vacation; and tinyMCE's documentation is rather, ummm, lacking in usefulness and clarity, in my opinion.

I have found code for tinyMCE plugins that will act when images are clicked on.

Next, I'll either determine whether a command w/i there can act outside of tinyMCE...
or I'll see whether I can target those images outside of tinyMCE.
Although, now I'm remembering I tried that already, but I don't know whether I didn't get the code right or whether tinyMCE preempts any outside interference when clicking on an image.
(That's where I could use some information on tinyMCE's internal workings...)
0
 
LVL 11

Assisted Solution

by:mcnute
mcnute earned 500 total points
Comment Utility
Your user is selecting an image which is already on your server right?
Why don't you just put a div in between your form which will display the image by injecting the html for the image in that div with jquery:

html:
<a href="path/to/image/here.png" title="some title">image 1</a>

<form ...

<input type="hidden" name="imageurl" value="" id="image-url" />
<div class="imagedivcontainer">
</div>
</form>

Open in new window


JQuery:

$('a.images').click(function(){
var src = $(this).attr('href');
$('#image-url').val(src);
$('.imagedivcontainer').html(
'<img src="'+src+'" alt="some image alternative text" />' 
);

});

Open in new window

0
 

Author Comment

by:universalglove
Comment Utility
No, the images are from other sites. There will be unknown quantities of them within each of the textareas.

And the marked one is being noted for display later on a different, public page. All the images are already visible w/i the textarea (once tinyMCE is opened on it).

I'm essentially making an RSS feed for "members", where updates from their own sites will be displayed in one central place, but moderated. So, it's not as straight-forward as RSS feeds seem to have been meant to be - there's lots of approval and editing of the feed content.
The moderators - the users who are working with the page I'm making - will be selecting just one image (if any) for display with any teaser text.

The public page that displays the feed is already functional and in use. I'm trying to automate the back-end moderation as much as possible. The server-side script I've made that draws in the RSS feeds and saves them to a database also finds all images and saves the URL of the 1st one as a default choice.
So, now I'm trying to easily enable the moderators to select other display options - w/o having to work with the HTML of a feed's entry directly anymore. (There's lots of copying and pasting of feed content from Google Reader into the public page. It's rather appalling, and about time we automated as much of it as possible.)

So, it's not about displaying the selected image itself here, as I think you might've understood, if I'm understanding in turn the suggestion you made. It's about being able to select and note for later which image was selected, along with other changes (like marking where to cut off the feed content).
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
No, I've understood very well. See my code. I've taken in into account that you need the hidden textfield populated with the url of the image to send that to your database and store it. Once you click on the image in the textarea, the hidden field in your form will be populated with the value of the source of that image. Since they come from other sites their paths should be absolute in order to display in your feed.

You will send the form to some place of data organization (database) where all your settings are held. So my solution really points in the right direction.

Otherwise provide us some code and tell us more about how you store which images is to be displayed and where the text in your feed is beeing truncated. Maybe I can give you a more precise suggestion/solution.
0
 

Author Comment

by:universalglove
Comment Utility
Oh. I think I see what you're suggesting, then.
Since I have (or even if I hadn't) saved each image's URL, you're thinking to take each image and lay them all out in a separate visual list, essentially; and then the user clicks on whichever (outside the form, or not) to note which they want.

Yes, that would work.
That was actually my original plan. I'll have to remember why I veered away from that. It's been several months of working on this intermittently, with lots of distractions to go off and do other things. ... I think I steered away from the sidecar list because w/o extra effort, the images were already being displayed in the feed's content, and I just decided to make use of that instead.
So I'm doing it a harder, but more integrated, singular sort of way...
0
 

Author Comment

by:universalglove
Comment Utility
Anyway, I have gotten this far w/ a tinyMCE plugin:

(function() {
tinymce.create('tinymce.plugins.GGSelectImage', {
	init : function(ed, url) {
		var selImgURL = $(ed).siblings("input[id^='GGListingImgURL']").first().attr('value');
			
		tinymce.each(ed.dom.select('img'), function(img) {
			var imgURL = ed.dom.getAttrib(img, 'src');
			if (imgURL = selImgURL) {
				ed.dom.setAttrib(img, 'class', 'selected-img');
			}
		}); // end check for and assignment of .selected-image
		ed.execCommand('mceRepaint');

		ed.onClick.add(function(ed, evt){
			// Firefox
			if (evt.explicitOriginalTarget){ // this is the img-element
				if (evt.explicitOriginalTarget.nodeName.toLowerCase() == 'img'){
					ed.dom.removeClass(ed.dom.select('img'), 'selected-img');
					$(ed).siblings("input[id^='GGListingImgURL']").first().attr('value', ed.dom.getAttrib(evt.explicitOriginalTarget, 'src'));
					ed.dom.addClass(evt.explicitOriginalTarget, 'selected-img');
					ed.execCommand('mceRepaint');
				}
			}
			// IE
			else if (evt.target) { // this is the img-element
				if (evt.target.nodeName.toLowerCase() == 'img'){
					ed.dom.removeClass(ed.dom.select('img'), 'selected-img');
					$(ed).siblings("input[id^='GGListingImgURL']").first().attr('value', ed.dom.getAttrib(evt.target, 'src'));
					ed.dom.addClass(evt.target, 'selected-img');
					ed.execCommand('mceRepaint');
				}
			}
		}); // end click event
	}
});
// Register plugin using the add method
tinymce.PluginManager.add('GGselectimage', tinymce.plugins.GGSelectImage);
})();

Open in new window


It doesn't work, failing with a blank replacement of the textarea and an error in the console of "ed.dom is undefined".
I think that's because I need to figure out how to set the script in action once a new editor instance is initialized, not when tinyMCE itself is initialized (just like I wrote and ignored in my original scheme).

Now that you've reminded me of my original plan to accomplish this, if I can't get tinyMCE to work soon, I can revert back to the 1st thought. I should still have the layout and css for that 1st plan in older saved versions.

For now, I wish to obstinately pursue the current thought, now that I've gotten as far as I have with it and spent as much time on tinyMCE as I already have.
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
I've pasted your code into jsfiddle and got this error when clicking jslint button on top.

(function() {
tinymce.create('tinymce.plugins.GGSelectImage', {
    init : function(ed, url) {
        var selImgURL = $(ed).siblings("input[id^='GGListingImgURL']").first().attr('value');
            
        tinymce.each(ed.dom.select('img'), function(img) {
            var imgURL = ed.dom.getAttrib(img, 'src');
            if (imgURL == selImgURL) {
                ed.dom.setAttrib(img, 'class', 'selected-img');
            }
        }); // end check for and assignment of .selected-image
        ed.execCommand('mceRepaint');

        ed.onClick.add(function(ed, evt){
            // Firefox
            if (evt.explicitOriginalTarget){ // this is the img-element
                if (evt.explicitOriginalTarget.nodeName.toLowerCase() == 'img'){
                    ed.dom.removeClass(ed.dom.select('img'), 'selected-img');
                    $(ed).siblings("input[id^='GGListingImgURL']").first().attr('value', ed.dom.getAttrib(evt.explicitOriginalTarget, 'src'));
                    ed.dom.addClass(evt.explicitOriginalTarget, 'selected-img');
                    ed.execCommand('mceRepaint');
                }
            }
            // IE
            else if (evt.target) { // this is the img-element
                if (evt.target.nodeName.toLowerCase() == 'img'){
                    ed.dom.removeClass(ed.dom.select('img'), 'selected-img');
                    $(ed).siblings("input[id^='GGListingImgURL']").first().attr('value', ed.dom.getAttrib(evt.target, 'src'));
                    ed.dom.addClass(evt.target, 'selected-img');
                    ed.execCommand('mceRepaint');
                }
            }
        }); // end click event
    }
});
// Register plugin using the add method
tinymce.PluginManager.add('GGselectimage', tinymce.plugins.GGSelectImage);
})();

Open in new window


Maybe that solves some issues. Tell us what happened.

I've saved the fiddle so you can work with it, too.
fiddle-tinymce
Bildschirmfoto-2013-01-04-um-00..png
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:universalglove
Comment Utility
Oh, hehe. I apparently should have refreshed my memory on the differences between the comparison operators when I noticed them the other day elsewhere in a script. Couldn't remember what === did, and was thinking == was comparison and data type - their usage was offset in my brain by one. I've been working in VBscript too long now...

Anyway, alas... changing = to == changed nothing.

However, I'm starting off today working on a realization that I'm probably handling the plugin incorrectly. I'm trying to outright run some code while initializing the plugin; but that code needs to be run while initializing each instance of a tinyMCE editor.

Most of the plugins I'm looking over for comparison add commands and buttons and things that trigger later, but looking over them again today I found this method in one:

ed.onInit.add(function() {});

Open in new window


Going to try that out shortly.

I'm very close, though, to reverting to the list-of-images scheme that you brought me back to. I remember now why I gave up on that. I was trying to be efficient and run all the SQL queries on the page during an earlier data prep stage, but I couldn't successfully separate out the many images per one article. The recordset seemed to stuff all the images in one field, and I couldn't make it hand them back out, even though I found a webpage that specifically addressed handling that issue.

Now that you brought me back to the separate image list notion, I've been thinking about that and seeing now I could easily run a 2nd query to grab the images while cycling through the data to draw out each article's form. I'd have the right context then to easily associate each image set with its article. I was trying before to be minimalist and not have to run several queries and devise another mechanism to associate images and articles.

mcnute, thanks for being a sport and reading my journals thus far. I'll keep you posted on what works or which direction I go.
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
It was and will be a pleasure to accompany you.
0
 

Author Comment

by:universalglove
Comment Utility
Hoohoohoo!
It's close!
I didn't try onInit, because I found onLoadContent.
I need to work out the reference to the hidden input, and that is all it needs.
(If I hard-code or remove the pieces that refer to the hidden input (e.g. selImgURL): it successfully runs the onLoadContent part, and when I click on an image, it successfully removes the class and reapplies it to the clicked image.)

Plus, if I can't eke out a relative reference using jQuery or some other info from tinyMCE, I should be able to go the brute force route and grab what I need by slicing up the id of the editor instance and using the unique part of it to create a reference to the appropriate hidden input.

(function() {
tinymce.create('tinymce.plugins.GGSelectImage', {
	init : function(ed, url) {
		ed.onLoadContent.add(function() {
			var selImgURL = 'http://www.example.com/images/some_image.jpg';
			//var selImgURL = $(ed).siblings("input[id^='GGListingImgURL']").first().attr('value');
				
			tinymce.each(ed.dom.select('img'), function(img) {
				var imgURL = ed.dom.getAttrib(img, 'src');
				if (imgURL == selImgURL) {
					ed.dom.setAttrib(img, 'class', 'selected-img');
				}
			}); // end check for and assignment of .selected-image
			ed.execCommand('mceRepaint');
		});

		ed.onClick.add(function(ed, evt){
			// Firefox
			if (evt.explicitOriginalTarget){ // this is the img-element
				if (evt.explicitOriginalTarget.nodeName.toLowerCase() == 'img'){
					ed.dom.removeClass(ed.dom.select('img'), 'selected-img');
					//$(ed).siblings("input[id^='GGListingImgURL']").first().attr('value', ed.dom.getAttrib(evt.explicitOriginalTarget, 'src'));
					ed.dom.addClass(evt.explicitOriginalTarget, 'selected-img');
					ed.execCommand('mceRepaint');
				}
			}
			// IE
			else if (evt.target) { // this is the img-element
				if (evt.target.nodeName.toLowerCase() == 'img'){
					ed.dom.removeClass(ed.dom.select('img'), 'selected-img');
					//$(ed).siblings("input[id^='GGListingImgURL']").first().attr('value', ed.dom.getAttrib(evt.target, 'src'));
					ed.dom.addClass(evt.target, 'selected-img');
					ed.execCommand('mceRepaint');
				}
			}
		}); // end click event
	}
});
// Register plugin using the add method
tinymce.PluginManager.add('GGselectimage', tinymce.plugins.GGSelectImage);
})();

Open in new window

0
 

Accepted Solution

by:
universalglove earned 0 total points
Comment Utility
Yeehaw! Got it!
IE works, but it (as usual) is slightly goofy. I'm guessing it selects any containers (like links) around the image 1st, then, on a 2nd click, selects the image itself and applies the class, etc. Firefox and Chrome work on the 1st click.

(function() {
tinymce.create('tinymce.plugins.GGSelectImage', {
	init : function(ed, url) {
		ed.onLoadContent.add(function() {
			var selImgURL = $('#' + ed.id + '_parent').siblings("input[id^='GGListingImgURL']").first().attr('value');
				
			tinymce.each(ed.dom.select('img'), function(img) {
				var imgURL = ed.dom.getAttrib(img, 'src');
				if (imgURL == selImgURL) {
					ed.dom.setAttrib(img, 'class', 'selected-img');
				}
			}); // end check for and assignment of .selected-image
			ed.execCommand('mceRepaint');
		});

		ed.onClick.add(function(ed, evt){
			// Firefox
			if (evt.explicitOriginalTarget){ // this is the img-element
				if (evt.explicitOriginalTarget.nodeName.toLowerCase() == 'img'){
					ed.dom.removeClass(ed.dom.select('img'), 'selected-img');
					$('#' + ed.id + '_parent').siblings("input[id^='GGListingImgURL']").first().attr('value', ed.dom.getAttrib(evt.explicitOriginalTarget, 'src'));
					ed.dom.addClass(evt.explicitOriginalTarget, 'selected-img');
					ed.execCommand('mceRepaint');
				}
			}
			// IE
			else if (evt.target) { // this is the img-element
				if (evt.target.nodeName.toLowerCase() == 'img'){
					ed.dom.removeClass(ed.dom.select('img'), 'selected-img');
					$('#' + ed.id + '_parent').siblings("input[id^='GGListingImgURL']").first().attr('value', ed.dom.getAttrib(evt.target, 'src'));
					ed.dom.addClass(evt.target, 'selected-img');
					ed.execCommand('mceRepaint');
				}
			}
		}); // end click event
	}
});
// Register plugin using the add method
tinymce.PluginManager.add('GGselectimage', tinymce.plugins.GGSelectImage);
})();

Open in new window

0
 

Author Comment

by:universalglove
Comment Utility
I've requested that this question be closed as follows:

Accepted answer: 0 points for universalglove's comment #a38746008
Assisted answer: 500 points for mcnute's comment #a38736101

for the following reason:

mcnute, I'm giving you the points and such since you were helpful (and the only responder) and did offer a good, working option for figuring out how to select the images w/o messing w/ tinyMCE. That satisfies the part of my question asking for some tactical advice.

But I am giving "Best Solution" to the final tinyMCE plugin I worked out, since that's the most ¿seamless? solution and directly works out where I was headed at the moment.

Thanks again for helping out! I do appreciate it.
0
 

Author Comment

by:universalglove
Comment Utility
Oh. Does "closing" the question mean mcnute won't get any points and the thread will disappear?
I didn't want that.
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
I can try to object the objection ;-) The moderator will take care of giving the points. Thank you!
0
 

Author Comment

by:universalglove
Comment Utility
Ah, okay. Messed that one up. Didn't remember it saying "closing" or offering a chance to object when I've accepted solutions normally.

Thank you all.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now