Movable Type.org

Movable Type 5.2 features an updated version of the rich text editor. We hope the new features will help make it faster and easier to customize blog entries and website pages.

Entering rich text edit mode

By choosing the "rich text" format option, the user's text input field will switch to WYSIWYG mode.

Rich text interface changes

All buttons have been redesigned, and the editor now supports HTML styling.

HTML editing mode

By clicking the [</>] button located in the top right corner of the editor, the input mode will change to plain or HTML editing mode. Click the same button again to return to WYSIWYG editing mode.

Button function

Button	behavior	code
	defines strong text	<strong>Text</strong>
	defines emphasized text	<em>Text</em>
	defines unhdeline text	<span style="text-decoraton:under-line;">text</span>
	defines strikethrough text	<del datetime="YYYY-MM-DDTHH:MM:SS">text</del>
	insert link	<a href="url">Text</a>
	remove link	n/a
	defines blockquote	<blockquote>Text</blockquote>
	define indent	<p style="padding-left: 30px;">Text</p>
	remove indent	remove one indent element(-30px)
	defines unordered list	<ul>    <li>text</li> </ul>
	defines ordered list	<ol>    <li>text</li> </ol>
	aligns text to the left	<p style="text-align:left;">text</p>
	aligns text in center	<p style="text-align:Center;">text</p>
	aligns text to right	<p style="text-align:right;">text</p>
	insert image files	n/a
	insert asset files	<a href="FileURL">File</a>
	undo operation	n/a
	redo operation	n/a
	remove format	n/a
	insert horizontal line	<hr />
	switch to fullscreen mode	n/a
	defines text color	<span style="color:#ff0000;">
	defines background color of text	<span style="background-color:#ff0000;">text</span>
	defines text format	<hn>Text</hn>, <pre>Text</pre>, <p>Text</p>

Format modes other than WYSIWYG

For any other format selected, as well as sub-formats, such as [html editing mode] inside [rich text] format, the buttons and options within the editor will change accordingly.

Choosing tag options while text is selected

With text selected, the opening and closing tags will be inserted before and after the selection. The cursor will then appear immediately following the closing tag.

Examples:

<strong>Text</strong>|

Choosing tag options without selecting text

The opening tag will be inserted before the cursor. If the same button is clicked again, the corresponding closing tag will be inserted next to cursor, with the cursor moving to a new position following the tag.

Examples:

<strong>Text Foo Bar

<strong>Text</strong> Foo Bar

Full screen mode

By clicking the [full screen button], the display will change to full screen mode. If the same button is clicked again, the display will return to the default size.

Default

Full Screen

Defining CSS for the text editor

You can now define your own CSS specifications for the text editor. This in turn makes it possible to easily assign different graphic styles between blog entries and web pages.

How to define CSS

Click [Settings] > [Compose] in the website/blog navigation menu. Then, link the style sheet using the full URL address, or other way. The CSS file should become effective on the defined website/blog after clicking the [Save Changes] button.

Before CSS definition:

CSS definition

After CSS definition:

Switching the CSS class between Entry and Page

When using rich text mode, Movable Type can specify different graphic styles for blog entries and web pages via the linked to style sheet.

Defining the two classes [body.page] and [body.entry] makes it easier to individualize graphic styles between pages and entries.

Example: Using different text styles

In this case, we want the blog's text and background to look different than the rest of the site. The corresponding style sheet would look something like this:

    body {
        font-family: serif;
    }
    body.entry {
        background: pink;
    }
    body.entry p {
        color: red;
    }
    body.page {
        background: green;
    }
    body.page p {
        color: yellow;
    }
    

By linking this style sheet, we get this effect:

Website Page

Blog Entry

Defining the CSS for the text editor in Theme

You can also define the CSS file for the text editor in the theme.yaml file within the Theme.

Set-up explanation for theme.yaml

The CSS in theme.yaml is set-up like this:

    elements:
        default_prefs: 
            importer: default_prefs
            data: 
                content_css: "{{theme_static}}path/to/cssfile.css"
    

Here is the sample code for Movable Type's original theme, "Pico":

    label: Pico
    id: pico
    author_name: Six Apart, Ltd.
    author_link: http://www.movabletype.org/
    version: 1.0
    class: blog
    protected: 1
    description: <__trans phrase="Pico is the microblogging theme, designed for keeping things simple to handle frequent updates. To put the focus on content we've moved the sidebars below the list of posts.">
    thumbnail_file: thumb.png
    thumbnail_file_medium: thumb-medium.png
    thumbnail_file_small: thumb-small.png
    elements:
        default_prefs:
            importer: default_prefs
            data:
                content_css: "{{theme_static}}style_library/test.css"
        template_set:
            component: core
            importer: template_set
            name: template set
            data:
                label: Pico
                ...
    

Sample CSS

Below you will find a sample CSS file defining individual graphic styles between entries and pages. Feel free to download and apply it to your text editor. Check out what kind of design will appear!

Sample file: Mt-theme-sample.zip

Note: This document is written based on the current beta specifications. Contents may be changed without notification.