I am using the later version of Drupal and TinyMCE WYSIWYG Editor.

The problem is my editor is quite long because I cannot manage the position of the editor's toolbar. I have seen before that this editor got 4 levels of toolbars whereas mine only got 3 levels of toolbars that made it longer than others.

Could you please help me to modify and manage the position or the arrangement of the editor's toolbar.

P.s Take a look at my screenshot below.

Thanks & regards,
cloXZime

Comments

cloxzime’s picture

Opss...correction!

*later = latest

TheresaB-1’s picture

I too am having this same issues along with some of the buttons not showing up even though they are selected i.e. the insert flash button.

gildedgod’s picture

TheresaB, it's because module was designed for older version of TinyMCE. As example, newest versions have plug-in "media" instead of "flash".

Short HOW-TO "Actualization of TinyMCE WYSIWYG Editor module":

1. Install module and latest TinyMCE package as it described in module readme.
2. Check the folder "/modules/tinymce/tinymce/jscripts/tiny_mce/plugins/", copy names of all folders (every folder holds single plug-in) listed there. As example, mine is:

advhr
advimage
advlink
autosave
bbcode
compat2x
contextmenu
directionality
emotions
example
fullpage
fullscreen
iespell
inlinepopups
insertdatetime
layer
media
nonbreaking
noneditable
pagebreak
paste
preview
print
safari
save
searchreplace
spellchecker
style
table
template
visualchars
xhtmlxtras

3. Open "/modules/tinymce/plugin_reg.php" in any text editor. Here you'll find something like this:

<?php
// $Id: plugin_reg.php,v 1.11 2006/05/06 20:09:44 m3avrck Exp $

/**
 * @file
 * Registers TinyMCE plugins for the Drupal TinyMCE module. Note these settings
 * can be overridden by each Drupal theme.
 */

function _tinymce_plugins() {

/**
 * A couple of notes about adding plugins.
 *
 * 1) Don't use any of the *_add or *_add_before hooks for theme button placement.
 *    Stick with theme_advanced_buttons1, theme_advanced_buttons2,
 *    theme_advanced_buttons3 only.
 *
 * 2) You can change the order of the buttons by moving the plugins around in
 * this code. You can also change the order of the button array for each plugin.
 */

$plugins['advhr'] = array();
$plugins['advhr']['theme_advanced_buttons3']  = array('advhr');
$plugins['advhr']['extended_valid_elements']  = array('hr[class|width|size|noshade]');

and so on until the end of the file...

Every plug-in declaration consists of 3 parts:

  • $plugins['advhr'] = array(); - start of plug-in declaration,
    It's easy and clean to understand - just copy this line and replace "advhr" with you plug-ins names.
  • $plugins['advhr']['theme_advanced_buttons3'] = array('advhr');
    This line defines on wich toolbar this button will be placed and which buttons it will be. Check right names of buttons you can here http://wiki.moxiecode.com/index.php/TinyMCE:Plugins. Order of buttons in toolbars defined by declarations order. There is 3 toolbars at all: theme_advanced_buttons1, theme_advanced_buttons2, theme_advanced_buttons3.
  • $plugins['advhr']['extended_valid_elements'] = array('hr[class|width|size|noshade]');
    This line is very important. Every plug-in holds it's own html elements, and to properly assign elements to plug-ins and to allow TinyMCE to work with it, you need to declare them. Check, what extended_valid_elements defined for every plug-in you can here again: http://wiki.moxiecode.com/index.php/TinyMCE:Plugins. As example, here we can find advhr extended_valid_elements : "hr[class|width|size|noshade]" - exactly as it is already defined.

So, all you need to do is:

  • remove all $plugins['%name%'] wich doesn't exists in your list ("/modules/tinymce/tinymce/jscripts/tiny_mce/plugins/" folder),
  • add plug-ins, that not listed here.

It's a simpy 5 minutes work. Because of TinyMCE updates often project maintainer just not able to keep this actual.

gildedgod’s picture

StatusFileSize
new4.39 KB

Here is "plugin_reg.php" with actualized plug-ins info. It's a raw work, i didn't check all plug-ins, dependencies and infos, so there is no guarantee that this "patch" will give you all TinyMCE abilities, but it works. With it to embed flash you should use "media" button instead of old "flash" plug-in, it's pretty nice and simply to use.

gildedgod’s picture

By the way, for pagebreak to work with drupal we need to set this parameter:
pagebreak_separator : "<!--break-->"
I don't know how to preform this with "TinyMCE WYSIWYG Editor" module. Anybody?

TheresaB-1’s picture

gildedgod, I want to have your children!

Thank you so very much for taking the time to explain this and so succinctly as well. You are a godsend and now that you have explained it I can run with this and mark off another pain-in-my-a** milestone.

I will also take a look into the pagebreak issue and see what i can find.

Once more thank you so very mush.

cloxzime’s picture

From what you had explained, I can imagine on how to manage the toolbar eventhough my toolbar still in 3 level which the 3rd level the longest than others.

Thanks anyway!

p.s If you have any idea on how to shorten the toolbar, please share the technique with us here.

cloxzime’s picture

StatusFileSize
new91.75 KB

Okay, after trying to modify some errors arised. So, that was not quite good when editing the plugin_reg.php etc..

Perhaps, you all cannot see what I am trying to say. So, take a look at the attachment below. I show you the way I want it to be.

Thx 4 ur help!

gildedgod’s picture

TheresaB, the easiest way to implement drupal-alike pagebreak using this module is to modify TinyMCE plugin. All you need is:

1) navigate to "modules\tinymce\tinymce\jscripts\tiny_mce\plugins\pagebreak\"
2) delete "editor_plugin.js"
3) rename "editor_plugin_src.js" to "editor_plugin.js"
4) open "editor_plugin.js" with any text editor and find line:

			var pb = '<img src="' + url + '/img/trans.gif" class="mcePageBreak mceItemNoResize" />', cls = 'mcePageBreak', sep = ed.getParam('pagebreak_separator', '<!-- pagebreak -->'), pbRE;

5) Change "<!-- pagebreak -->" to "<!--break-->" and save
6) Clear cache in your browser

That's all.

cloxzime, there is only 3 rows: theme_advanced_buttons1, theme_advanced_buttons2, theme_advanced_buttons3; and that's all. So, you just should equally distribute your buttons between them.

4all, and there is new module - http://drupal.org/project/wysiwyg - where TinyMCE plugins info is up to date, so, you can simple use it instead of this module.

By the way, it can also be customized by editing modules\wysiwyg\editors\tinymce.inc file: just navigate to the end of this file (function "wysiwyg_tinymce_plugins") and you will find an array with similar structure.

gildedgod’s picture

Assigned: Unassigned » gildedgod
Priority: Normal » Minor
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.