troubleshooting Question

Working with tinyMCE

Avatar of universalglove
universalgloveFlag for United States of America asked on
JavaScriptWeb DevelopmentAJAX
15 Comments2 Solutions710 ViewsLast Modified:
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>

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');
	});
});

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.
ASKER CERTIFIED SOLUTION
universalglove

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 2 Answers and 15 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 15 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros