hak_tinymce WYSIWYG article editor

hakjoon · 2012-09-04 14:56:21

I’ll take a look see if i can figure what is happening.

Could be something with the new ajax stuff. I checked it out in the beta and everything seemed to work but maybe something changed since then.

hakjoon · 2012-09-06 02:40:41

@simoin: I think I tracked down the problem. It’s the same thing Kevin Potts was seeing. I’m working on fix. In the meantime if you hit save twice it will save the content.

It looks like the TXP async form submit runs before the tinyMCE handler that makes the content available to the post fires. I want to see if I cane figure out a more elegant way to handle this, but I think I have a working solution.

hakjoon · 2012-09-06 03:08:45

Version 1.0.2.2 uploaded which should hopefully fix the saving issues.

simoin · 2012-09-06 10:36:59

@hakjoon Thanks for the update, but unfortunately I still have to hit save twice for the article to save.

hakjoon · 2012-09-06 11:53:14

Blergh I introduced a bug when I was trying to clean up the code a bit. I uploaded 1.0.2.3 which should hopefully fix it (fingers crossed)

I hate writing javascript inside PHP.

simoin · 2012-09-06 13:00:36

@hakjoon Thanks, that’s fixed it! Appreciate you keeping this plugin up-to-date for the new Textpattern release,
It’s an essential plugin for client sites.

THE BLUE DRAGON · 2012-09-06 14:38:42

photonomad wrote:

Yes! I am aware of redbot’s awesome plugins. My question has to do with the fact that many clients want to add pictures and/or files throughout the text in the body of their articles. I’m looking for a really convenient way for them to do this.

I can write a small jQuery script for that.

I’m currently doing something like this using bot_image_upload and then grab the image from it and insert it into another place.
(take a look at this video at 17:55-18:50)

The only thing is that I don’t really know how to get the right position in the text inside of TinyMCE to insert the image to.
I think I need to set a placeholder is it right?
so if you cancel I’m removing the placeholder and if you do add an image I’m replacing the placeholder with it.
(I never looked inside the code to see how a wysiwyg works)

hakjoon · 2012-09-06 15:23:47

I would really like to just integrate this with bot_image_upload or something similar so that a consistent interface could be created for image/file insertion and linking. I’m not sure what the best way is to do that.

Anyone have any suggestions for which ones to look at I’ve been kind of out of the loop.

THE BLUE DRAGON · 2012-09-07 14:23:36

This will help you get started
I wrote a working code that will grab all the images from any bot_image_upload field,
and will insert the images where you want to:

var get_bot_images_check;

function get_bot_images(from_field,to_field){

	// Open bot_image_upload
	$(from_field).parent().find('.bot_add_image').click();

	get_bot_images_check = setInterval(function(){
		if($(from_field).val() != ''){
			var images_list = '';

			// Loop to get each image URL
			$($(from_field).val().split(',')).each(function(i,v){
				// Get image URL
				var image_url = $('.bot_iu_image_container.id'+v+' img').attr('src').split('?');

				// Add image to the list and set it's output
				images_list += $('<img alt="" />').attr('src', image_url[0]).wrap('<div />').parent().html();
			});

			// Append images
			$(to_field).val($(to_field).val() + images_list);

			// Clear images from bot_image_upload
			$(from_field).parent().find('.bot_image_delete').click();

			// Clear the checking of every second
			clearInterval(get_bot_images_check);
		}
	},1000);
}

You will need to call that function from somewhere with two parameters:
1. from_field = the ID of the field that use bot_image_upload and we are going to take the images from it.
2. to_field = the ID of the field that we want to append the images to.

Here’s an example:

$('.your_upload_button_class_name').click(function(event){
	event.preventDefault();

		get_bot_images('#article-image','#body');

	return false;
});

I think that the only thing you need to change in it it’s where to append the images to
// Append images
Because it’s TinyMCE you will need to go to the parent element of the field and look for that TinyMCE iframe inside it and append to it.
currently the code will only append the images to the field value, but that will not be shown in the TinyMCE editor.
So you can test it on a none TinyMCE field and see how it works.

Last thing is that you will probably want to clear the setInterval when the user click on ‘close’ in bot_image_upload
clearInterval(get_bot_images_check);

Of course you should hide the “from field”.

Last edited by THE BLUE DRAGON (2012-09-08 12:20:50)

Gocom · 2012-09-07 15:30:39

Gil, your code has a potential low-risk XSS vulnerability in it. Saying this as a fair warning. Just like with SQL statements or anything else where you are building different data from values, it’s a good mandatory practice to sanitize user input. This same also applies to JavaScript. The offending line in question is:

images_list += '<img src="'+image_url[0]+'" alt="" />';

When looking at various snippets and sites you may see the same above practice frequently, especially when it comes to DOM library driven JavaScript. While it’s convenient to do all HTML as a string and then inject it to the page, it’s only safe when you know exactly what the string is.

The above creates a markup from a straight string where the user given value is directly used without any preparations. This string is then inserted to a other field (body). Since the generated markup’s src value comes from an input field where the default contents come from HTTP POST/GET data, one could potentially execute following type of query:

HTTP/1.0 GET http://example.com/textpattern Images=" /><script type="text/javascript"> /* any JavaScript here */ </script>

And the code would in theory be injected to the field, where it gets picked up and added to the article body. This could be turned to a link and used to execute CSRF attack. It’s low-risk issue and even if possible requires previewing/excuting the code (i.e. saving an article, but executing would be taken care by WYSIWYG too).

When you end up building HTML from user input where the value is used as an attribute, instead of doing it as a string, use jQuery and the attr method:

$('<img alt="" />').attr('src', image_url[0]);

Which would do all needed sanitation for you. The value you are adding as an attribute will be sanitized and can not do more than be an attribute. This alone doesn’t yet prevent URL injections, but it’s a start.

THE BLUE DRAGON · 2012-09-07 18:20:49

Gocom wrote:

instead of doing it as a string, use jQuery and the attr method:

Thanks, do you mean like this?:
(I’m not that good when it comes to using objects)

var image = $('<img alt="" />').attr('src',image_url[0]);
images_list += $(image).prop('outerHTML');

Gocom · 2012-09-07 20:32:34

Normally you shouldn’t have to (and shouldn’t) convert it pack to a string representation. But if you do must, you can use the html method of jQuery. E.g.

$('<img alt="" />').attr('src', image_url[0]).html();

Which gives you properly sanitized img element.

Textpattern CMS

Textpattern CMS support forum

#1057 2012-09-04 14:56:21

Re: hak_tinymce WYSIWYG article editor

#1058 2012-09-06 02:40:41

Re: hak_tinymce WYSIWYG article editor

#1059 2012-09-06 03:08:45

Re: hak_tinymce WYSIWYG article editor

#1060 2012-09-06 10:36:59

Re: hak_tinymce WYSIWYG article editor

#1061 2012-09-06 11:53:14

Re: hak_tinymce WYSIWYG article editor

#1062 2012-09-06 13:00:36

Re: hak_tinymce WYSIWYG article editor

#1063 2012-09-06 14:38:42

Re: hak_tinymce WYSIWYG article editor

#1064 2012-09-06 15:23:47

Re: hak_tinymce WYSIWYG article editor

#1065 2012-09-07 14:23:36

Re: hak_tinymce WYSIWYG article editor

#1066 2012-09-07 15:30:39

Re: hak_tinymce WYSIWYG article editor

#1067 2012-09-07 18:20:49

Re: hak_tinymce WYSIWYG article editor

#1068 2012-09-07 20:32:34

Re: hak_tinymce WYSIWYG article editor

Board footer