upgrade to TinyMCE 2.09

TinyMCE new version 2.09 came. What's the new feature? Let's have a compare with the 2.02....
TinyMCE new version 2.09 came.

What's the new feature?

Let's have a compare with the 2.02.

The interface with full features of 2.02

TinyMCE 2.02 full feature Interface

The interface with full features of 2.09 

TinyMCE 2.09 full feature interface

Lots of changes, include: (I only list the changes which are most important for me. I didn't check the change logs, this info just for reference. )

  • New fullscreen mode, I'm editing on this mode, like it very much!
  • New tags supported
    • cite
    • abbr
    • del
    • ins
    • acronym
  • New development kit, powerful and helpfule!
  • Some tiny changes, such as:
    • nicer formating on HTML source window.
    • won't link the followed text after a link new generated.

Development kit interface

TinyMCE Development kit interface

This kit interface is able to collsape and expand.

Download and Upgrade in MT

Donwload the package file at here. Unpackage it and prepare to upgrade. Here's the steps:

  • Backup the old directory and files.
mt-static\plugins\Ajaxify\tinymce\
\cgi-bin\mt\plugins\Ajaxify\EnhancedEntryEditing.pl (You won't have and don't need to backup this file if you don't use the plugin EnhancedEntryEditing.) 
  • Replace all things in mt-static\plugins\Ajaxify\tinymce\ with the new version.
  • Open \cgi-bin\mt\plugins\Ajaxify\EnhancedEntryEditing.pl to edit. (no need do this if you don't have.)
  • Comment out all old settings from last installation within:
    settings => new MT::PluginSettings([
        ['tinymce_config', { Default => q{
        old setttings here
        }}]
    ]),

 

  • Copy new settings from the source(View->Page Source) of mt-static/plugins/Ajaxify/tinymce/examples/example_full.htm to the place of old settings.

    settings => new MT::PluginSettings([
        ['tinymce_config', { Default => q{
        /* old settings here */
        new setttings here
        }}]
    ]),
  • Make some neccesory changes on the new settings.
mode : "textareas",
mode : "exact"
elements : "text,text_more",
content_css : "example_full.css",
content_css : "/css/extend.css",

  • Save changes, then logon MT management to new an entry(might need a refresh here, F5), the new interface will take effect.
  • Done!

Here's the new interface in MT, a little fat for MT got overflow, but not a big problem. Enjoy it!

TinyMCE 2.09 interface in MT

The full code section in \cgi-bin\mt\plugins\Ajaxify\EnhancedEntryEditing.pl

settings => new MT::PluginSettings([
['tinymce_config', { Default => q{
/** This section was used by TinyMCE v2.01
mode : "exact",
elements : "text,text_more,excerpt",
theme : "advanced",
plugins : "iespell, emotions, inlinepopups",
theme_advanced_blockformats : "p,h1,h2,h3,h4,h5,h6",
theme_advanced_buttons1 : "formatselect,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,outdent,indent,separator,undo,redo,separator,link,unlink,separator,image,emotions,iespell,help",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],span[class|align|style]",
force_p_newlines : true,
relative_urls : false,
remove_script_host : false,
button_tile_map : true,
ask : false,
auto_cleanup_word : true,
theme_advanced_path_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
safari_warning: false,
oninit: "quicktagsHide"
**/
/** This section was used by TinyMCE v2.02
//mode : "textareas",
mode : "exact",
elements : "text,text_more",
//editor_selector : "mceEditor",
theme : "advanced",
//plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
plugins : "table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
//theme_advanced_buttons1_add_before : "save,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js",
content_css : "/css/extend.css",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
oninit: "quicktagsHide"
**/
/** This section was used by Tiny MCE v2.09 **/
//mode : "textareas",
mode : "exact",
elements : "text,text_more",
theme : "advanced",
plugins : "devkit,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor,advsearchreplace",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
content_css : "/css/extend.css",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_link_list.js",
external_image_list_url : "example_image_list.js",
flash_external_list_url : "example_flash_list.js",
media_external_list_url : "example_media_list.js",
file_browser_callback : "fileBrowserCallBack",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
nonbreaking_force_tab : true,
apply_source_formatting : true
}}]
]), 

 

EnhancedEntryEditing plugin settings problem

About  EnhancedEntryEditing here's an article talked about it in update section.Problem I was trying to change the...

About  EnhancedEntryEditing here's an article talked about it in update section.

Problem 

I was trying to change the style sheet for the MT entry editing area of the plugin EnhancedEntryEditing.

Here's the access to edit the settings in MT plugin management.

MT plugin management interface

To click Show Settings will get the settings text and be able to edit then save change.
I did the change and the save action did work but got no affection on the MT entry edit interface. It continued to refer to the old style sheet.

Solution 

Finally I track to EnhancedEntryEditing.pl where is the true settings live. I found that the change on MT plugin management don't effect this file in some abnormal reason. So I edited the .pl file directly and it works out.

EnhancedEntryEditing.pl is locate at: cgi-bin\mt\plugins\Ajaxify

Another blockquote Issue

I talked about blockquote at this article, then want to have it in TinyMCE, but I did not found where to insert it into content. After I did some hack work on Format feature I got this tag on the panel of TinyMCE. It's already there, the Indent will insert <blockquote> tag.

MT panel section

As my new learned, I should only use blockquote tag for real quoted content, not for the format indent. So, I might never use this button.

 

 

MT Upgrade from 3.2 to 3.33

Download MT 3.33 from MovableType.I didn't find the special version for upgrade,  however get it back...

Download MT 3.33 from MovableType.

I didn't find the special version for upgrade,  however get it back and unzip.

Out of my expectation, there's no any document about this release, like Readme.txt or so. Anyway I've experienced 2 times upgrade with past version.

Rename old cgi-bin directory as old, then upzip new as the original name. Make a compare by Beyond Compare, Rename mt-config.cgi-original to mt-config.cgi, and merge the old settings into it. The new configuration file remove most optional settings, only keep the required settings.

Modify the first line of all .cgi files from:

#!/usr/bin/perl -w

to

#!d:/green/perl/bin/perl -w

Rename old mt-static as mt-static_old, and move the new one to the path.

Open Firefox, address to http://blog.alex.com/cgi-bin/mt/mt.cgi, upgrade prompted automatically, Confirm to upgrade.

    * Upgrading database from version 3.2001.
    * Upgrading table for MT::Log
    * Upgrading table for MT::Category
    * Creating new template: 'Search Results Template'.
    * Assigning basename for categories... (100%)
    * Migrating any "tag" categories to new tags... (100%)
    * Setting new entry defaults for weblogs... (100%)
    * Updating user permissions for editing tags... (100%)
    * Database has been upgraded to version 3.3.

The new version works now.

Remain some work, need to restore the HTML Editor and some plugins from old version.

2006-11-20  Update

There're 3 plugins I used before update.

  • Collect
  • RelatedEntries
  • TinyMCE

Collect and RelatedEntries are easy to restore. TinyMce was intergreted via modifying tmpl files by myself more complex than a true plugin. I found there's new plugin comes,  EnhancedEntryEditing v1.11. TinyMCE v2.01 is wrapped in it. It' easy to install as well as normal plugins. See the online manual .

EnhancedEntryEditing provides less features as default setting than TinyMCE. I made change to support more features.

  1. Replace the content of below directory with the TinyMCE 2.02 to let it have the newest features.
    • EnhancedEntryEditing_1.11\EnhancedEntryEditing\mt-static\plugins\Ajaxify\tinymce
  2. Modify the plugin setting.

This step is more complex because of the version conflict. What I did is:

  • Comment out all settings from the EnhancedEntryEditing plugin(with TinyMCE 2.01)
  • Copy all settings from my old TinyMCE 2.02 as the current settings.
  • Merge the special settings in EnhancedEntryEditing to the current.
This is the last what I got.
ore,excerpt",
//theme : "advanced",
//plugins : "iespell, emotions, inlinepopups",
//theme_advanced_blockformats : "p,h1,h2,h3,h4,h5,h6",
//theme_advanced_buttons1 : "formatselect,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,outdent,indent,separator,undo,redo,separator,link,unlink,separator,image,emotions,iespell,help",
//theme_advanced_buttons2 : "",
//theme_advanced_buttons3 : "",
//theme_advanced_toolbar_location : "top",
//theme_advanced_toolbar_align : "left",
//extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],span[class|align|style]",
//force_p_newlines : true,
//relative_urls : false,
//remove_script_host : false,
//button_tile_map : true,
//ask : false,
//auto_cleanup_word : true,
//theme_advanced_path_location : "bottom",
//theme_advanced_resizing : true,
//theme_advanced_resize_horizontal : false,
//safari_warning: false,
//oninit: "quicktagsHide"

//mode : "textareas",
mode : "exact",
elements : "text,text_more",
//editor_selector : "mceEditor",
theme : "advanced",
//plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
plugins : "table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
//theme_advanced_buttons1_add_before : "save,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js",
content_css : "/css/screen.css",
force_p_newlines : true,
relative_urls : false,
remove_script_host : false,
button_tile_map : true,
ask : false,
auto_cleanup_word : true,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
safari_warning: false,
oninit: "quicktagsHide"

FlickrPhotos Version 0.84

Added a new plugin to MT.

Flickr photos is a plugin that enables you to display thumbnail links of Flickr photos in your Movable Type blog. Flickr Photos focuses on displaying lists of photos, in many possible ways.

install TinyMCE into MT cms

Following code will make all tags of textareas editable with TinyMCE.Add following code to MT /tmpl/cms/header.tmpl<!--...

Following code will make all tags of textareas editable with TinyMCE.

Add following code to MT /tmpl/cms/header.tmpl

<!-- added by alex on 2006-02-12 -->
<script language="javascript" type="text/javascript" xsrc="/ref/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
    //mode : "textareas"
    mode : "exact",
    elements : "text,text_more",
    theme : "advanced",
    //plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
    plugins : "table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
    //theme_advanced_buttons1_add_before : "save,separator",
    theme_advanced_buttons1_add : "fontselect,fontsizeselect",
    theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
    theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
    theme_advanced_buttons3_add_before : "tablecontrols,separator",
    theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_path_location : "bottom",
    plugin_insertdate_dateFormat : "%Y-%m-%d",
    plugin_insertdate_timeFormat : "%H:%M:%S",
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
    external_link_list_url : "example_data/example_link_list.js",
    external_image_list_url : "example_data/example_image_list.js",
    flash_external_list_url : "example_data/example_flash_list.js"
    //content_css : "/styles-site.css"
});
</script>
<!-- added end -->

Edit /tmpl/cms/edit_entry.tmpl, to modify the value of the attribute ROWS for tag TEXTAREA which are defined as following id.

  • id="text"
  • id="text_more"

I don't want to the textareas of templates to be editable with TinyMCE, so I change code to following. 

/tmpl/cms/header.tmpl

<!-- added by alex on 2006-02-12
     modified by alex on 2006-03-01 -->
<script language="javascript" type="text/javascript" xsrc="/ref/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    //mode : "exact",
    //elements : "text,text_more",
    editor_selector : "mceEditor",
    theme : "advanced",
    //plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
    plugins : "table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
    //theme_advanced_buttons1_add_before : "save,separator",
    theme_advanced_buttons1_add : "fontselect,fontsizeselect",
    theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
    theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
    theme_advanced_buttons3_add_before : "tablecontrols,separator",
    theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_path_location : "bottom",
    plugin_insertdate_dateFormat : "%Y-%m-%d",
    plugin_insertdate_timeFormat : "%H:%M:%S",
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
    external_link_list_url : "example_data/example_link_list.js",
    external_image_list_url : "example_data/example_image_list.js",
    flash_external_list_url : "example_data/example_flash_list.js"
    content_css : "/css/screen.css"
});
</script>
<!-- added end -->

content_css : "/css/screen.css" tells TinyMCE to use my own css file to display the content of the editable TEXTAREA.

Edit /tmpl/cms/edit_entry.tmpl.

class="full-width mceEditor" name="text" id="text"
class="full-width mceEditor" name="text_more" id="text_more" 

mail.png


标签订阅|Tag Subscription

If you use an RSS reader, you can subscribe to a feed of all future entries tagged 'TinyMCE'. [What is this?]

Subscribe to feed Subscribe to feed

最近更新|Recent Entries

不定期更新|Handy Entries

其它标签|Other Tags

分类栏目|Categories

按月归档|By Month

2008
11
10
07
05
04
03
02
01
2007
12
10
07
06
05
04
03
02
01
2006
12
11
10
09
08
07
06
05
04
03
02
01
2005
11
10
09
08
07
04
03
2004
12
11
10
09
08
07
06
05
04
03
02
01
2003
12
10
09
08
06
2002
09
08
04
03
02
2001
12
09
07
06
05

站内链接|Site Links

Powered by
Movable Type 3.34