JDUy: TechWhet: movabletype

5/01/2013

TinyMCE: Editor won't accept / deletes IFRAME code.

The Problem: You might be using TinyMCE as a text editor on your form, or on some content management system like MovableType.
And you are trying to embed some kind of video or audio code onto the page. But every time you do, TinyMCE deletes the code.

If the embed code is for an <iframe> then you may have to add a line to TinyMCE's configuration script to get it to work.

Example: You want to embed a YouTube video.

You click on [Embed] under the video and it gives you code like this:

<iframe width="560" height="315" src="http://www.youtube.com/embed/LvkITsb9fA0" frameborder="0" allowfullscreen></iframe>

Your TinyMCE editor won't accept it for some reason.

Quick Solution #1 --

See if your embed source -- YouTube in this case -- provides alternate code.
YouTube offers a checkbox that says: [x] Use old embed code:

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/LvkITsb9fA0?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/LvkITsb9fA0?version=3&hl=en_US" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Better Solution #2 --

Depending on your TinyMCE setup, you'll have some code that can be configured to add or subtract buttons and features.

The feature you want to add is put into place using this line of code:

extended_valid_elements : "iframe[src|width|height|name|align]",

Specific Fix: MovableType TinyMCE plugin.

There are a couple of different TinyMCE plug-ins for MovableType 4.

If you are using this one -- https://code.google.com/p/tinymce-mtplugin/ -- you will have to find this file

/mt-static/plugins/TinyMCE/js/initialize.js

There may already be one exteneded_valid_elements in place for form.

Add the line of code (specified above) after the existing one for the form -- there can be multiple entries for this setting.

4/22/2013

Odd character codes showing up in MovableType posts

The most likely cause of character encoding problems occurs because of a mismatch of instructions. Most often this happens with extended characters like smart quotes, apostrophes, ellipses, en-dashes, foreign characters, etc.

In the MovableType configuration file -- mt-config.cgi -- there may or may not be a line that looks like this:

PublishCharset iso-8859-1

Also, there may or may not be a line in your HTML (5) <head> code that looks like this:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

The important part of these lines is the value of the charset -- in this case it is "iso-8859-1."

If you make sure that both of these lines exist, there should be more consistency between the character encoding that MovableType spits out and the character set that the browser is expecting to receive.

Also, the "iso-8859-1" charset is no longer supported, so you are probably better off with "UTF-8".

So, the mt-config.cgi file should have a line under "#======== REQUIRED SETTINGS ==========" that looks like this:

PublishCharset utf-8

And the <head> code of your templates should contain a line that looks like this:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

When you are done updating these settings, you need to republish your whole blog by clicking on the publish button (which looks like tow arrows chasing one another in a circle), and hitting Publish for All Files.