Matthew Knott

I currently use a rich text editor called Tiny MCE to write the articles for this site. When I started using it, I thought it was the bees knees, but I've come to find it has more than its fair share of drawbacks.

For one, I find myself circumventing it more and more, it strips my code tags, removes / from the beginning of internal links, and completely strips http://www.mattknott.com/ which can be annoying when you are referencing content from multiple locations!

In addition to all of this, I go into html mode a fair bit adding in syntax to try and maintain xhtml 1.0 strict adherence. There has to be an easier way.

This week I'm going to have a stab at a solution based around tag suggestion, similar to the Dreamweaver code editor, triggered by <, a list of tags appears, and refines as I continue to type. Clicking a tag will insert the text I want, the way I want it, including alt tags and title tags for images and links respectively.

I will post an update as to how I get on, as it's going to be a bit of a challenge, but with any luck it'll be something to expand upon in the future.

Tags: Syntax Standards Rich Text Editor RTE Rich_Text_Editor Dreamweaver Web_Standards Suggest Tag

After spending some time today looking into ways to insert HTML tags into textareas on iPhone, I decided to knock up a quick editor for this site based around the insert at cursor position model as discussed in the previous article.

This post is the first real test of it's function. The biggest problem is scrolling up and down the textarea, it's extremely difficult.

To accentuate the positives however, it can insert the tags I mainly use, such as paragraph, bold, and code. Also it's better than typing it manually. I'm going to try using a two finger scroll to move the textarea.

Roll on firmware 2.0 and the copy and paste feature. For now though, here's how it's done.

function insertAtCursor(myField, myValue) {

if (myField.selectionStart || myField.selectionStart == '0') {

var startPos = myField.selectionStart;

var endPos = myField.selectionEnd;

myField.value = myField.value.substring(0, startPos)

+ myValue

+ myField.value.substring(endPos, myField.value.length);

} else {

myField.value += myValue;

}

}

To call the function, I pass in a reference to my textarea object, followed by the text to insert.

<span onClick="insertAtCursor(document.getElementById('articleBody'), '<p></p>');">P</span>

Tags: Javascript iPhone Content Rich Text Editor Textarea Function

I've been looking around for a rich text editor that works with the iPhone / iPod Touch Safari browser. I sometimes make posts when I'm out and about and manually creating html tags is a real bind, so my options, at a high level are:

• Use a rich text editor
• Add buttons to insert common tags
• Dynamically add paragraph tags based on carriage returns

The problem with the iPhone is that the keyboard is only displayed when the cursor is inside a textarea, which rules out rich text editing, beside the fact that you can't currently highligh a block of text.

The next reasonable option would invove a textarea and using javascript to insert html tags at the cursor point. The only problem with this approach is that although it works it removes focus from the textarea and the keyboard disapears. This is an inconvenience but is the best available option available currently.

Dynamically adding paragraph tags is a time saver, as you just need to focus on typing. The problem occurs when you don't want to automatically add paragraph tags, say around a block of code.

A solution we haven't discussed, which would be ideal, is a custom key / keyboard feature. If you could have a keyboard set aside for custom, complex phrases, that were user programmable, then you could add your html syntax this was. Alternatively, a html key, which when held down, lists 5 / 6 common html tags.

Hopefully, within the next year or so this issue will be addressed for Safari, otherwise, native os html editors will need to be used and the content pasted into the web page, which is far from ideal.

Tags: Javascript Safari iPhone Apple HTML Rich Text Editor Webkit