• PHP
  • Ruby on Rails
  • MySQL
  • Linux
    • SELINUX
    • Fedora
    • debian
  • Apache
  • nginx
  • AJAX
Albertech.net

Tag Archives: Tinymce

TinyMCE 3.4.2 Update: Fixes for Internet Explorer Compatibility

May 6, 2011 1:17 pm / Albertech.net

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.

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: CMS / Tagged: Internet Explorer, tinymce

TinyMCE: How to add wider toolbar icons

April 1, 2011 6:13 am / Albertech.net

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.

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: CMS / Tagged: tinymce, wider icons

TinyMCE: Fix the removing of empty DIVs

October 23, 2009 2:23 pm / Albertech.net

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.

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: CMS / Tagged: empty divs, tinymce

Tiny MCE – Getting forms to work

April 1, 2009 5:38 pm / Albertech.net

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]”,

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: CMS / Tagged: forms, tinymce

Custom width icons in TinyMCE

March 3, 2009 7:50 pm / Albertech.net

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.

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: CMS / Tagged: custom buttons, tinymce

Categories

  • AJAX
  • Android
  • Apache
  • Canon Cameras
  • Cloud
  • CMS
  • Computer Mods
  • Conferences
  • Deals
  • debian
  • Fedora
  • Flash
  • Frameworks
  • git
  • Hardware
  • HTML
  • IDE
  • iPhone
  • iPhone App Review
  • jQuery
  • Linux
  • Mac OS X
  • MySQL
  • nginx
  • PHP
  • portfolio
  • Puppet
  • Ruby on Rails
  • Script Reviews
  • SELINUX
  • Software
  • Software Review
  • SQL Server
  • statistics
  • Tech
  • Tomcat
  • Uncategorized
  • VMWARE
  • VPS
  • Windows
  • wordpress
  • Zend Framework

Blogroll

  • DragonAl Flickr
  • Dropbox – Free 2GB Account
  • James' Blog
  • Javascript Compressor
  • PHP Builder Community
  • PHP-Princess.net
  • Rubular – Regular Expression Validator
  • The Scale-Out Blog
  • Tiny MCE

Tags

activation AJAX android antec Apache AWS awstats canon coda codeigniter debian enclosure external free G1 install vmware tools Internet Explorer iphone 5 jquery Linux mx-1 MySQL office 2007 OSX photoshop PHP plugin plugins portfolio redesigned website review rewrite script security SELinux ssh tinymce tutorial upgrade VMWARE vmware server wordpress wordpress mu XSS zend framework
© Copyright 2013 Albertech.net
Infinity Theme by DesignCoral / WordPress
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.