Lesson #10 Class Notes wiki -- TinyMCE - Kevin Reynen (March 18, 2007)
Useful links:
TinyMCE source
code
Drupal TinyMCE module
TinyMCE plugins
Pre-lesson discussion- #Lesson 10 on drupaldojo.com
Installation
Download TinyMCE module from above link and unpack in appropriate
modules directory (for example, ./sites/all/modules/tinymce). We then
download the TinyMCE toolbar editor code itself from the TinyMCE
moxiecode site, and drop it into the tinymce module folder (i.e., in the
above example, that would be ./sites/all/modules/tinymce/tinymce).
When we go to Administer >> Site building >> Modules,
tinymce appears on the list and we go ahead and enable it. If you get a
database warning error, this is because TinyMCE was installed previously
and the tables already exist and there is no "if exists..."
statement in the install code. There is a patch for this warning. It is
not really an issue, though.
After enabling the appropriate permissions at ./admin/access (Access
Control), we go to the TinyMCE interface at Administer >> Site
configuration >> TinyMCE settings. You will see that there are no
profiles, so you click on "Create new profile" to create one.
In the Basic setup section you create a new name for the profile (I
usually try to keep my profile names matching my role names). Choose the
default state and whether to allow users to choose their default state
and whether the disable/enable rich text editor toggle, the default
language, etc. In the Visibility section you can choose which pages you
want to allow TinyMCE to show up on. In the Buttons and plugins section
we have the same button picker we had in 4.7 to choose the features you
want on the toolbar. Mouse over buttons for help hints. Continue with
the other settings (experiment a little) and go ahead and create that
profile.
At this point, if I go to create content and to create story I am
going to see the buttons that we enabled. I can go back to the TinyMCE
configuration and add more buttons. The limitation of the 4.7 TinyMCE
button picker is that you cannot control the order or on which bar the
buttons appear on; those are preselected, and you only have an on/off
setting for each button.
Notice the advanced versions of the image and link buttons.
Input formats
Lot of people having trouble on this one. For example if the input
filter does not include the <img> tag, images you include will be
filtered out of the display. For some of the things, you have to enable
full html or (augmented) filtered html input formats.
So now, after going crazy, we have three rows of buttons on our
toolbar, and we don't really have any control over where they
appear. Now if we go in and create another link I have these advanced
options ... I can do pop-ups on links, basically the same features as
dreamweaver, you can change the title, target of links. With image, we
have the ability to control alignment, CSS stylesheets (according to how
you have set the CSS stylesheet). You can do mouseovers, practically
anything you can do in dreamweaver.
What is still missing is the ability to upload images. There are a
number of ways to do this, however, today we are going to show the IMCE
module, which I think is the slickest way to integrate file upload, with
images and basic flash.
So we install that module.
I should point out that I (Kevin Reynen) do mostly support on the
TinyMCE module, most of the new code is written by Nedjo, and ufku
(father of the IMCE module), who works very hard to make sure the latter
stays in step with TinyMCE. These are all people who have contributed a
lot more to the module than I have. Steve McKenzie is one of the
original TinyMCE module developers, who still makes contributions but
doesn't have time to continue to focus on it, as I do, since I
absolutely need it for my work.
I've downloaded the IMCE module, and I will drop it into my
modules folder (i.e. ./sites/all/modules/imce) on my test site. Enable
module, enable access control. Enable TinyMCE support at the top of the
page at Administer >> Site configuration >> IMCE settings.
That is going to give us basically support for all rich media upload
(each role can have its own settings as to limitations on image size,
weight and total disk storage space per user, or just check unlimited
for a given role).
We now get the additional button on the image dialog giving access to
an individual files repository for each user under the files directory
on your site (see other options in IMCE settings). What IMCE does not do
is that it does not create a record in your database of the image as a
node, so if you search for your image as you would if you had uploaded
it with the standard image module, you don't get that.
That is something to keep in mind when it comes to choosing an image
uploading method. The advantage of IMCE is that when users are creating
a story or blog post, they don't have to first upload their images
with a different tool, they can do it while they are editing the story
or blog post. This is a much more Microsoft Word or Dreamweaver kind of
environment that people are used to. You don't have to preplan what
images you are going to use.
Click on the red image folder "browse" button, and you are
taken to a window on your individual user repository (assuming that is
how it is setup). There you can follow directions and upload one or more
files. You can also do this, if you so wish, from a tab on your My
Account page.
All of this assumes, of course, that you have enabled your files
directory and that it is writeable by Drupal. Go to Administer >>
Site configuration >> File system to check on that (you may need
to adjust file permissions on the host operating system so that the
Apache server user can write to that directory.).
You then insert the image from the IMCE dialog into the TinyMCE
dialog, choose settings, and then when you submit that the image appears
on your page at cursor point. It will interact with the surrounding
text, etc., according to the settings you chose.
It is now possible to move the image around, and even cut and paste
the image around in the textarea.
Safari support
Safari support has been improved, most problems ironed out, we are
getting close to full Safari support (basic tool set, image upload all
works). Check which moxiecode version (most of the time it will be a
moxiecode issue and not a Drupal module issue). Konqueror not supported
yet.
Drupal 5.x "murky period"
Those of you trying to use TinyMCE when Drupal 5.0 first came out
probably know, that at that time the TinyMCE module was being maintained
by a user called Drupal-id.com, a great developer residing in Indonesia,
but not the best communicator. He was making a lot of changes to the
module, while continuing to maintain tinymce_plus, a pretty solid module
in itself. But it was not clear where things were headed, and a lot of
people were upset about cool features they were used to having been
pulled from the module. Drupal-id got too busy to be able to maintain
the module and respond to people's issues and as a result there was
somewhat of a revolt and Steve and Allie went off and created the moxie
module as a temporary stopgap solution to reenable a lot of the 4.7
functionality that had been removed (such as the button picker).
Programmer friendly settings
The reason developers don't like editors like TinyMCE is because
it marries you to the Html created by TinyMCE, and this is limiting.
However, much progress has been made here. If you click on the Html
button you can actually see the code created by TinyMCE.
Now, all of this can be defined, you can define how spaces, line
breaks, any kind of code added to the page, gets treated.
Tables
[[editor's note: I am using TinyMCE to write this up on another
site, then I paste the HTML code into the groups.drupal.org wiki, so I
practiced the use of tables coming up now]]
| picture was here; dragged it to the table cell on the right | 
|
| then copied it here (Ctrl-C, Ctrl-V, selected it, hit the image icon and set settings to align left in settings and wrote this text. |
Question: what about creating on-the-fly thumbnails
with IMCE?
Answer: it's on the issue list as a feature
request.
Question: Using TinyMCE instead of Panels?
Answer: Panels are great, this isn't an
either/or, although you can use php and php snippets within TinyMCE.
With the tables interface, there are a lot of buttons, you can merge
rows and cells, etc., insert and delete cells of course and set
properties on a cell, row or complete table basis.
Pasting in Rich Text Formats
For journalists and others who work with Microsoft Word, one of the
big issues is that when you copy and paste either text from a website or
from a Word document, apart from the text, all the formatting is pasted
in also. You can see all the style craziness if you look at the Html
code. On Windows, when you paste, you just get a carbon copy of what is
in your clipboard; on the Mac, you get a popup to reformat what you are
pasting to hopefully better code for you to use.
In TinyMce, you can use the word cleanup button.
5.2 Demo
This is the HEAD version (link from time of writing) with
Nedjo's patch.
5.2 is not available for direct download, but the patches are out
there (will be released when stable).
I have reordered the way the buttons work. We have tried to
standardize the way users are presented these buttons. So the top row,
up until the image and media upload buttons, are available to all users,
and more advanced users get more buttons and more options. Then, down
here on the fourth row I have added are buttons which up until this
release of TinyMCE weren't available to you unless you went in and
hacked the module.
Now it is easier to find the functionality you want to add through
TinyMCE plugins.
For example, the YouTube button (you can just put the id of the video
in). (Little detail: not compatible with Garland theme as things stand
at this writing).
utf-8 button is great for internationalization stuff. We have right
to left.
Don't use issue queue for discussion on TinyMCE development. If
you are interested in discussing development issues, join the TinyMCE
Development Group at groups.drupal.org. We are sharing the patches
that are out there, discussing roadmap for future development...
One of my favorite addon buttons is the PHP button (don't like to
enable PHP for everyone). A lot like what Dreamweaver does for code
snippets.
code protect... specify certain expressions... different levels of
access in the same story.
Rich media functionality. Clicking on the media
button will show your media resource folder.
What has changed in TinyMCE configuration in 5.2
Everything is basically the same. We have added a custom
configuration option for expert use. I can change the order of the
buttons and move them from line to line. This is the way moxiecode
configures TinyMCE. Now exposed once again to Drupal module users not
familiar with moxiecode configuration.
As a result of this revelation, we have made this available to module
users without having to edit the.js files.
You can go to sourceforge and download plugins for TinyMCE (people
outside of Drupal and outside of moxiecode, not supported by either; but
many are of good quality and very useful). See link at top of page, and
on moxiecode page.
TODO: continue to end, this is based on first 60 minutes of audio