Textile Editor Helper (TEH) extension

I wish it was a requirement that custom extensions for the 1.x branch of EE had to use jQuery :down:

As it is, I find I’m relying on Playa for my builds, and TEH is a “nice-to-have” but not totally necessary. If I could put TEH on jQuery and in no-conflict mode, I’d do it in a second, but every time I look at it under the hood, I get confused by something.

smallbeer, when you change the priority of Playa, do you disable/re-enable the extension afterwards?

Yeah I’m disabling/enabling each time. Ryan, can you confirm whether the other conflict issues have been similar to mine or were they just the CSS problem? At least then I’ll know that people have fixed the same issue.

Hi guys - just wanted to let you know I updated TEH to a new version using jQuery and gave Prototype the boot. Grab it at the top of the thread.

I’ve tested and it plays nice now with Playa. Hope this is better for all of us now. (I wanna use Playa too dammit!) There’s no queries at all anymore as it just uses javascript to attach itself to a field with Textile format selected so those that had the issue of it not showing up sometimes should be fixed. It also loads a lot faster for me without Prototype slowing it down.

I also added the option to encode email addresses using EE’s encode tag (which has to be escaped for textile so the quotes don’t get mangled). By default it still just makes a regular mailto link though.

The settings are also cleaned up so there’s just a path to jQuery (change it to point to your existing jquery file if you want), one path the “teh” folder, and then just the help url and setting for encoding the email or not. Should be easier to set up and move around.

Upgrade note: I added a prefix to the extension filename like all good EE addons should be using (hey, this was one of my first extensions!), so it may be easier to just dump the old one first and install the new version clean.

And one last thing, I still think mdesign’s .(JavaScript must be enabled to view this email address) would be a better more well-rounded solution going forward, but for those of set on just Textile I hope this is helpful.

Edit-add:I also just tested with mdesign’s Dulee Noted extension and they seem to like each other just fine. Sweet extension by the way, adding that handy one to my default list! Sorry for all the conflicts, hope this fixes everything…but let me know if you run into any troubles…

Goodness gracious this bit of news made my day. I really cannot wait to try this. Thanks!

This would be excellent news if only I could get it working! I’ve installed the new jquery version on a fresh EE install with no other extensions. The textarea has textile as it’s text formating choice but the toolbar doesn’t show up on the publish/edit page.

I’m getting no javascript errors, the paths are all correct. Any ideas?

Weird, I’ve installed it in 3 EE sites now without a problem… It sounds like you’ve got everything set up right, and you’ve probably tried disabling/renabling/rechecking settings already, so let me double-check on a fresh install and see.

smallbeer - I’ve just double-checked on a fresh install and everything is working for me (tested in Safari & FF on a mac). You may want to grab a fresh copy and give it a go again, I just uploaded an update to change the email encoding option.

Otherwise, is there anything different about your test install? Masking the CP or pointing to an existing jQuery file or anything?

OK I figured it out. The toolbar will only display if I choose “Display Formatting Menu” when choosing Textile as the text formatting.

Is there anyway of changing that?

smallbeer - grab the extension again at the top of the thread - should be fixed now.

Hi,

I’ve just downloaded this and it seems to be working great. I really don’t need all of the buttons that the TEH provides and I’m wondering if there is an easy way to remove the buttons that I don’t need? I assume I’ll need to hack the textile-editor.js file but I’m not sure what to edit since I don’t do JavaScript. Anyone help me out here?

I think you edit the textile-editor-config.js file. There are a list of variables at the top. I think you can comment out the ones you don’t need.

Deron, Eric’s exactly right, in the textile-editor-config.js file you can comment out any of the buttons you don’t want. Basically each of the lines at the top that begin “teButtons.push”… is either a button or separator and can be commented out or deleted altogether.

Conversely, you can add buttons that do cool things, too. I made one that takes a selected image tag, wraps it with a div, floats it left and adds optional spans for photo credit and caption below the image (much like pics in ESPN.com articles). I even created a little custom icon for it and uploaded that image with the other icons.

Deron, Eric’s exactly right, in the textile-editor-config.js file you can comment out any of the buttons you don’t want. Basically each of the lines at the top that begin “teButtons.push”… is either a button or separator and can be commented out or deleted altogether.

Thank you very much. That seems easy enough. This extension will come in so handy for me. Thanks for developing it.

Conversely, you can add buttons that do cool things, too. I made one that takes a selected image tag, wraps it with a div, floats it left and adds optional spans for photo credit and caption below the image (much like pics in ESPN.com articles). I even created a little custom icon for it and uploaded that image with the other icons.

That is the next thing I was going to ask about. I don’t need any additional buttons right now, but might later.

I see this in the config file:

// Add the new custom buttons
teButtons.push(new TextileEditorButtonSeparator(''));
teButtons.push("<button id=\"ed_link\"><img ></button>");
teButtons.push("<button id=\"ed_email\"><img ></button>");
teButtons.push("<button id=\"ed_help\"><img ></button>");

Like I said, I’m basically less than a noob with javascript so I’m wondering if this is a starting template for creating a button? If so, what all do I need to change in that code to generate a new button and get it to do what I want?

EDIT: Ok, so the code I pasted above didn’t turn out like it looks in the actual config file. Hopefully someone will get the gist of what I’m asking.