WHY does UMBRACO come with a stripped down TINYMCE? I would like add the font selection, color and size functionality to the editor. I was able to add styles to the drop menu, but need so much more and now I need a step by step to add this if any one can help. Also I would like to know if the when I add images if there is any auto cropping / image sizing tool available.
I can't remember why the default tinyMce implementation is stripped down. But I guess is to make sure that the markup created by the editor is more clean/valid. I'm not sure how the font and color selection normally works in tinymce but if it inserts it by using the <FONT> tag it's really not a good idea.
But since it's open source you should be able to implement and use, whichever editor you prefer. I know others have done this with succes so probably there are some bright heads in here who can explain how to do it.
In order to make more options available to the editor you can go to "Developer" section and the open the "Datatypes" folder and then find the Rich text editor where you can make more options visible in the editor.
I have not experimented with this myself yet but you should also be able to add more commands by editing the tinyMceConfig.config file in the "Config" folder on the filesystem.
In regards to the image sizing there is a field on the "Rich text editor" datatype where you can choose wether or not inserted images should be scaled to a certain width, which is also defined on the datatype, which you can see by following the mentioned steps above.
For more advanced image formatting you can use the image cropper or perhaps imageGen - but to give you further instructions to this I think we need to know a bit more about what you are trying to solve with the rich text editor.
I hope this help! Please don't hesitate to ask further questions if there is something you are in doubt about :-)
Jan - thank you for such a quick reply! I was able to add styles to the editor and also enable more options that the editor displays in the developer section. when I visit the TinyMCE web site it shows a full functional demo of all that TinyMCE has to offer which would be nice to start with and then turn off as needed: http://tinymce.moxiecode.com/tryit/full.php I guess I need to further investigate the config files because at first glance it do not seem easy to get this fully functional. If someone had an example that would be great?
For the image size control - I was able to adjust it as you stated thank you. What I would like to do is have some one insert an image on the page and have it resized and resampled so that the file size and dimension are both reduced. Do you know af any options that could enable this?
As Thomas says you could have a look at the imageGen package...must admit I can't remember if the image file size gets reduced when it's rezised in the editor when you have set the max width...but I actually think it is. But it should be easy to check :-)
However imageGen in conjunction with an image inserted directly into the RTE is something that sounds troublesome in my ears since you would normally just write out the content of the RTE field in one large chunk. You can probably make some weird workarounds etc. but I doubt that it is worth the trouble.
If you will use imageGen then you should consider inserting images by using a macro with a mediaPicker parameter instead. Then you can easily use imageGen to scale down the image. And then the file size is also reduced. There are various settings you can play around with.
You could also look into the imageCropper datatype.
I keep coming back to this each time I get a break in projects and just wanted to give an update. I did verify that the images resize, but they do not resample so the file size does stay large which if it did resize and resample I would not need to start my search on how to do that. Might want to include that functionality in the next release :-)
I am currently investigating the imageCropper and imageGen - thanks for the help so far.
I need to back-track because I was testing the upload of new images using the RTE and found that each time I upload an image a folder is created on the server under the media folder which contains the original image and a thumbnail. The original file is the only one that displays in the media section and I cannot find any way to display or use that thumbnail using the interface.
1.) Does anyone have this same issue or know haw to show these upload files in the media interface?
2.) also the thumbnail is always 100 x 75 which I do not have set anywhere but I do have the max default size det to 200 in the datatype for the RTE.
3.) I also tested the imagecropper datatype and same thing happens - images are hidden in the interface but I see them on the server?
One other note about image cropper - I can get it to work fine when clicking an image in the media folder but if I add it to my homepage document type as another tab I get a dot net error about and instance of an object.
TinyMCE Full functionality
WHY does UMBRACO come with a stripped down TINYMCE? I would like add the font selection, color and size functionality to the editor. I was able to add styles to the drop menu, but need so much more and now I need a step by step to add this if any one can help. Also I would like to know if the when I add images if there is any auto cropping / image sizing tool available.
Hi Mike
Weclome to the fun world of Umbraco :-)
I can't remember why the default tinyMce implementation is stripped down. But I guess is to make sure that the markup created by the editor is more clean/valid. I'm not sure how the font and color selection normally works in tinymce but if it inserts it by using the <FONT> tag it's really not a good idea.
But since it's open source you should be able to implement and use, whichever editor you prefer. I know others have done this with succes so probably there are some bright heads in here who can explain how to do it.
In order to make more options available to the editor you can go to "Developer" section and the open the "Datatypes" folder and then find the Rich text editor where you can make more options visible in the editor.
I have not experimented with this myself yet but you should also be able to add more commands by editing the tinyMceConfig.config file in the "Config" folder on the filesystem.
In regards to controling font and color you can use styles to do this depending on the options you want the editors to have. You can read more about this in this WIKI entry: http://our.umbraco.org/wiki/recommendations/recommended-reading-for-content-editors/adding-styles-to-the-tinymce
In regards to the image sizing there is a field on the "Rich text editor" datatype where you can choose wether or not inserted images should be scaled to a certain width, which is also defined on the datatype, which you can see by following the mentioned steps above.
For more advanced image formatting you can use the image cropper or perhaps imageGen - but to give you further instructions to this I think we need to know a bit more about what you are trying to solve with the rich text editor.
I hope this help! Please don't hesitate to ask further questions if there is something you are in doubt about :-)
/Jan
Jan - thank you for such a quick reply! I was able to add styles to the editor and also enable more options that the editor displays in the developer section. when I visit the TinyMCE web site it shows a full functional demo of all that TinyMCE has to offer which would be nice to start with and then turn off as needed: http://tinymce.moxiecode.com/tryit/full.php I guess I need to further investigate the config files because at first glance it do not seem easy to get this fully functional. If someone had an example that would be great?
For the image size control - I was able to adjust it as you stated thank you. What I would like to do is have some one insert an image on the page and have it resized and resampled so that the file size and dimension are both reduced. Do you know af any options that could enable this?
For the resizing of images etc, try taking a look at the "ImageGen" package. It can be installed from the "developer" section.
To be honest I dont know if it can be used in the richtext editor, but try taking a look at it.
Hi Mike
As Thomas says you could have a look at the imageGen package...must admit I can't remember if the image file size gets reduced when it's rezised in the editor when you have set the max width...but I actually think it is. But it should be easy to check :-)
However imageGen in conjunction with an image inserted directly into the RTE is something that sounds troublesome in my ears since you would normally just write out the content of the RTE field in one large chunk. You can probably make some weird workarounds etc. but I doubt that it is worth the trouble.
If you will use imageGen then you should consider inserting images by using a macro with a mediaPicker parameter instead. Then you can easily use imageGen to scale down the image. And then the file size is also reduced. There are various settings you can play around with.
You could also look into the imageCropper datatype.
Hope this helps.
/Jan
I keep coming back to this each time I get a break in projects and just wanted to give an update. I did verify that the images resize, but they do not resample so the file size does stay large which if it did resize and resample I would not need to start my search on how to do that. Might want to include that functionality in the next release :-)
I am currently investigating the imageCropper and imageGen - thanks for the help so far.
I need to back-track because I was testing the upload of new images using the RTE and found that each time I upload an image a folder is created on the server under the media folder which contains the original image and a thumbnail. The original file is the only one that displays in the media section and I cannot find any way to display or use that thumbnail using the interface.
1.) Does anyone have this same issue or know haw to show these upload files in the media interface?
2.) also the thumbnail is always 100 x 75 which I do not have set anywhere but I do have the max default size det to 200 in the datatype for the RTE.
3.) I also tested the imagecropper datatype and same thing happens - images are hidden in the interface but I see them on the server?
One other note about image cropper - I can get it to work fine when clicking an image in the media folder but if I add it to my homepage document type as another tab I get a dot net error about and instance of an object.
is working on a reply...