Textile Editor Helper (TEH) extension

Yes, but those are custom buttons I added which are a bit more complex in that they have specific callback functions to create the link dialogs, etc. If you’re just looking to add your own “regular” textile formatting buttons, it’s much easier. In that case you could use the last commented line in the default buttons as a basis for your new button:

//teButtons.push(new TextileEditorButton('[id]', '[image.png]', '[open]', '[close]', '[accesskey]', '[Title]', '[simple or extended]'));

So quick example - if you wanted to add a code button you could do something like:

teButtons.push(new TextileEditorButton('ed_code', 'code.png', '@', '@', 'c', 'Code'));

…and of course add the icon to the teh/images folder edit/add: and if you do the icons are of course the ever-popular famfam silk icons

Oh nice! I’m sorry I didn’t even see that code commented out in there. I’m curious though, what is the “accesskey” and “simple or extended”?

Also I noticed that the button code had this for the heading 2 button:

'h2', '\n',

The h2 when output as textile should be h2.[space] which the button does correctly but I’m not sure how ‘h2’, ‘\n’ for the opening and closing tag in the config file translates into “h2.[space]”? That make sense?

Lastly, I believe I’ve found a bug in IE7. I’m not sure if you really test in IE7 or not or even care (I know some developers don’t even bother) but I thought I would bring it up:

Everything seems to work fine in IE7 except the URL and Email buttons when highlighting the text FIRST.

So, for example we were just testing some things out and typed this:

This is a test for textile helper extension.

We then highlighted the word “helper.” With “helper” highlighted we clicked on the URL button and typed in our URL (doesn’t seem to make a difference what the URL is) and clicked OK.

We then get this as output:

This is a test for textile “This is a test for textile helper extension. (This is a test for textile helper extension.)”:http://www.example.com extension.

Seems to be the same deal with the Email button. If we take this sentence:

This is a test for textile helper extension. Contact Tiger Woods here.

And then highlight “Tiger Woods” and click the Email button, fill in the email address and click OK. Here is what we get:

This is a test for textile helper extension. Contact [ email=name.name@test.com ]This is a test for textile helper extension. Contact Tiger Woods here.[ /email ] here.

Everything in FireFox seems fine. I prefer Firefox but unfortunately our users at work (ones updating the site) like IE7. If I have to though, I’ll upgrade them to FireFox.

Thanks

I’m curious though, what is the “accesskey” and “simple or extended”?

the accesskey setting is for keyboard accessibility. you can ignore the simple or extended parameter - the original rails plugin supported initializing it with a “simple” theme showing only the few buttons set as “simple”, but for my purposes it didn’t seem necessary…

The h2 when output as textile should be h2.[space] which the button does correctly but I’m not sure how ‘h2’, ‘\n’ for the opening and closing tag in the config file translates into “h2.[space]”? That make sense?

it looks like the main script does some checking for textile block modifiers and adjusts accordingly. keep in mind I just ported this over for EE so even though I’ve gotten to know the internals pretty well, the whole javascript core is all by the original authors, and is fairly complex (at least to me).

Lastly, I believe I’ve found a bug in IE7. I’m not sure if you really test in IE7 or not or even care (I know some developers don’t even bother) but I thought I would bring it up:

Hmm…those are the custom buttons I added… I’ll check out the selection problem in IE, I have to admit IE is not a priority for this with me, but I do have clients using it that are on IE.

Thanks for you quick responses! I apologize for all the questions. I understood it that you developed this extension. I didn’t realize you basically just ported it over for EE use. 😉

At any rate, yeah just let me know if you find anything on that IE bug. Thanks for checking on that.

Very involved post.

I take it the main drive for developing this extension is so that authors of your weblogs can format their text easily while publishing/editing. So the extension adds the formatting bar to the weblog publish page? Right?

That’s cool, but I am just looking for a WYSIWYG formatting bar for people to use on the wiki. And I’d like to add a custom button to it. E.g., I’ve made a new style for right to left language, and want to have a button to wrap it in this code (see also this post):

[style=farsi][/style]

I take it the TEH can be used in a wiki context as well, and custom buttons can be made. Not sure where to install it though. Do you install it in one place and it works in the wiki as well as the weblogs?

A few other questions:

Y’all seem like Textile fans. Is there a comparison somewhere of Textile vs. markup vs. PMCode?

Is there WYSIWYG formatting bar extension for PMCode? I see someone else’s post on the PM topic has no replies, while this one has 94, so maybe Textile is 94 times as popular as PM code?

Also, which one is the most like wikipedia markup? I want people to go easily from editing my wiki pages to working in wikipedia and vice-versa. Would PM Code be the closest?

Thanks!

Very involved post. I take it the main drive for developing this extension is so that authors of your weblogs can format their text easily while publishing/editing. So the extension adds the formatting bar to the weblog publish page? Right? That’s cool, but I am just looking for a WYSIWYG formatting bar for people to use on the wiki. And I’d like to add a custom button to it. E.g., I’ve made a new style for right to left language, and want to have a button to wrap it in this code (see also this post):

[style=farsi][/style]

I take it the TEH can be used in a wiki context as well, and custom buttons can be made. Not sure where to install it though. Do you install it in one place and it works in the wiki as well as the weblogs? A few other questions: Y’all seem like Textile fans. Is there a comparison somewhere of Textile vs. markup vs. PMCode? Is there WYSIWYG formatting bar extension for PMCode? I see someone else’s post on the PM topic has no replies, while this one has 94, so maybe Textile is 94 times as popular as PM code? Also, which one is the most like wikipedia markup? I want people to go easily from editing my wiki pages to working in wikipedia and vice-versa. Would PM Code be the closest? Thanks!

Hi,

I don’t have any experience with the Wiki, so I’ll make the assumption that it basically works like the rest of EE. I apologize if my assumption is incorrect. 😉

Basically the Textile Editor Helper adds a toolbar to any custom field with the text formatting type set to “textile.” It really isn’t installed on a weblog by weblog basis. If the custom field is set to textile formatting, then this toolbar will be installed just above the textarea/input area.

It is comparable to Markdown and PMCode in that they have the same goal in mind, which is allowing the user to have more control over the text their entering without knowledge of HTML. Similar to a WYSIWYG editor, but not exactly. I don’t have as much experience with the Markdown plugin. I tried it and found Textile to be easier for me, so that’s what I went with. For PMCode, all you’ll need to do there is edit your weblog settings to show “formatting toolbar” on the publish page by going here:

Admin › Weblog Administration › Weblog Management › Weblog Preferences › Publish Page Customization

I hope this helps some? Like I said, I’ve not used the wiki so this could be totally irrelevant. I apologize if that’s the case.

It is comparable to Markdown and PMCode in that they have the same goal in mind, which is allowing the user to have more control over the text their entering without knowledge of HTML. Similar to a WYSIWYG editor, but not exactly. I don’t have as much experience with the Markdown plugin. I tried it and found Textile to be easier for me, so that’s what I went with. For PMCode, all you’ll need to do there is edit your weblog settings to show “formatting toolbar” on the publish page by going here:

Admin › Weblog Administration › Weblog Management › Weblog Preferences › Publish Page Customization

I hope this helps some? Like I said, I’ve not used the wiki so this could be totally irrelevant. I apologize if that’s the case.

Thanks!

My weblog preferences are set up as you advise above. That works fine. (Except it shows html, not pmcode). The forums also have the nice formatting bar, although there isn’t a place to fix it. Digging into the themes templates folders, I see this line:

Which suggests that html_formatting_buttons is an include somewhere, but I have no idea where. So I have 3 questions:

1) Where to find this include - htmo_formatting_buttons, 2) how to add the farsi style to it; and 3) can this simply be plugged into the wiki? same language?

That might solve my problem for me. Oh, except it will have to be modified, since wiki links are:

[[wiki link]]

and html is

[url] [/url]

Well, one thing at a time.

Thanks!

Ah, you’re right. Sorry, don’t know why I thought the default html formatting buttons displayed PMCode.

Anyway, I think you edit the formatting buttons by going to Admin >> Weblog Administration >> Default HTML Buttons. Although I’m not sure if that will change the buttons in the forums or not. I’ve never worried about what buttons display in the forums. May require some kind of hack to a core .php file? Under the default HTML buttons area, if that does control all the formatting buttons on the site, it’s pretty straight forward to add your own button… just enter an opening and closing tag and you’re all set.

I’m not sure if that same language can be plugged into the wiki… hopefully someone else can chime in there.

That’s brilliant! Never noticed the default HTML Button option. Works great!

Alas, it only works for the weblog posts. The changes don’t register in the forums. And the wiki doesn’t have anything showing at all. Still at a loss for where to edit forum html buttons. Which core.___.php file? I’m squeamish about going in there.

I think the secret is here somewhere:

<div class="itempadbig">{include:html_formatting_buttons}</div>

Where are these “include” things located? Some global location? The changes made to weblog HTML buttons didn’t show up in Forums. They are different buttons. The default forum buttons appear to be:

<b> <i>  <u> <img>  quote code @ <a>  Close Tags

I’ve looked through all of the templates in the forums and cannot find anything for the html buttons. So, I’m guessing that to edit these you would in fact have to edit one of the .php files and that’s completely above head as I don’t do php. 😉

May be beneficial for you to simply start a new thread over in the tech support area? Since this thread isn’t technically about the html formatting buttons found in the forums, you’re not likely to get much of a response from people in the know.

Done. Here’s the new topic posting if you want to subscribe.

There seems to be a conflict between Playa and TEH preventing the selections in Playa from being saved. Has anyone run into this or resolved it?

hi smartpill - are you using the most recent version of TEH (1.1.0 - the new jQuery version)? There was a conflict with previous versions that used Prototype, but that has been fixed and I have several installs with both TEH 1.1.0 and Playa 1.0.9 playing nicely together currently…

-mike

I still had v1.0.4. v1.1.0 works perfectly with Playa. Thanks for your help!

Hi,

I have a couple of problems with this Extension that I’d like to tell you about.

1. In IE7 - The insert web link button doesn’t seem to work properly for me. I type some text, for example:

“I want to create a LINK HERE”

I select the text that I want to become the anchor (LINK HERE) , enter the URL in the popup and press enter, and I get the following output:

I want to create a "I want to create a LINK HERE":http://www.google.com

It seems to be copying part of the text and repeating it and including it in the anchor text. This is obviously not what its supposed to do!

2. The other problem I have is a display issue with the toolbar buttons. If I am using TEH on a field near the top of my entry form and I hover over the Publish tab, the TEH toolbar sits on top of the menu, obscuring it, and not allowing me access to all the menu items. This is perhaps better illustrated with a screenshot. (see below)

This is a big usability issue for me and will be for my client. Unfortunately It seems to happen in all browsers. I was surprised not to have found any other people posting about this issue. That gives me confidence that it may be something that can be fixed!

I would be grateful for any ideas or assistance on both the above issues.