How to install tinyMCE to work with phpList

Solutions for other advanced phplisters

How to install tinyMCE to work with phpList

Postby Dragonrider » 2:14pm, Tue 17 May, 2011

How to incorporate tinyMCE editor into phpList.

First of all, download the latest tinyMCE editor from Moxiecode (at the time I wrote this, the latest version is 3.4.2 and you just need to download the first of the three main packages.

Once downloaded to your computer, unRAR the file tinyMCE.rar (use WinRAR which has a trial period and works fine).

In the winRAR window, double click the tinyMCE folder, double click the jscripts folder and extract the tinymce folder to your desktop (drag and drop).

Now, upload this folder to your phpLists installation.
It needs to be uploaded to lists/admin/plugins on your webspace.

Once this has uploaded, you need to adjust the settings in your lists/config/config.php file to switch from FCKEditor to tinyMCE Editor.

Open the config.php file in a TEXT editor (or use your edit function in your server's File Manager.

Around line 525 onwards, you'll see the settings for FCKEditor and tinyMCE editor.

Code: Select all
define("USEFCK",1);

# If you want to upload images to the FCKeditor, you need to specify the location
# of the directory where the images go. This needs to be writable by the webserver,
# and it needs to be in your public document (website) area
# the directory is relative to the root of PHPlist as set above
# This is a potential security risk, so read README.security for more information
define("FCKIMAGES_DIR","uploadimages");

# TinyMCE Support (http://tinymce.moxiecode.com/)
# It is suggested to copy the tinymce/jscripts/tiny_mce directory from the
# standard TinyMCE distribution into the public_html/lists/admin/plugins
# directory in order to keep the install clean.
# NOTE: If you enable TinyMCE please disable FCKeditor and vice-versa.
# Set this to 1 to turn on TinyMCE for writing messages:
define("USETINYMCEMESG", 0);
# Set this to 1 to turn on TinyMCE for editing templates:
define("USETINYMCETEMPL", 0);
# Set this to path of the TinyMCE script, relative to the admin directory:
define("TINYMCEPATH", "plugins/tiny_mce/tiny_mce.js");
# Set this to the language you wish to use for TinyMCE:
define("TINYMCELANG", "en");
# Set this to the theme you wish to use.  Default options are: simple, default and advanced.
define("TINYMCETHEME", "advanced");
# Set this to any additional options you wish.  Please be careful with this as you can
# inadvertantly break TinyMCE.  Rever to the TinyMCE documentation for full details.
# Should be in the format: ',option1:"value",option2:"value"'   <--- note comma at beginning
define("TINYMCEOPTS", "");


Turn FCKEditor off, turn tinyMCE on, and I'll assume you want as many options as possible available to tinyMCE, I know I do!

Substitute the above code with the following:

Code: Select all
define("USEFCK",0);

# If you want to upload images to the FCKeditor, you need to specify the location
# of the directory where the images go. This needs to be writable by the webserver,
# and it needs to be in your public document (website) area
# the directory is relative to the root of PHPlist as set above
# This is a potential security risk, so read README.security for more information
define("FCKIMAGES_DIR","uploadimages");

# TinyMCE Support (http://tinymce.moxiecode.com/)
# It is suggested to copy the tinymce/jscripts/tiny_mce directory from the
# standard TinyMCE distribution into the public_html/lists/admin/plugins
# directory in order to keep the install clean.
# NOTE: If you enable TinyMCE please disable FCKeditor and vice-versa.
# Set this to 1 to turn on TinyMCE for writing messages:
define("USETINYMCEMESG", 1);
# Set this to 1 to turn on TinyMCE for editing templates:
define("USETINYMCETEMPL", 1);
# Set this to path of the TinyMCE script, relative to the admin directory:
define("TINYMCEPATH", "plugins/tiny_mce/tiny_mce.js");
# Set this to the language you wish to use for TinyMCE:
define("TINYMCELANG", "en");
# Set this to the theme you wish to use.  Default options are: simple, default and advanced.
define("TINYMCETHEME", "advanced");
# Set this to any additional options you wish.  Please be careful with this as you can
# inadvertantly break TinyMCE.  Rever to the TinyMCE documentation for full details.
# Should be in the format: ',option1:"value",option2:"value"'   <--- note comma at beginning
define("TINYMCEOPTS",',mode : "textareas",
        theme : "advanced",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,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,blockquote,|,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,imagemanager,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true ,
// Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js"
');


And that should be it.

If you have bought the extra MCImageManager to allow very easy browsing for, and insertion of, images, this requires the imagemanager folder putting in the following location: lists/admin/plugins/tiny_mce/plugins/

The imagemanager config file needs adjusting for phpList

lines 35 & 36 should have 5 "../" prefixing the image folder, and will probably need the name of your image folder substituting for the default folder name. This will then find the images folder at lists/images By Default, this starts off as "../../../../upload-images/" (4 "../" which ends up pointing to the lists/admin/upload-images which doesn't exist).

If you are using something like Joomla to include phpList, and you want to use the Joomla's image folders, make it 6 "../" at this point. This is around line 35-40 in imagemanager/config.php file

Code: Select all
      // General filesystem options
        $mcImageManagerConfig['filesystem'] = "Moxiecode_LocalFileImpl";
        $mcImageManagerConfig['filesystem.path'] = '../../../../../../images/'; // absolute or relative from this script path, optional.
        $mcImageManagerConfig['filesystem.rootpath'] = '../../../../../../images/'; // absolute or relative from this script path, required.
        $mcImageManagerConfig['filesystem.datefmt'] = "Y-m-d H:i";
Note that in the above I'm accessing my Joomla images folders and sub-folders.

For this to work with phpList you also need to add a couple of items to phpList's config.php file.

Substitute the following code for the relevant lines in lists/config/config.php as above.

Code: Select all
define("TINYMCEOPTS",',mode : "textareas",
        theme : "advanced",
        convert_urls : false,
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,imagemanager,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,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,blockquote,|,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,imagemanager,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage,imagemanager",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true ,
// Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js"
');


This adds the ImageManager option at the end of the last row and the convert_urls : false, stops it stripping off the domain as phpList requires the full URL for images to successfully appear in newsletters.

The imagemanager icon then appears in Send a Message (or Template design) as the last item on the last row.

This took a lot of working out (about a week of evenings!) so I thought I'd make a how-to for anyone else planning on attempting this.
My sites:- http://wharfedalefestival.co.uk, http://ilkleygardeners.org.uk, http://emergencyaid.net, http://dragonrider.co.uk
Latest phpList version is now 3.0.12 (3 February 2015) and requires a minimum of MySQL 5.0 and PHP 5.3.x
Dragonrider
Moderator
 
Posts: 3460
Joined: 6:58am, Sun 02 Jul, 2006
Location: Ilkley, West Yorkshire, United Kingdom

Re: How to install tinyMCE to work with phpList

Postby SteveRichard » 3:27pm, Mon 23 May, 2011

Thanks for the detailed tutorial, I'll try this out :)

Bookmarked :mrgreen:
SteveRichard
phpList newbie
 
Posts: 2
Joined: 3:20pm, Mon 23 May, 2011

Re: How to install tinyMCE to work with phpList

Postby Dragonrider » 11:25am, Wed 12 Nov, 2014

Please note, the above post refers to version 2 of phpList, using version 3 all you need to do is add the TinyMCE plugin.
My sites:- http://wharfedalefestival.co.uk, http://ilkleygardeners.org.uk, http://emergencyaid.net, http://dragonrider.co.uk
Latest phpList version is now 3.0.12 (3 February 2015) and requires a minimum of MySQL 5.0 and PHP 5.3.x
Dragonrider
Moderator
 
Posts: 3460
Joined: 6:58am, Sun 02 Jul, 2006
Location: Ilkley, West Yorkshire, United Kingdom


Return to Advanced Answers, Howtos, Tips & Tricks

Who is online

Users browsing this forum: No registered users and 2 guests