13 Mar

Take Two: Textile Editor

March 13th, 2007 — 11:02 pm Dave

Some good news and bad news. First the bad news, this isn’t going to make the Friday release. There’s just too much to clean up with too little time. The good news? We’ve decided to do a really small release relatively quickly after this one. There is another feature that Chris is working on that won’t be finalized by Friday either. So we’ll take a little time and get this done right. That and I’ll actually be able to sleep ;)

That being said I wanted to make my second stab at this editor available for review. It’s been cleaned up some. Still doesn’t work in IE. Check it out

Additions:

  • an updated, cleaner look
  • if you select some text and apply a style to it it stays selected
  • if you select some text, apply a style and click that same style again it’ll remove the style
  • proper text selection if you select across double line breaks
  • if you select left justify then want right justify it appropriately swaps out tags instead of doubling them up, same with h1 vs. h2
  • tool tips

Again, I know it doesn’t work in IE. I’ll get on that. On Windows please double-check the access key (it’s alt+b for bold). This wasn’t working before but I’d like to see if it’s working now. Blockquote is flaky but it’s 11pm and I want to go to bed. So with that…

Update #1 March 14th

Got a chance late in the day to finish tweaking this based on feedback. Only one more bit of functionality to add in indentation, the refactor and then make sure it all works in IE. New features:

  • blockquote works
  • if you select a list type and click the other type of list they’ll swap
  • if you paste in a list from Word so it has those ugly word bullets or characters just select the whole thing, click the list type you want, and the ugly characters will be auto-magically replaced (at least in S and FF on Mac)

Update #2 March 15th

Worked on this again last night, checked out the textism site to test an example and realized I was implementing about half the script incorrectly. I didn’t realize I could modify block tags like h1 the same way you can modify p tags. So I made a lot of changes last night (that aren’t live) and I’m continue to tweak and test. You’ll be able to swap through various block tags (from h1 to h2 to bq) and properly modify the various types. The code is a lot cleaner though and commented out which makes life a little easier.

Update #3 March 16th

Almost there… got all of the block changes made. Also got indentation to work across block elements as well as lists. There is now a mechanism to deploy a simple and extended version of the editor. There is a bug though if you have two on the same page because of the IDs for each button. Gotta figure that one out. Still have to make it work in IE. I’ve added about 300 lines of code to the original plus an absolute ton of functionality. I’m actually dreading making this work in IE. It’s been such a slog as it is. Check out the latest greatest

Update #4 March 17th

My daily update on this project. IE support wasn’t nearly as bad as I thought it’d be. I just abstracted the text selection a bit. About the only problem was the newline breaks in IE vs. FF/S. I’ve about wrapped it up for now (I think I’ve said this before) but the editor contains all the features we need. For folks outside of slate it’s missing a method to easily add images and links. I’m really not happy with the original method of doing this and I don’t want to spend time on something we’re not going to use. I’ll revisit it eventually. All that we need now is for a real test in Rails and figure out a way to wrap this all up in a plugin. So a wrap up of the final features:

  • supports: IE7, FF2, Safari2, need to test in IE6
  • ability to use “simple” vs. “extended” editor
  • supports all block elements in textile except footnote
  • supports all block modifier elements in textile
  • supports simple ordered and unordered lists
  • supports most of the phrase modifiers, very easy to add the missing ones (e.g. code)
  • supports multiple-paragraph modification
  • can have multiple “editors” on one page, access key use in this environment is very flaky
  • access key support
  • when selecting text to add, modify or remove tags selection stays highlighted
  • seamlessly change between tags and modifiers
  • initializer call doesn’t need to be in the body onload tag
  • can supply your own, custom IDs for the editor to be drawn around

I apparently like the word “wrap”. We’ll post a final, cleaned up release during the week. Until then I’m going to pull the code.

#1: Ryan said on Mar 14 at 8:22 am

Just a little feedback (I'm on Windows using Firefox): * the @alt+b@ doesn't seem to be working (it still applies to the Bookmarks menu - and thinking you may have meant @ctrl+b@, I tried that, too, and it was a no go as well) * the text remains selected * clicking the same style after it has already been applied, does remove the style; however, if I select text and do a bulleted list, then select a numbered list, it removes the bulleted list instead of converting to a numbered list * it seems that I can do _*bold italic*_ just fine, but wrapping +underline+ around a *bold* or _italic_ doesn't seem to work properly * the text positioning (left/right justified) seems to put the correct paragraph tag in there, but appears in the text when I click preview, rather than actualling justifying (it could just be something with the preview, though) For the most part, it works well. There are a ton of cases to consider with something like that, and so far, it looks good.

#2: Sarah G. said on Mar 14 at 8:45 am

alt+b isn't working for me (using Firefox in Windows) -- also tried ctrl+b, but that doesn't work either. I really like the ability to easily remove by just clicking that style again.

#3: Dave said on Mar 14 at 11:24 am

Both, thanks very much for the feedback. Ryan, it was great to get detailed feedback like that. 1. Bulleted list switch, never thought about it but it's something I'll definitely add 2. Access keys... these are aggravating. It's a neat feature but I'm not sure how much it'll be used. I've tried using them but I find it so awkward to type that maybe it's not a big deal to leave out. That being said I'm going to try just regular a href tags instead of buttons to see if it solves the issue. 3. The preview sucks. It's something taken from elsewhere and I would never rely on JS for all of the transformations in a preview. If we do one it'll be AJAX. 4. Next release supports textile in comments ;)

Add comment

You are adding a new comment