Aligning images and wrapping text

Nov 18, 2011 at 9:57 PM

I've been fussing with this for a while now and I'm struggling to come up with the correct to align an inserted image so that the text will wrap around it.

Right now, if you have an image selected and then click on the justify left or right buttons it will wrap it with a DIV and use text-align. Is there a way to make sure just the traditional align="right" is added to the HTML instead?

I'd really appreciate any suggestions.

Nov 21, 2011 at 3:25 PM

I came up with a solution that seems to work, and wanted to get some feedback on it. It pretty much works with brute force, but gets the job done. The only draw back is that I get an "r.select" is not a function error. Doesn't seem to affect the function though.

$("#CmsElementContent").htmlarea({
	toolbar: ["html", "|",
			"forecolor", "increaseFontSize", "decreaseFontSize","orderedlist", "unorderedlist",
			"|", "indent", "outdent", "justifyleft", "justifycenter", "justifyright",
			"|", "bold", "italic", "underline", "|", "h1", "h2", "h3", "|", "link", "unlink",                
			{
				// This is how to add a completely custom Toolbar Button
				css: "image",
				text: "Insert Image",
				action: function(btn) {
					//Get Thumbnails and Insert img src
					$('#select_images').show();
				}
			},                
			{
				css: "imageLeft",
				text: "Align Image Left",
				action: function(btn) {
					var img_tag = $("<p/>").append(this.getRange().cloneContents()).html();
					//No Alignment
					if(img_tag.indexOf('align') < 0){
						var split_string = img_tag.split('<img ');
						var fixed_html = '<img align="left" ' + split_string[1];
					}
					//Aligned Left
					if(img_tag.indexOf('align="left"') > 0){
						var fixed_html = img_tag;
					}
					//Aligned Right
					if(img_tag.indexOf('align="right"') > 0){
						var split_string = img_tag.split('<img align="right" ');
						var fixed_html = '<img align="left" ' + split_string[0];
					}
					this.pasteHTML(fixed_html);
				}
			},                
			{
				css: "imageRight",
				text: "Align Image Right",
				action: function(btn) {							
					var img_tag = $("<p/>").append(this.getRange().cloneContents()).html();
					//No Alignment
					if(img_tag.indexOf('align') < 0){
						var split_string = img_tag.split('<img ');
						var fixed_html = '<img align="left" ' + split_string[1];
					}
					//Aligned Left
					if(img_tag.indexOf('align="left"') > 0){
						var split_string = img_tag.split('<img align="left" ');
						var fixed_html = '<img align="right" ' + split_string[0];
					}
					//Aligned Right
					if(img_tag.indexOf('align="right"') > 0){
						var fixed_html = img_tag;
					}
					this.pasteHTML(fixed_html);
				}
			}
		]
});

Jan 4, 2012 at 10:04 PM

Hi there,

I've been aiming for the same thing, and I've come up with something based on this, but cannot get it to work, and I'm wondering if anyone has any pointers!

I have this markup in my JhtmlArea, which when I flick between the HTML view and the friendly view shows a small image that I drew:

<span><img src="/Content/UserData/Images/129701904676214107-content-small.png" alt="image" title="image" width="50" height="56"></span>

 

I have created an "Align Right" and when you click it, the image and the containing span tag disappear.

When you flick back to the html view, all the above is gone from the markup in jhtmlArea. I use the following in the toolbar decalration:

 

{
                   css: "imageright",
                   text: "Align image right",
                   action: function (btn) {
                       // get the current selected markup (without creating the span it fails)
                       var imgTag = $("<span/>").append(this.getRange().cloneContents()).html();
                       
                       // these don't work
                       //while (imgTag.hasClass('img-left')) imgTag.removeClass('img-left');
                       //if (!imgTag.hasClass('img-right')) 
                       
                       // this adds correctly
                       imgTag = $(imgTag).addClass('img-right');
                       
                       // add into the jhtmlarea
                       this.pasteHTML(imgTag);
                       
                   }
}

 

When I hover in Chrome / IE's developer tools script debugger, I can see clearly that imgTag correctly shows the element containing the class 'img-left' and I can see that basically the content is still there.

Using this.pastHtml pastes the <span></span> without the image and pasteHTML pastes nothing whatsoever.

 

Can anyone else pinpoint what's wrong?

 

Cheers,

Ben

Jan 5, 2012 at 8:53 PM

All sorted. I created an align left, align right and remove Align buttons and the code looks like this:

 

// extension of jquery
jQuery.fn.outerHTML=function(s){ 
return s ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html();};


// and in the toolbar declaration:

{ css: "imageleft", text: "Align image left", action: function (btn) { var imgTag = this.getSelectedHTML(); var string = $(imgTag).removeClass('img-right').addClass('img-left').outerHTML(); this.pasteHTML(string); } }

, { css: "imagenone", text: "Remove image aligment", action: function (btn) { var imgTag = this.getSelectedHTML(); var string = $(imgTag).removeClass('img-left').removeClass('img-right').outerHTML(); this.pasteHTML(string); } }

, { css: "imageright", text: "Align image right", action: function (btn) { var imgTag = this.getSelectedHTML(); var string = $(imgTag).removeClass('img-left').addClass('img-right').outerHTML(); this.pasteHTML(string); } }

Only thing left to work out is how to make the jHtmlArea honour the alignment. It works in my page, but it needs to work in the editor.

Simple CSS:

img.img-left { float: left;margin-right: 30px; display: block; }
img.img-right { float: right; margin-left: 30px; display: block; }

Also, what's with all the span tags being added every time a button is pressed?