[MOD] Integrate TinyMCE into 4images Admin Panel (Still needs some work)

[BartAfterDark]

What it is:
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

This small mod is mostly for people who installed the news mod.

1. Download TinyMCE 2.1.0 and TinyMCE compressor PHP from http://tinymce.moxiecode.com

2. Extract tinymce_2_1_0 and tinymce_compressor_php_1_1_0. Move the files from tinymce_compressor_php_1_1_0 to the tiny_mce folder.

3. Upload the tiny_mce to your website.

4. Backup admin/admin_functions.php

5. Open admin_functions.php and
Find:

Code:  [Select]  [Expand]  [Hide line numbers]

1 2	<script type="text/javascript" language="javascript" src="<?php echo ROOT_PATH; ?>admin/browserSniffer.js"></script>     <script type="text/javascript" language="javascript" src="<?php echo ROOT_PATH; ?>admin/calendar.js"></script>

Add before:

Code:  [Select]  [Expand]  [Hide line numbers]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<script type="text/javascript" src="../tiny_mce/tiny_mce_gzip.js"></script> <script type="text/javascript"> tinyMCE_GZ.init({ plugins : 'inlinepopups,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras', themes : 'advanced', languages : 'en', disk_cache : true, debug : false }); </script> <script language="javascript" type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced", plugins : "inlinepopups,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras", theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" }); </script>

It still needs some tweaking with the buttons and so. This version uses GZip (should load faster)
One other small problem is that Keywords/Description (under add/edit images) also some of the text area boxes are smaller then usual when TinyMCE is used.

I've posted a screenshot so you guys can see what's all about.

[mantra]

this editor also good,,, is simple http://www.solmetra.com/en/disp.php/en_products/en_spaw/en_spaw_intro... i use it on my news editor

[CeJay]

thanks to you both!

[Loda]

thank you very much..
one problem: if i edit the comments, the comment field is very small...
look at the sreenshoot please:

Edit:
i solve this problem...
i have to klick on the fullscreenbutton...

[BartAfterDark]

Loda, this is when you are editing the comments or?

I'll post the fix later on, because you can change the witdh and high of the text area in one of the php files

[BartAfterDark]

Okay I got it.

Open: admin_global.php
Find:

Code:  [Select]  [Expand]  [Hide line numbers]

1 2 3 4 5

else {   $textinput_size = "30";   $textinput_size2 = "17";   $textarea_size = "28"; }

Replace with:

Code:  [Select]  [Expand]  [Hide line numbers]

1 2 3 4 5

else {   $textinput_size = "30";   $textinput_size2 = "17";   $textarea_size = "120"; }

Open: admin_functions.php
Find:

Code:  [Select]  [Expand]  [Hide line numbers]

1	function show_textarea_row($title, $name, $value = "", $cols = "", $rows = 10) {

Replace with:

Code:  [Select]  [Expand]  [Hide line numbers]

1	function show_textarea_row($title, $name, $value = "", $cols = "", $rows = 30) {

As you can see. 28 is being replaced with 120 (this is the width)
And 10 is replaced by 30 (this is the high) You can always change them to whatever number you want. These settings apply to almost all text boxes in the admin panel (comments, add/edit images/category, etc.)

[Loda]

yepp...
thank you very much!
that's it!

[om6acw]

Thanks BartAfterDark,
works great 

[bibabobu]

Hi,

is it working with 4images Version 1.7.1?

Where do i have to put in exactly the new code of the admin_functions.php?

I guess above that line? Am i right?

Code:  [Select]  [Expand]  [Hide line numbers]

1 2 3 4 5 6 7 8 9

<script language="JavaScript">     <!--     var statusWin, toppos, leftpos;     toppos = (screen.height - 401)/2;     leftpos = (screen.width - 401)/2;     function showProgress() {       statusWin = window.open('<?php echo $site_sess->url("progress.php"); ?>','Status','height=150,width=350,top='+toppos+',left='+leftpos+',location=no,scrollbars=no,menubars=no,toolbars=no,resizable=yes');       statusWin.focus();     }

[BartAfterDark]

You can try and add it before the javascript you posted (it should work)

[bibabobu]

 
No. it does not work.
Perhaps i have the wrong path to the script?

Any other idea?

Where i have to put the tiny folder? Does it matter? I put it in the root.

[BartAfterDark]

I think you forgot to add the Gzip feature

Copy tiny_mce_gzip.js and tiny_mce_gzip.php tot he tiny_mce folder. Do you have the tiny_mce in your root folder or is it inside 4images like this (www/4images/tiny_mce) ?

[bibabobu]

(www/4images/tiny_mce) ?

I have it in the 4images folder.  (www.industrie-gravuren.de/galerie....)
Yes, i did copy the files to the destination folder.

[BartAfterDark]

try and change this

Code:  [Select]  [Expand]  [Hide line numbers]

1	<script type="text/javascript" src="../tiny_mce/tiny_mce_gzip.js"></script>

to

Code:  [Select]  [Expand]  [Hide line numbers]

1	<script type="text/javascript" src="/galerie/tiny_mce/tiny_mce_gzip.js"></script>

[bibabobu]

  Thank you BartAfterDark for this great modification. That rocks!!!

I made mistake and uploaded all extracted files of the download.
I changed it now and only uploaded the tiny_mce folder with compression files.
Also changed the path to it and now it seems to be working.

But i have one more question or problem.

I use the MOD Quick image edit (don`t remember the name of it)...
so there are a lot of textareas and it took a lot of time to load these.

Is there a possibiltiy to use tiny_mce only for some textareas ( for example only for adding news)

I found myself a topic in the tiny forum, there is posted a MOD for switching tiny_mce on or off for the textareas.
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=436

But i don`t really know how to insert this code exactly 

Would be great if someone could help me to solve this.