Buttons for Format Editing Text

I'm trying to do a flexible way to put formating buttons on TWiki's edit mode, like TWiki:Codev.MediaWiki does. I'm not using the javascript code of it to base this. (I was thinking to do it... but it's very diferent)

This is an example about this:

For it works we need to include the topic BaseFormatBar. It contains a script to create the formating bar and it's bottons. The format bar will appear where the %INCLUDE{"BaseFormatBar"}% is put.

This TWiki user variables defines the buttons for the format bar.

• Put it on the TWikiPreferences (it must have the base format options of the TWiki instalation):

     [ "{type}","{text}", "{button tip}", "{tag open}<T>{tag close}", "{sample text}", "{prompt text}" ],
   * Set TWIKI_FORMAT_BUTTONS =
     [ "ico","bold.png",    "Bold",        "*<T>*",  "bold text" ],
     [ "ico","italic.png",  "Italic",      "_<T>_",  "italic text" ],
     [ "txt","Mono",        "Monospaced",  "=<T>=",  "monospaced text" ],
     [ "isel","colors.png", "Text Colors" ],
     [ "topt","Red",        "",            "%<nop>RED%<T>%<nop>ENDCOLOR%",     "red text" ],
     [ "topt","Green",      "",            "%<nop>GREEN%<T>%<nop>ENDCOLOR%",   "green text" ],
     [ "topt","Blue",       "",            "%<nop>BLUE%<T>%<nop>ENDCOLOR%",    "blue text" ],
     [ "topt","Orange",     "",            "%<nop>ORANGE%<T>%<nop>ENDCOLOR%",  "orange text" ],
     [ "tsel","test sel",   "Testing..." ],
     [ "iopt","bold.png",   "Negrito?",    "%<nop>ini1%<T>%<nop>end1%",  "test opt 1" ],
     [ "topt","opt 02",     "",            "%<nop>ini2%<T>%<nop>end2%",  "test opt 2" ],
     [ "tsel","Link",       "Create a Link" ],
     [ "topt","Force a text to be a link",        "",  "[<nop>[<T>]]",       "forced link" ],
     [ "topt","Make a text to link for any page", "",  "[<nop>[<@>][<T>]]",  "link text", "The WikiName of a topic or an URL" ],
     [ "help_sel","help.png",        "Help" ],
     [ "help_opt","about",           "Codev.ButtonsForFormatEditingText" ],
     [ "help_opt","Formatting Help", "TWiki.TextFormattingRules" ],
     [ "help_opt","Good Style",      "TWiki.GoodStyle" ],
     [ "help_opt","Variables",       "TWiki.TWikiVariables" ],
     [ "help_opt","Plugins",         "TWiki.InstalledPlugins" ],

• Put it on the WebPreferences (it can be used to append more buttons for extend the edit on this web):

     [ "{type}","{text}", "{button tip}", "{tag open}<T>{tag close}", "{sample text}", "{prompt text}" ],
   * Set WEB_FORMAT_BUTTONS =
     [ "ico","underlined.png",  "Underlined",   "<u><T></u>",  "underlined text" ],
     [ "txt","Inc",  "Include a topic or page", "%<nop>INCLUDE{<@>}%<T>", "", "The WikiName of a topic or an URL" ],
     [ "help_opt",   "Web Index",         "%WEB%.WebIndex" ],

• To format the appearance of the Bar and the buttons, change the CSS value on this variables (in the preferences topic):

   * Set FORMAT_BAR_STYLE = border: 1px solid #D0D0D0; background-color: #F0F0F0;
   * Set FORMAT_BUTTON_STYLE = border: 1px solid #404040; background-color: #D0D0D0; color: #404040;
   * Set FORMAT_SELECT_STYLE = border: 1px solid #404040; background-color: #C0C0C0; color: #707070;

-- TWiki:Main.AurelioAHeckert - 03 Aug 2005

I like the idea of trhe button bar "like wikipedia" but the explaination here and the illustration needs to be better.

• Where does the include go? In the topic or in the edit template?
• How do you get the "mutiline" definition into the preferences topic? They won't go in the way they are illustrated above.

-- AntonAylward - 04 Aug 2005

It would be great to see a full demo of this. The demo above (if that's what is is) doesn't seem to be working (at least with my browser/OS - Firefox/OSX).

-- LynnwoodBrown - 04 Aug 2005

The javascript is failing on me, in both IE and Firefox.

-- RafaelAlvarez - 04 Aug 2005

It's on development...
I will notify you.

-- AurelioAHeckert - 10 Aug 2005

Hey Aurelio! I found other way to edit pages into browser. Look this http://www.fckeditor.net/ This fckeditor is for edit pure html. But you can mixed into you editor.

PS: The visual is very good!!

-- JarbasJunior - 20 Aug 2005

Aurelia, it just occurred to me that you might not know about the iejs skin. See templates/edit.iejs.tmpl

Jarbas, see WysiwygPlugin. it should be possible to support integration of any pure HTML editor using that plugin. Some people have already looked at integrating fck.

-- CrawfordCurrie - 20 Aug 2005

Hyeeee!!! My Big Friend Jarbas!!!

So... the idea of this extencion is to help the people to write in TWiki Shorthand. The FCKeditor is an WYSIWYG editor. to do this we have this works: IntegrateHtmlAreaEditor KupuEditorAddOn

The FCKeditor looks good! Did you want to start the integration project?

-- AurelioAHeckert - 20 Aug 2005

Aurelio, have you looked at WikiEdit? Looks similar in scope, from first glance

-- JosMaccabiani - 23 Aug 2005

Thank you Jos!

This realy have some common things... I'll put the diferences:

• The WikiEdit focus in the Wacko Wiki
• The TWikiButtonsBar focus in TWiki
• The WikiEdit can be changed for another markup language (the developer is open for contact)
• The TWikiButtonsBar can receave a new javascript array and change completily its markup (it can be useful in the same TWiki instalation... some Web can have diferent buttons)
• The WikiEdit suports Autoindent (beaultiful idea!)
• The TWikiButtonsBar will first suport to create things for line formating (like lists) then will copy this bealtiful idea
• The WikiEdit do not suports I18N.
• The TWikiButtonsBar suports completly remake its buttons list and its texts (so the language is ok!)
• The WikiEdit do not soports Themes
• The TWikiButtonsBar suports change its CSS style and the buttons images are attached in the script topic
• The WikiEdit Suports Mozilla, IE and Opera
• The TWikiButtonsBar Suports only Mozilla becose my IE above the Wine is crashing...
• The WikiEdit is read for use!
• The TWikiButtonsBar is in development...

-- AurelioAHeckert - 28 Aug 2005

Cool; so when can we expect TWikiButtonsBar?

-- CrawfordCurrie - 28 Aug 2005

Man...

I'm in a project that need it, and some others will use this too...

But now (in this week) the priority is for two websites.

I will try to put anything in this week, but an usable version only on the next week.

-- AurelioAHeckert - 28 Aug 2005

FYI, IE-6 says: line 352: button.0 is null or not an object

-- JeffPeck - 23 Nov 2005