Tag Archives: Tinymce

TinyMCE 3.4.2 Update: Fixes for Internet Explorer Compatibility

May 6, 2011 1:17 pm /

Users of TinyMCE 3.4.1 and below should update to TinyMCE 3.4.2 to fix a number of compatibility issues with Internet Explorer.

I’ve noticed that TinyMCE 3.4.1 breaks in Internet Explorer 7 and Internet Explorer 8 with any pages with content using CSS float. For instance, if you have floating left or right DIVs on a page, the content won’t be selectable.

TinyMCE 3.4.2:
http://tinymce.moxiecode.com/download/download.php

Here’s the list of all the fixes in 3.4.2

Added new ‘paste_text_sticky_default’ option to paste plugin, enables you to set the default state for paste as plain text.
Added new autoresize_bottom_margin option to autoresize plugin that enables you to add an extra margin at the bottom. Patch contributed by Andrew Ozz.
Rewritten the fullpage plugin to handle style contents better and have a more normalized behavior across browsers.
Fixed bug where contents inserted with mceInsertContent wasn’t parsed using the default dom parser.
Fixed bug where blocks containing a single anchor element would be treated as empty.
Fixed bug where merging of table cells on IE 6, 7 wouldn’t look correctly until the contents was refreshed.
Fixed bug where context menu wouldn’t work properly on Safari since it was passing out the ctrl key as pressed.
Fixed bug where image border color/style values were overwritten by advimage plugin.
Fixed bug where setting border in advimage plugin would throw error in IE.
Fixed bug where empty anchors list in link settings wasn’t hidden.
Fixed bug where xhtmlextras popups were missing localized popup-size parameters.
Fixed bug where the context menu wouldn’t select images on WebKit browsers.
Fixed bug where paste plugin wouldn’t properly extract the contents on WebKit due to recent changes in browser behavior.
Fixed bug where focus of the editor would get on control contents on IE lost due to a bug in the ColorSplitButton control.
Fixed bug where contextmenu wasn’t disabled on noneditable elements.
Fixed bug where getStyle function would trigger error when called on element without style property.
Fixed bug where editor fail to load if Javascript Compressor was used.
Fixed bug where list-style-type=lower-greek would produce errors in IE<8.
Fixed bug where spellchecker plugin would produce errors on IE6-7.
Fixed bug where theme_advanced_containers configuration option causes error.
Fixed bug where the mceReplaceContent command would produce an error since it didn’t correctly handle a return value.
Fixed bug where you couldn’t enter float point values for em in dialog input fields since it wouldn’t be considered a valid size.
Fixed bug in xhtmlxtras plugin where it wasn’t possible to remove some attributes in the attributes dialog.

Posted in: CMS / Tagged: ,

TinyMCE: How to add wider toolbar icons

April 1, 2011 6:13 am /

By default, TinyMCE only accepts icons that are 20px by 20px in the toolbar. If you want to make a customized toolbar icon that is wider than 20 pixels, you will need to edit the ui.css in TinyMCE. I find this useful for adding custom TinyMCE plugins/etc.

Edit the ui.css (tiny_mce/themes/advanced/skins/default/ui.css) and change the following values:
Replace the “width:20px; height:20px;” with “min-width:20px; height:20px;”. The min-width value will allow for wider icons to be added as well as setting the default width to 20px if one isn’t specified. This will prevent existing icons from breaking.

There should be 2 sections in the css file that needs to be changed.

.defaultSkin .mceButton {display:block; border:1px solid #F0F0EE; min-width:20px; width: 20px; height:20px; margin-right:1px}

.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; min-width:20px; height:20px}

You can now customize the width of your icon inside ui.css.

.defaultSkin a.NAME-OF-YOUR-ICON {
width: 60px;
background: url(YOUR-ICON-LOCATION);
}

Update 5/4/2011: Fixed problem with Internet Explorer 8 with Compatibility mode enabled. This is caused by Internet Explorer 7 not supporting the min-width CSS feature. The fix is to add in a placeholder width value (20px) in addition to the min-width.

Posted in: CMS / Tagged: ,

TinyMCE: Fix the removing of empty DIVs

October 23, 2009 2:23 pm /

TinyMCE is a great WYSIWYG editor, but sometimes there are cases where it removes HTML tags when you go into the “HTML Source” mode and switch back to the editor. This is very frustrating to end-users.

By default, TinyMCE will remove a lot of HTML tags including empty ones (such has having a DIV spacer), select options, certain styles, etc. To get around this, you will need to change the option “extended_valid_elements”, which is before the setup : function(ed) line. Note: This will allow your users to add in any kind of HTML tags they want. Replace the “extended_valid_elements” line with:

valid_elements : "*[*]",
extended_valid_elements : "*[*]",

This will fix the problem with TinyMCE removing tags from the HTML Source mode.

Posted in: CMS / Tagged: ,

Tiny MCE – Getting forms to work

April 1, 2009 5:38 pm /

Getting Tiny MCE to work with forms is a challenge since it can place end form tags within the page and rename your form elements. Although they do not recommend using forms inside the editor, it can be done by some workarounds. I’ve put some common issues with forms with Tiny MCE and the workaround.

The <form name=”[OBJECT”]> bug
For instance, input fields CANNOT be named “name” (so use other identifiers for the first and last name) and ids CANNOT be named “id”. Otherwise, you will have a form element that will have a field called “<form name=”[OBJECT]”> or <form id=”[OBJECT]”>

Early </form> tags getting added in the form
Another limitation is placing <p> tags within the form. This somehow causes TinyMCE to create </form> tags after the </p> field.

If you find certain form elements getting deleted, you will need to use the extended_valid_elements variable in the configuration. 

For instance,
extended_valid_elements : “form[*],input[*],textarea[cols|rows]”,

Posted in: CMS / Tagged: ,

Custom width icons in TinyMCE

March 3, 2009 7:50 pm /

UPDATE 4/1/2011: This post is now outdated. I have written a new post for TinyMCE 3.4 and wider icons.
http://albertech.net/2011/04/tinymce-how-to-add-wider-toolbar-icons/

In order to make icons wider in TinyMCE, you will need to remove the default width on the mceIcon class. Its forced at 20px, which limits all icons to be square.

To make the change, go to your ui.css file
For advanced theme users, its located in themes/advanced/skils/default/ui.css

In Version 3.2.2.1, its line 30:
.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; width:20px; height:20px}

The line should be changed to:
.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; height:20px}

Next, you will need to define your custom button when initializing TinyMCE.
Using the example:
setup : function(ed) {
// Add a custom button
ed.addButton('mycustombutton', {
title : 'My custom button',
image : 'img/[Filename of custom button]',
onclick : function() {
ed.selection.setContent('<strong>Hello world!</strong>');
}
});

Add the button to the menubar, which is in the section defined with “theme_advanced_buttons…”
For my example, I will need to append “mycustombutton,” to it

You will then need edit the ui.css file with the wider button. For simplicity, add it to the end of the ui.css file so you can easily copy it when a new version of Tiny MCE is released. Replace the boldface “mycustombutton” with the name of your button. If you button name is mrfancypants, then it will be .defaultSkin a.mce_mrfancypants

/* Custom button */
.defaultSkin a.mce_mycustombutton {
width: 65px;
}

That should be it! I plan on adding a lot more TinyMCE tutorials since I’ve decided to change the WYSIWYG component on all my applications to TinyMCE. CSS works really well with TinyMCE and cross platform browsers.

Posted in: CMS / Tagged: ,