hak_tinymce WYSIWYG article editor

laptophobo · 2011-05-31 15:42:19

hak_tinymce not editing with IE.
Hello. I couldn’t locate this issue within the Textpattern forum (though I saw a mentioning of it for Drupal). I’m unable to utilize the had_tinymce using IE (v.9). But no problems with Firefox browser. I imagine this is something someone out there is experiencing. Can you help?

hakjoon · 2011-05-31 15:50:28

The latest TinyMCE version seems to work. You could replace the bundled version with the newest one and see if it works. Other than including the txp_image plugin the bundled version is 100% untouched from the version you get from moxiecode’s site.

I’ll see about updating the bundle but honestly they release versions faster than I have time to test and keep up.

Last edited by hakjoon (2011-05-31 15:51:15)

laptophobo · 2011-05-31 16:05:43

Thanks for the quick reply. I’m using version 9.9. Which is the newest one? And I’ve never replaced a plug-in before. Do I just uninstall the old version and load the new one?

Thanks much!

hakjoon · 2011-05-31 17:36:46

So you only need to replace the actual TinyMCE install. Basic steps:

Download the TinyMCE package from MoxieCode and extract it somewhere
Copy your current one to tiny_mce-old or something, for safe keeping.
Replace the current tiny_mce folder with teh one form the Moxiecode package.
At this point things should work (except the image plugin) if all the paths are right
from the old tiny_mce folder copy tiny_mce/plugins/txpimage over to the new tinyMCE install

At this point everything should work and you will be in the newer version. The development code actually has script to simplify thsi whole thing if you are in a Unix like OS, and want to try that out.

laptophobo · 2011-05-31 18:16:53

Yes. That worked. Thanks Patrick.

For the benefit of others, here’s what I did (and I have one final question for you, Patrick):

I copied the TinyMCE 3.4.2 (first level) package from the link you provided.
I renamed the current folder per your instructions.
I unzipped the contents and navigated to: tinymce > jscripts > tiny_mce. This is the folder I replaced within my site/textpattern folder.
I then copied the “txpimage” folder from the old version and pasted it into the new version of the folder tiny_mce.

My question is, and I saw this within your Configuration notes on your website, is do I need to place the following javascript into the Head of my HTML document?:
<script language=“javascript” type=“text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”></script>
<script language=“javascript” type=“text/javascript”>
tinyMCE.init({ theme : “advanced”, mode : “textareas”
});
</script>

hakjoon · 2011-05-31 19:46:33

The Textpattern plugin handles all of the required javascript references, so you don’t need to do anything.

Oh one thing I forgot. If you want to use the GZip compressor you need to download the compressor for PHP and copy the 2 tiny_mce_gzip files into the tiny_mce folder (there is a php one and a js)

This actually looks like it might be broken in the current bundle form my website.

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?

Textpattern CMS

Textpattern CMS support forum

#871 2011-05-31 15:42:19

Re: hak_tinymce WYSIWYG article editor

#872 2011-05-31 15:50:28

Re: hak_tinymce WYSIWYG article editor

#873 2011-05-31 16:05:43

Re: hak_tinymce WYSIWYG article editor

#874 2011-05-31 17:36:46

Re: hak_tinymce WYSIWYG article editor

#875 2011-05-31 18:16:53

Re: hak_tinymce WYSIWYG article editor

#876 2011-05-31 19:46:33

Re: hak_tinymce WYSIWYG article editor

#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

Board footer