hak_tinymce WYSIWYG article editor

laptophobo · 2011-05-31 20:04:19

Okay. I’ll note not to add the javascript tag in the Head. But since I’ve not been introduced to GZip compressor (no idea what that is) I’ll just assume I’m fine for now. Thanks for your help on this matter!

cuda · 2011-06-20 19:38:59

@hakjoon It would be great to be able to use this plugin in conjunction with smd_thumbnail. Do you know where I would go about adding an extra button to the image popup screen to allow the user to pick more then just the default thumbnail?

hakjoon · 2011-06-21 01:58:22

So that code is here which is called from here

It’s honestly a big mess and I was never really happy with the current execution, but I was unable to find UI examples of image pickers that let you select between multiple sizes of images. If anyone has any suggestions/recommendations I’d love to hear/see them. smd_thumbnail integration seems like a great idea.

I’m hoping to be able to pick up coding stuff again in a couple weeks (been away from it too long), so hopefully I can give it some love. On the other hand if anyone else wants to takes stabs at improving stuff please fork away. I’m also thinking of putting this on github if that peaks anyone’s interest more.

cuda · 2011-06-21 05:55:13

Ok here is my quick and dirty solution…query the smd_thumbnail table for the thumbnail group names and insert them. So in the code plugin code replace:


if ($rs) {
                $out = array();
                while ($a = nextRow($rs)) {
                        extract($a);
                        $thumbclick ='';
                        $image["path"] = hu.$img_dir.'/'.$id.$ext;
                        $image["width"] = $w;
                        $image["height"] = $h;
                        $image["alt"] = (empty($alt)) ? "" : rawurlencode($alt);
                        $image["caption"] = (empty($caption)) ? "" : rawurlencode($caption);
                        $onclick = 'onclick=\'TxpImageDialog.insertImage(this,'.hak_tinymce::map_attribs($image).');return'.n.'false;\'';

                        $preview = $image;
                        $thumb = $image;

                        if($thumbnail) {
                                $thumb["path"] = hu.$img_dir.'/'.$id.'t'.$ext;
                                $thumb["width"] = $thumb_w;
                                $thumb["height"] = $thumb_h;
                                $thumb["alt"] = $image["alt"];
                                $thumb["caption"] = $image["caption"];
                                $preview = $thumb;
                                $thumbclick = 'onclick=\'TxpImageDialog.insertImage(this,'.hak_tinymce::map_attribs($thumb).');return'.n.'false;\'';
                                $thumbclick =   '<a href="#" '.$thumbclick.'><img src="img/pictures.png" width="18" height="18" title="'.hak_tinymce::mce_gTxt('insert_thumb').'" alt="'.hak_tinymce::mce_gTxt('insert_thumb').'" /></a>';
                        }

with:


//query smd_tumbnail table to get our thumb group names
$smd_thumbs = safe_rows("name", "smd_thumbnail","1=1 order by name");

	if ($rs) {
		$out = array();
		while ($a = nextRow($rs)) {
			extract($a);
			$thumbclick ='';
			$image["path"] = hu.$img_dir.'/'.$id.$ext;
			$image["width"] = $w;
			$image["height"] = $h;
			$image["alt"] = (empty($alt)) ? "" : rawurlencode($alt);
			$image["caption"] = (empty($caption)) ? "" : rawurlencode($caption);
			$onclick = 'onclick=\'TxpImageDialog.insertImage(this,'.hak_tinymce::map_attribs($image).');return'.n.'false;\'';

			$preview = $image;
			$thumb = $image;

			if($thumbnail) {
//define the preview thumb if it exists - must use smd_thumb sync
$preview = $thumb;
//go over the smd_names and generate the appropriate links and titles
                              foreach ($smd_thumbs as $key=>$value) {
                                 foreach ($value as $name ){
                                     //$thumb["path"] = hu.$img_dir.'/'.$id.'t'.$ext;
                                    $thumb["path"] = hu.$img_dir.'/'.$name.'/'.$id.$ext;
				    //$thumb["width"] = $thumb_w;
				    //$thumb["height"] = $thumb_h;
                                     $thumb["width"] = "";
				    $thumb["height"] = "";
				    $thumb["alt"] = $image["alt"];
				    $thumb["caption"] = $image["caption"];
				    //$preview = $thumb;
				    $thumbclick_click = 'onclick=\'TxpImageDialog.insertImage(this,'.hak_tinymce::map_attribs($thumb).');return'.n.'false;\'';
				$thumbclick .= 	'<a href="#" '.$thumbclick_click.'><img src="img/pictures.png" width="18" height="18" title="'.hak_tinymce::mce_gTxt('insert_thumb').' '.$name.'" alt="'.hak_tinymce::mce_gTxt('insert_thumb').' '.$name.'" /></a>';
                                  } 
                              }

Probably not the best way and there should be a check in there to see if smd_thumbnails is installed, some way to set the thumbnail height and width and to see if thumbnails are synced or not with smd_thumbnails but otherwise it seems to work

Last edited by cuda (2011-06-21 06:16:28)

hakjoon · 2011-06-22 03:44:57

Awesome. I’ll see if I can figure a way to properly integrate this. I’ve been thinking of breaking the image functionality into it’s own plugin to make it a bit more portable. This would allow different image plugins depending on the image support the site has.

Bloke · 2011-06-22 08:14:44

cuda/hakjoon

An FYI: in smd_thumbnail v0.21+ there’s a convenience function called smd_thumb_get_profiles($active, $order) that returns the defined profiles.

$active = 1 (default) to only retrieve active profiles; 0 to retrieve all profiles
$order = sort order of returned profiles (name, width, height, or quality)

Hope that helps.

Last edited by Bloke (2011-06-22 08:15:40)

Dimitri · 2011-06-22 12:50:06

Hi all…

Is there any way I can modify the plugin.

When I select an image in the text editor. I would like to have an extra field called “class”

So if some add a class such as “floatleft” or “floatright”

So the css I will add will be
floatleft { margin:0 10px 10px 0};
floatright { margin:0 0 10px 10px};

I am not a big fan of vspace and hspace….

hakjoon · 2011-06-22 13:03:50

Actually if you populate theme_advanced_styles it will give you a drop down with classes (didn’t actually know it did this)

I might actually change this up since that’s kind of hidden and rigid although it is nice to provide a controlled list of classes. Maybe expose an image specific set. If you want modify stuff the front end code for the plugin is all on bitbucket in the txpimage folder.

Dimitri · 2011-06-22 13:52:53

Where must I populate this snippet. I cant find “tinyMCE.init” anywhere?

hakjoon · 2011-06-22 15:39:46

The stuff in the initialization box in the hak_tinyMCE tab gets put in the tinyMCE.init block for you.

Dimitri · 2011-06-22 15:42:50

Obviosuly!!!!!! I missed that.

Thanx man

EDIT

Works beautifully!!!!

Last edited by Dimitri (2011-06-22 15:44:12)

cuda · 2011-06-22 19:15:24

@bloke

that would have made it slightly easier….Now if we can get multiple image uploading with smd_thumbnails support image handling will be even easier for clients

Textpattern CMS

Textpattern CMS support forum

#877 2011-05-31 20:04:19

Re: hak_tinymce WYSIWYG article editor

#878 2011-06-20 19:38:59

Re: hak_tinymce WYSIWYG article editor

#879 2011-06-21 01:58:22

Re: hak_tinymce WYSIWYG article editor

#880 2011-06-21 05:55:13

Re: hak_tinymce WYSIWYG article editor

#881 2011-06-22 03:44:57

Re: hak_tinymce WYSIWYG article editor

#882 2011-06-22 08:14:44

Re: hak_tinymce WYSIWYG article editor

#883 2011-06-22 12:50:06

Re: hak_tinymce WYSIWYG article editor

#884 2011-06-22 13:03:50

Re: hak_tinymce WYSIWYG article editor

#885 2011-06-22 13:52:53

Re: hak_tinymce WYSIWYG article editor

#886 2011-06-22 15:39:46

Re: hak_tinymce WYSIWYG article editor

#887 2011-06-22 15:42:50

Re: hak_tinymce WYSIWYG article editor

#888 2011-06-22 19:15:24

Re: hak_tinymce WYSIWYG article editor

Board footer