NSM TinyMCE - ExpressionEngine 2 WYSIWYG custom field

27/8/10 — NSM TinyMCE is official available over on expressionengine-addons.com! Go download it now.

Unless you’ve been hiding under a rock you probably know that EllisLab have released a public beta of ExpressionEngine 2. As a result I’ve been receiving constant requests to port my ExpressionEngine modules, plugins and extensions to EE2. So far a large number of those request have been for LG TinyMCE, my TinyMCE WYSIWYG custom field.

I first published LG TinyMCE way back in September 2007 and since then it has been downloaded over 10,000 times. Naturally LG TinyMCE has earned a high priority when deciding which addons to port to EE2.

Introducing NSM TinyMCE Alpha 1

NSM TinyMCE is implemented using the Custom Field API and has the following new features:

Multiple TinyMCE configurations
Per field configuration

For all the other EE developers out there the code is heavily commented so you should be able to use NSM TinyMCE as a reference when creating your own custom fields.

Just to be clear this is an early Alpha version of NSM TinyMCE and should only be installed by experienced ExpressionEngine developers / designers. The version number reflects the stability of EE2 Beta 1 not the addon code quality or implemented features. Some core hacking is required if you are using Build 20091207 or 20091211 but it’s minimal (make sure you read the README).

Publish form with multiple TinyMCE fields and multiple configurations

Custom field configuration

Download

Download NSM TinyMCE from our GitHub account. Make sure you completely read the included README before installing. If you find any issues or have feedback leave them on the GitHub repo issues page.

Enjoy

Comments

The following 20 people were compelled to have their say. We encourage you to do the same.

Todd Perkins said on Tuesday 15th December, 5:13am: 1

Really excited to see where this one lands! Will you be hooking in the image functionality to be able to use the EE2 file / image manager and insert an image directly into the tinymce field - without having to enter a url manually?
Pål Degerstrøm said on Wednesday 16th December, 2:21am: 2

I don’t want to start a flame war, but I wanted to ask what your impressions are of CKEditor compared to TinyMCE?

I’ve been using Brandons WYGWAM on a few projects, but recently I’ve been looking into developing some custom plugins, and the docs for CKEditor seem … unfinished.

Anyway, great to see this for EE2, it will definitely come in handy. Thanks, Leevi!
David said on Wednesday 23rd December, 3:25pm: 3

Thanks Leevi. I jsut dropped it in and all works great. Though, I have been trying to integrate TinyBrowser.. thing is, I don’t see how I can yet. Looking forward to the next iteration, mate. Any thoughts on TinyBrowser integration would be ace. Merry Christmas
Stuart said on Wednesday 30th December, 4:29am: 4

Any chance of getting forms elemets working in LG TinyMCE? I’ve tried jmforms but it doesn’t seem to work. I’m not sure if it’s a problem with the init script or the way LG TinyMCE works with EE but everything I’ve tried so far simply disables LG TinyMCE in EE. It would be nice to see form elements available right out of the box.
Mario Rodríguez said on Wednesday 30th December, 7:35am: 5

Is it possible to use this Addon in the Forum 3.0 or is it just por publishing in Channels?
Ivan said on Thursday 20th May, 9:04am: 6

I just modified this custom field because the installation of TinyMCE is so nested that I was having problems in my FTP clients.

Is it possible to have an option to specify the TinyMCE folder location?

Thanks!
Flint said on Wednesday 9th June, 3:44am: 7

Help! Blank pop up windows!

I installed this in EE 2.02 Build: 20100430. It loads fine and I can access all the buttons but all the popup windows for the buttons are blank! I am using the advanced configuration. What now?
James said on Wednesday 16th June, 12:54pm: 8

Is this compatible without any edits/hacks for 2.02?

Also, is this compatible with the Matrix field?
Leevi Graham said on Wednesday 16th June, 1:26pm: 9

@Todd: Not in the near future. The addon will be free so I’m tackling the 80% of functionality first. I’ll probably add some hooks for other developers to add even more functionality in the future.

@Pål: No comment :D. I haven’t actually used CK editor but I have also heard the api (and documentation) is still a work in progress.

@David: From memory integrating TinyBrowser involves updating the config of the TinyMCE instance. Let me know if you need any hooks into the fieldtype itself.

@Stuart: I’ve never used the form plugin with TinyMCE before. Are you thinking SAEF forms or some other external service?

@Mario: No, not at this stage

@Ivan: The latest version moves the TinyMCE install into the public themes directory. I haven’t added an option yet.

@Flint: Log a ticket on GitHub and I’ll try and take a look

@James: Yes and Yes in the latest version available on GitHub
Heath said on Thursday 17th June, 7:51am: 10

Nice to see you’re still in tone with this project. We’re already using it on several sites. TinyBrowser and TinyUploader integration would be greatly appreciated (or at least a how-to).
James said on Thursday 1st July, 5:20am: 11

Do you have the updated versions of tinymce imagemanager and tinymce filemanager for EE2 up anywhere yet? I use those two fields all the time!
James said on Wednesday 14th July, 3:52am: 12

Does this work with EE 2.1?
George Farkas said on Wednesday 4th August, 6:49am: 13

I am having the same issue as Flint — Blank popups. Was this issue resolved?
George Farkas said on Wednesday 4th August, 7:03am: 14

I know what the issue is. It’s looking for the themes directory in the root of my site, but EE is installed one level down. Where do I change the path to the themes folder?
Leevi Graham said on Wednesday 4th August, 10:02am: 15

@George: The URL is calculated using the “Theme Folder URL” configuration value.
George Farkas said on Friday 6th August, 11:30pm: 16

I have logged my issue at github, got no response. Turns out that the issue is not the themes path. The url to the htm file in the popup is correct. However, it is blank. Was there a solution to Flint’s issue above? I don’t see one posted and I am thinking I may have the same issue.
Flint said on Thursday 26th August, 1:43pm: 17

I finally got NSM TinyMCE working!

Make sure:

Update to ExpressionEngine 2.1.0

Get the latest update of NSM_tinyMCE

Upload or create the
/system/expressionengine/third_party/nsm_tiny_mce folder on your server and make sure it has just license.md, config.php and ft.nsm_tiny_mce.php files in it.

All the rest of the files should be at
/themes/third_party/nsm_tiny_mce/scripts/tiny_mce
and in this folder should be all the tinymce files and subfolders like the tiny_mce.js file(s) and the themes and plugins folder etc…

Once the files are in the right place, login to EE and go to Adons/fieldtypes and make sure the NSMTiny MCE fieldtype is installed

Then go to Admin/channel admin/custom fields and edit your custom fields from textarea to the NSM TinyMCE field type and choose advanced layout and like a height of 500 pix or so. Update and presto. Now When you edit the contents of your fields, the editor shows up and works great!
Flint said on Thursday 26th August, 1:55pm: 18

Help! I got NSM Tiny MCE working but…..

Now I want to add the TinyBrowser plugin to TinyMCE and I am having a heck of a time getting it configured correctly.

I bought the TinyBroswer for $4 located at http://www.lunarvis.com/products/tinymcefilebrowserwithupload.php

It has very streight-forward steps to install (listed in steps 1-5 below but where do I put the code for steps 2 and 3 ? I figure I have to edit the ft.nsm_tiny_mce.php file but where the heck do I put the html config code in that PHP file?

Can someone please help me by modifying the steps or by uploading a modified ft.nsm_tiny_mce.php file or other appropriate files?

Thank you.

TinyBrowser Installation Method 1
=================================

The standard TinyBrowser installation, this integrates TinyBrowser as a custom
file browseer with TinyMCE.

1) Copy the tinybrowser folder and contents to your TinyMCE plugins directory.

2) Place the following javascript link after the link to TinyMCE (tiny_mce.js):

[removed][removed]

***NOTE:*** The above link assumes TinyMCE is installed in your website root
directory, you will need to amend the link to your specific setup!

3) Add this line to your TinyMCE init:

file_browser_callback : “tinyBrowser”

4) Edit the TinyBrowser configuration file (config_tinybrowser.php). The most
important settings are the file paths (these will be automatically created on
your server by TinyBrowser if they do not exist) and also the security
settings - if $_SESSION[’tinybrowser’][’sessioncheck’] is not configured you will only be
able to browse files.

***NOTE:*** If your server is Unix-based. you may wish to modify the
$_SESSION[’tinybrowser’][’unixpermissions’] config value, which decides permissions.

5) All done! Now you will see a browse button in the TinyMCE dialog windows for
plugins like image, media and link - just click this button and TinyBrowser
will appear.
Flint said on Thursday 26th August, 2:00pm: 19

Apparently this blog removes code. Here is the removed code for step 2 above with the all obvious greater than/less than signs replace with tildes.

~script type=”text/javascript”
src=”/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php”~~/script~
Leevi Graham said on Thursday 26th August, 2:10pm: 20

Hi Flint,

You can grab the latest version of NSM TinyMCE here. Also please post support questions here.