Well, the editor is the most important part of creating a blog. I only use tinymce and NOT tinymce2. First, extract the zip file to your http://yourdomain/yournucleuscms/nucleus/plugins/ folder, go to admin page and install the plug-in. The default plug-in is missing a few plug-ins and options: italic, fontselect, spellchecker... I like to you use these, therefore, I must add them in the options. Click edit options and add these just like the video below. All of the icons are pretty self-explanatory if you ever use ms-word of other rich text editors. I like this tinymce because if we need to embed java codes, we can use the html editor which will actually works which tinymce2 doesn't. The media manager is also has more features like resize with constraint option which tinymce2 doesn't have.

Let's try to add a picture in the body of our item. Click the media add picture (the little tree), there will be this pop up window. If we need to upload pictures from the hard drive to the media folder (default=http://yourdomain/yournucleuscms/media/1/), but it will show all the folder inside media folder. If you want other users to use the same pictures, don't select private but select some... ... other folders.

The original plugins doesn't come with all options preloaded. We need to add more tools in the options.

For the plugins, select all these and paste over the tinymce_plugin column

safari,style,fullscreen,advimage,paste,advlink,media,contextmenu,inlinepopups,table, advhr, spellchecker, emotions, preview, searchreplace, print, save, insertdatetime

For the toolbar 1, select all these and paste over the options column

save,print,undo,redo,|,italic,bold,forecolor,backcolor,formatselect,fontselect,fontsizeselect,styleprops,removeformat, code,|, fullscreen, help, search, replace, insertdate, inserttime

For the toolbar 2, select all these and paste over the options column

image,media,link,unlink,anchor,|,bullist,numlist,|,blockquote,outdent,indent,|,justifyleft,justifycenter, justifyright,|, table,|, advhr,|, pastetext, pasteword, spellchecker, emotions, preview, cut, paste, copy

With all these options, we should have a panel that looks like this

Installing tinymce 2.71p plugin and options (best view in hd and fullscreen)

Click to the browse icon to load or select pictures

If we want to upload then select a folder to upload to, private collection will be folder #1, which other users can't get to. If you want other to use then select other folder but the private collection.

When all the pictures are loaded in folders under /../media/ we can select the picture from any folder by select from the drop down menu

While we're in the folder, in case we have so many pictures and we want to see more pictures in the folder, click "next" ("previous") to see all the pictures in that folder

Or if we want to search for the picture that we know or by some keyword, then use filter

The newer pictures loaded in the folder will show up first, the oldest ones will be on the bottom. Now we select a picture with a size is bigger than 550 in width. General tab has the image description and the title, if we want the description when the mouse is over then type in the image description.

Next is the appearance, this picture is 1084 px in width, which will be well over our body, we always resize it to 550, it's the best. The alignment will be baseline, if we are going to have text to the right, then choose left, the vertical space & horizontal space are in pixel, they are the spaces between the text and the picture.

To resize just change the dimension, the width "1084" only because the height will be automatically adjusted (constraint is checked), we just add 5 pixel each in vertical & horizontal for example only since this one is baseline and in the middle of the screen as we formatted it.

This text has no horizontal spaces

between picture and text

and alignment is set to the

left of the body

 

 

This one has 15 pixels

in the horizontal space

and the picture is

aligned to the

left of the body

Now we have the picture on the body in the middle with 550pixels width, but the text in the picture is too small and we want it to show the original picture when this picture is clicked.

We need to make a link of the original picture to this resized one. Click the link button and select the same picture in the folder.

Add caption to this picture as larger view so when mouse over, readers know the link is for larger view.

If we want it to open in a new window, then click the drop down and select open in a new window.

In our case, we like to use the greybox for pop up pictures, we leave the option to open from this windows. Now we click the html button to add the action scripts in the pictures.

The script for showing full page is circled and put after href=picture, use the greybox advanced scripts for options.

When we're done with the page with all the pictures that pop up, here what our html looks like.

HTML editor in tinymce

We do need this html editor for adding html codes or embed java code to the item page for special functions like mouseover and mouseout like these pictures on the left and below. When we click the html icon, the html screen popup for us to write special html codes, like the codes for the mouseover and mouseout images.

 

Spell Checker

This is a very good feature in tinymce, it does help to check for mispelled or unknown words. Just need to turn on the spellchecker by clicking the abc icon and select language

It does underline the questionable words and when you click the word, it gives suggestions which is very helpful sometimes. We do have to turn it on every time we write/edit a new item.